buyrun tema konusunda cimlastik yapmak isteyenler... detaylısı için: (bkz:
detaylı tema kursları)
sıfırdan css olayına girmiyoruz tabi, sıfırdan uğraşmaya ne gerek var? zaten mevcut css'de olmayan yerleri de ekleyebiliyoruz, fazlasını çıkarabiliyoruz. aynı hesaba geliyor sanki ya neyse işte...
1- üzerinde oynama yapılmak istenen css dosyasını edinmek: ayarlardan istenilen tema seçiliyor, sayfa yenileniyor ve sağ tıklanıp sayfayı kaydediyoruz. kaydeder iken bütün web sayfasını kaydet seçeneği ile kayıt yapılmalı. kayıt edilen yere sayfanın ismini taşıyan klasörün içinde temanın ismi.css şeklinde bir dosyamız oluşuyor.
2- bu css dosyasını not defteri ile açıyoruz ve içinde çıkan kodları stylish [modified]'e "kopyala-yapıştır" ediyoruz. stylish'de ne ki? mi dedik? şöyle ki; css üzerinde yapılan değişikleri site üzerinde görmek için bir chrome eklentisi. firefox için de var ama onunla uğraşmadım hiç ayarları benzerdir herhalde.
burdan chrome'a ekleyebilirsiniz:
chrome.google.com/...
3- stylish modified ayarları: eklendikten sonra yeni pencere açılıyor idi, açılmıyorsa da chrome uzantılar kısmına ekleniyor. oradan seçeneklerine tıklandığı zaman açılıyor. gelen pencerede en alt kısımda "write new style" tıklanıyor. code kısmına 2. basamakta kopyalanan yapıştırılıyor. applies to kısmından da css kodlarının nereye uygulanacağı seçiliyor. tavsiye edilen ayar. "add new rule" seçilip url's on the domain seçilerek:
www.kutupsozluk.com... yazılması. son olarak sol üstteki disable, enable olarak değiştiriliyor ve en altta save this style tıklanıyor.
4- tüm bunlar yapılınca stylish code kısmı üzerindeki css bilgileri değiştirildiği zaman aynı anda tema üzerinde de çalışmaya başlanmış oluyor. tek tek hangi css kodu ne işe yarar diye anlatmaya giremem tabi... hem deneme yanılma ile bulmak mümkün hem de "ögeyi denetle" seçeneği ile istenilen bölgenin css koduna ulaşmak mümkün.
5- rengini, şeklini değiştirilmek istenen yere gelip sağ tıklayınca gelen menüdeki en alt seçenek "ögeyi denetle" tıklandığı zaman açılan pencere ilgili css kodunu gösteriyor. tema ismi.css ile başlayan kısımdaki bu kodun bir kısmını kopyalayıp stylish üzerindeki
ını aratıp bulup değişiklik yapıyoruz ve böyle adım adım ilerliyoruz.
6- sabırlı olmak lazım tabi, birden hepsi değişmiyor. daha önemlisi değişiklik yaptıkça uyumsuzluk ve sorunlar çıkıyor. resim eklemek için css kodu üzerindeki resimler ile ilgili kodların adres kısımmları boştur genelde. ha hiç kod yoksa hafiften css desteği almak için ;
www.w3schools.com/...
bu siteden yararlanabilirsiniz. arkaplan resmi eklemek için kodlar nedir ne değildir ya da ek bir kod gerekir ise buradan temin edilebilir. mevcut css üzerinde de vardır bunlar tabi ama ancak inceleyerek bulursunuz.
7- diyelim özel bir şey eklenecek css'de
ı yok. yine öğeyi denetle kısmından html kodlarına gidiyoruz. açılan sayfada aynı yerde bunlar da gösteriliyor. html kodu içersinde "div id" yazan kısımdaki kimlik bilgisini buluyoruz ve css kodu içersinde başına # koyup kodları da {} (süslü parantez) içine yazıyoruz. işlem tamamdır. ha tamam olmadı ise bazen # işareti yerine "." ya da alt derecesi tarzında #'den sonra "." kısmını da eklemek gerekiyor, artık deneme yanılma ile bulursunuz. ben çok denedim yanıldım hehe.
8- diyelim yapılan değişiklikler uygulanmıyor. bu durumda değiştirilen css
ının ;'den öncesine
!important; ekliyoruz. yine de sorun çıkıyor ise bu durumda büyük olasılıkla sözlüğün html kodlarında tanımlanan stil kodlarına öncelik tanıyordur. daha doğrusu o kodlarda da important yazıyor ise onlar geçerli oluyor. bu şekilde değiştirilemeyen bölgeleri rapor ettiydim.
9- "jquery-ui-1.9.1.custom.css" adlı tema dosyası sorunu. butonlar bu dosyadaki kodlar üzerinden değiştiriliyor. ama herhalde sözlüğe tema yüklenir iken tek dosya yüklenmesi gerekiyor o yüzden bu dosyanın içeriğini mevcut css kodlarının sonuna yapıştırmak gerekiyor. bu durum sadece nostalji teması ile çalışmaya başlanınca geçerli. diğer temaların içersinde mevcut temanın bu dosyasını değiştiren kodlar bulunuyordur herhalde. bunu en başta tek css haline getirerek çözmek mümkün gibi geliyor bana sonuçta mevcut kodlar da böyle çalışıyor ama sanırım sözlüğün dosyalarına da erişim kolaylıkla sağlanmadığı için bu durum bu şekilde kalmış durumda. bazen araya nostalji temasının renklerinin karışmasının nedeninin de bu olduğunu tahmin ediyorum. üst üste biniyor yani...
10- söylemeyi unuttum. stylish modified'de o kadar sorunsuz bir eklenti değil. açık penceresi kapandığı zaman yapılan değişiklikler uygulanmaya devam ediyor ama kodlara tekrar erişilmiyor. en azından bende öyle oldu. o yüzden pencereyi kapatmadan kodları tekrar not defterine kopya edip kaydetmek gerekiyor ve stylish'in kod ekranını boş bırakıp disable etmek gerekiyor. yoksa kodların silinmesi için kaldırıp kurmak gerekiyor.
aklıma gelenler şimdilik bu kadar, duruma göre ekleme çıkarma yaparım artık...
