Bazı sitelerde görmüşsünüzdür, tek tıklamayla site tema renginin otomatik olarak değişebildiğini.
Teknik olarak nasıl yapıldığını biliyor olsamda pratik olarak nasıl yapıldığını araştırınca onun ilgili bir DYNAMIC DRIVE'da bir kod buldum.
Sonradan öğrendiğime göre pek çok site de o kodu kullanıyormuş. Sahibi olduğum IPBAccess'te bu özelliği kullandım.
Kodun çalışma mantığına gelirsen dinamik olarak site temasına bağlı css kodunun değiştirilmesi olayı.
Buradan css kdeğiştirici kodunu indirip temamızın headar kısmına ekliyoruz.
Konun anlaşılması için yaptığım ufak bir örneği veriyorum. Zaten CSS tekniği bilen herkes nasıl napıldığı hakkında ön fikri vardır.
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-tema" href="blue.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="red-tema" href="red.css" />
<script src="styleswitch.js" type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
</head>
<div style="background: #FFFFFF; padding: 3px; float: left;margin: 5px; border: 1px solid #000000">
<a href="javascript:chooseStyle('red-tema', 60)" style="cursor: pointer">
<div name="choice" value="none" style="height: 10px; width: 10px; background-color: #CC0000; border: 1px solid #FFFFFF;float: left;"></div>
</a>
<a href="javascript:chooseStyle('blue-tema', 60)" style="cursor: pointer">
<div style="height: 10px; width: 10px; background-color: #3300CC; border: 1px solid #FFFFFF;float: left; margin-left: 3px"></div>
</a>
</div>
<div class="den">Deneme</div>
</body>
</html>
