Kategorilendirildi | CSS

Tags : , , , ,

Style Sheet Switcher – Dinamik site rengi değiştirme

Kategori: 19 Mart 2009

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.

csschanger

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.

HTML:
<html>
<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>

<body>

<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>

Ekleyen:

zbahadir - who has written 76 : zbahadir.


Yazara Mesaj Gönder

2 Yorum : “Style Sheet Switcher – Dinamik site rengi değiştirme”

  1. farukzet diyor ki:

    Merhabalar,
    Peki bunu vbulletin ile birleştirip php ile nasıl yapabiliriz.
    vbulletin.org gibi bazı şeyleri yaptım ama kullanıcıları databaseden update olayını yapamamıştım.

  2. zbahadir diyor ki:

    Ben onu IPB için yapmıştım. Diğer siteler içinde kullanılabilir. vBulletin için denemedim ama yapılabilir kolayca. Olay kullanılan CSS kodunu dinamik olarak yüklemek.


Fikrini Söyle

Yorum yapmak için Giriş yapmalısınız.

Önemli Linkler

Kategoriler

Arşivler

Takvim

Mart 2009
Pts Sal Çar Per Cum Cts Paz
« Şub   Nis »
 1
2345678
9101112131415
16171819202122
23242526272829
3031