MENÜ
BLOG
TASARIM
TEKNOLOJİ
PORTFÖY
İNFOGRAFİKLER
Bir önceki yazımda size söz verdiğim gibi beraber javascript yardımı ile css stil değiştirici hazırlayacağız. Ancak eğer css konusunda bilgi sahibi değilseniz lütfen uzman biri yardımı ile hazırlamanızı yapınız. Yapacağınız hata sitenizde değişik bozulmalara neden olabilir. Yazının devamında anlattığım css stil değiştiri hazırlama yabancı bir siteden Türkçeye çevirilmiş halidir.
1. Javascript styleswitcher dosyasını indirin
Vereceğim bu dosya stil geçişlerini sağlamanız için gereken bir js dosyasıdır.
İndir (styleswitcher.js)
Styleswitcher.JS Kod içeriği
[syntax type=”js”]
function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
if(a.getAttribute(“rel”).indexOf(“style”) != -1 && a.getAttribute(“title”)) {
a.disabled = true;
if(a.getAttribute(“title”) == title) a.disabled = false;
}
}
}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
if(a.getAttribute(“rel”).indexOf(“style”) != -1 && a.getAttribute(“title”) && !a.disabled) return a.getAttribute(“title”);
}
return null;
}
function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
if(a.getAttribute(“rel”).indexOf(“style”) != -1
&& a.getAttribute(“rel”).indexOf(“alt”) == -1
&& a.getAttribute(“title”)
) return a.getAttribute(“title”);
}
return null;
}
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = “; expires=”+date.toGMTString();
}
else expires = “”;
document.cookie = name+”=”+value+expires+”; path=/”;
}
function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
window.onload = function(e) {
var cookie = readCookie(“style”);
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie(“style”, title, 365);
}
var cookie = readCookie(“style”);
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
[/syntax]
2. <head> tagı arasında js dosyasını çağırın
Stil değiştiriyi ekleyeceğiniz sayfada </head> tagının hemen üstüne alttaki kodu ekleyin eğer koddaki src çağırma kısmı farklı ise kendi sitenize göre uygun hale getirin:
[syntax type=”html”]<script type=”text/javascript” src=”styleswitcher.js”></script>[/syntax]
3. Yeni bir stil dosyası oluşturun
Bu kısım en önemli kısımdır. Sitenizde bulunan css stil dosyasının bir kopyasını oluşturarak içindeki değerleri , renkleri yeni stile göre ayarlayın. Eğer stilinizdeki tanımlamalar diğer stil ile bağdaşmazsa uyumsuzluklar ortaya çıkabilir. Gerekli değişiklikleri yapıktan sonra dosyanızı “style-mavi.css” şeklinde farlı bir isim ile adlandırın ve kaydedin. Bu işlemi istediğiniz kadar stil oluşturmak için kullanabilirsiniz.
4. Head bölümünde stillere link verin
Dikkat etmeniz gereken nokta iki çeşit stil dosyası olduğudur. Ana stil ve Alternatif stil. Ana stiliniz temanın ilk stilidir Title yani başlık değeri default’dur.
[syntax type=”html”]<link rel=”stylesheet” type=”text/css” href=”style.css” title=”default” />[/syntax]
Oluşturduğunuz diğer stil dosyaları alternatif stillerdiir. Alttaki kod gibi “Rel” ve “Title” değerleri ana stilden farklıdır. Birden fazla alternatif eklemek için alttaki kodları tekrarlayabilirsiniz..
[syntax type=”html”]<link rel=”alternate stylesheet” type=”text/css” href=”style-mavi.css” title=”mavi” />[/syntax]
5. CSS stil değiştiricileri sitenize link olarak ekleyin.
Üstteki stil dosyalarını oluşturup tanımladıktan sonra buları ziyaretcilernizin kullanacağı hale getirmek için sitenizde istediğiniz herhangi bir yerde link olarak ister text formatında isterseniz imaj formatın kullanıcınıza suınabiilirsiniz. Altta belirttiğim kodda dikkat çeken kısım setActiveStyleSheet(’mavi’); olarak belirtiğimiz stil aktifleştirme bölümüdür.
[syntax type=”html”]<a href=”/” onclick=”setActiveStyleSheet(‘mavi’); return false;”>Mavi Tema</a>[/syntax]
Aynı link kodu ile alttakini kullanarakda ziyaretçinin orjinal stile dönmesi sağlanabilir:
[syntax type=”html”]<a href=”/” onclick=”setActiveStyleSheet(‘default’); return false;”>Orjinal Tema</a>[/syntax]
İşte bukadar stil değiştiriciniz hazır.
Eğer Css hakkında bilgi sahibi değilseniz lütfen uzman birinin gözetimi ile yapın. Yanlış bir şey yaptığınızda sitenizin yapısını bozabilirsiniz ve ben kesinlikle bu nedenden ötürü sorumluluk kabul etmem.
Kolay gelsin.
16 yorumlar On Javascript Css stil değiştirici hazırlamak
Elinize sağlık .
Bilgi için saol
Makale için teşekkürler.
Bir Sorunum var ;
herşeyi dediğiniz gibi yapıyorum index.html içine de ekliyorum
<a href="/" >Mavi Tema</a>ama temaya style-mavi.css e geçmiyor href=”/” e ne yazmam gerekiyor style-mavi.css yazıyorum direk css dosyasını açıyor ?
Yasin bey kodlamada eksiğiniz var.. yukarda verdiğim kod aşağıdaki gibidir stil aktifleştirici bir kodlama mevcut onclick olayında ;
<a href="/" onclick="setActiveStyleSheet(’mavi’); return false;">Mavi Tema</a>Safa Bey kodları yazıyorum yardımcı olursanız sevinirim.
<a href="/" rel="nofollow">Mavi Tema</a><a href="/" rel="nofollow">OrjinalTema</a>
Yasin hocam yanlışmı anlatıyorum bilmiyorum ancak verdiğiniz kodlar eksin durumda. 4. numaralı yoruma bakınız. mavi isimli temayı aktifleştiren bir kod eklenmiş.. Artı kodlara neden nofollow ekliyorsunuz anlamadım.?
Safa bey sizi uğraştırıyorum kusura bakmayın ama 5. yorumda tamamen sayfanın kodlarını atmıştım ve kodlar öyle değildi tekrar html takısı olmadan yolluyorum ; makele deki gibi tüm adımları izleyerek yaptım ama sonuca ulaşamadım eğer yolladığım kodlarda bir sorun varsa onu söyler veya da bir html sayfa örneği eklerseniz makalenize iyi olur. Teşekkürler.
Yasin bey kodları olduğu gibi eklemiyorsunuz. makaledeki kodlara dikkat edin.
merhaba kodları aynı şekilde ekledim fakat tıkladığımda css yi değiştirmiyor ayrıca sayfada javascript hatası vveriyor sol alt köşedeki sembolde.
Teşekkür Ederim. Süper bir olay. Uzun zamandır aklımda vardı bu olay fakat bir türlü kodları yapamamıştım. Sonunda buldum teşekkürler :)
wordpress temamın header.php dosyasına dediğiniz kodları aynen koydum ( tagının altına tabi). Sitede linkler belirdi ancak css değişikliği bir türlü olmuyor. Tıklıyorum ama tema hala aynı. Nereyi yanlış yapıyorum acaba?
Arkadaslar uygulama çalıstı. Burada dikkat etmeniz gereken
Mavi Tema
Orjinal Tema
kodlarında bulunan tek tırnak isareti.
Tek tırnakları klavyeden tekrar girin çalıstığını göreceksiniz. Makale için tesekkürler.
Arkadaslar kodlardaki tek tırnakaları klavyeden tekrar girin çalısacaktır. Makale için sağolun. İyi çalısmalar.
Makalenizi keyifle okudum yapmam gereken unsurları muhteşem anlatmışsın