Tamam aslında yukarıda verdiğim örnekler bunların bir parçasıydı.
Renk Seçimlerin kullanıcı taraflı olacağını düşünürsek.
İçeriğin bir adet Box ( Kutu ) ve Kutunun içerisindeki bir yazı içeriğinden oluştuğunu düşünelim.
custom.css dosyasını kullanıcının seçimine göre düzenlemeniz gerekir.
Ancak default bir css dosyanız olacak, kullanıcı seçimleri yapmazsa. ( Opsiyonel )
default.css .box
{
width:100px;
height:100px;
background:#000000;
}
.box_p
{
color:#ffffff;
}Kullanıcı seçimlerini yapacak ve işleyecek sayfa
custom.php <form action="#" method="post">
<fieldset>
<legend>Kutu Stil Ayarları:</legend>
<label>Genişlik:</label>
<input type="text" name="customs[class][box][width]" value="100px"><br><br>
<label>Yükseklik:</label>
<input type="text" name="customs[class][box][height]" value="100px"><br><br>
<label>Arkaplan Renk:</label>
<input type="color" name="customs[class][box][background-color]"><br><br>
<label>Yazı Renk:</label>
<input type="color" name="customs[class][box_p][color]"><br><br>
<input type="submit" value="Güncelle">
</fieldset>
</form>
<!--
Kullanım Örneği
customs[selector_type][selector_name][attribute]
// # (id) için Örnek: customs[id][box][background-color]
-->
<?php
if($_POST)
{
$custom_css = '';
foreach($_POST['customs'] as $selector => $names)
{
$available_selectors = array('id','class');
$replace_selectors = array('#','.');
$selector = str_replace($available_selectors,$replace_selectors,$selector);
foreach($names as $name => $attributes)
{
$completed_attributes = '';
foreach($attributes as $attribute => $value)
{
$completed_attributes.=''.$attribute.': '.$value.';';
}
$custom_css.=''.$selector.''.$name.' { '.$completed_attributes.' }'.PHP_EOL;
}
}
/* Örnek Çıktı şöyle birşey olacaktır:
.box { width: 100px;height: 100px;background-color: #000000; }
.box_p { color: #ffffff; }
*/
file_put_contents('custom.css',$custom_css);
}
?>Site sayfası index.php ( Örnek )
Zamanı bastırmamızın nedeni yapılan değişikliklerden sonra cachede kalmaması. <!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Default</title>
<link rel="stylesheet" href="default.css">
<link rel="stylesheet" href="custom.css?v=<?php echo time(); ?>">
</head>
<body>
<div class="box"><p class="box_p">Merhaba hoşgeldin.</p></div>
</body>
</html>Bu yapıyla ister renk seçimi yaptırın ister genişlik, yükseklik v.b örnekleri geliştirmek size kalmış. Ben işi biraz daha geniş düşünerek hızlı şekilde yazdım kodları. Ben sizin için en iyi örnekleri verdim.
Umarım başka arkadaşlarında işine yarar.