Css İle Temayı Biraz Editleyelim Bakalım Neler Çıkacak Ortaya..
İlk Olarak Başlayalım Sayfanın Boyutundan;
/* The main body of the entire forum. */ bölümünü buluyoruz.altında
padding: 12px 30px 4px 30px;kodları var onlarla oynayalım biraz.
Orjinal Kodlar: padding: 12px 30px 4px 30px;
Kırmızı İle İşaretli Olanların Anlalmarını Yazalım,
Üst Boşluk:
Sağ Boşluk:
Alt Boşluk:
Sol Boşluk:
|
padding: 12px 30px 4px 30px;
padding: 12px 30px 4px 30px;
padding: 12px 30px 4px 30px;
padding: 12px 30px 4px 30px;
|  |
Dış Boşlukları Ayarlamayı Öğrendik.(Dışardan İçeri Doğru Gireceğiz).padding'lerin hepsini 0 px yaptığımız zaman forum sayfası ekranı tamamen kaplıyor.Bence pek hoş bir görüntü olmuyor( zevk meselesi tabiki ).
bunun için birazcık daraltalımki hoş bir görüntü olsun.
Ben Genelde
padding: 10px 70px 3px 70px; Şeklinde Kullanırım ve Sizede Tavsiye Ederim.
Sırada Renk Tonları Var.Tabi Bunun İçin catbg'leride renklendirmek gerekecek.Mademki biz css ile yapmak istiyorum onları iptal edelim.
background: url(images/catbg.jpg) #88A6C0 repeat-x;Bölümünü buluyoruz ve
background-color: #88A6C0;Kodlarıyla Değiştiriyoruz..
Aynı Şekilde catbg2leride siliyoruz.
orjinal kodlar:
background: url(images/catbg2.jpg) #A1BFD9 repeat-x;düzenlediğimiz kodlar:
background-color: #A1BFD9;Not: background-color: yerine
background: yapsakta problem olmaz.ben resim kullanmayacağımız için böyle yaptım.
Renk Tonumuzu Belirleyelim,Herkesin hoşuna giden bir renk tonu vardır.Ben Anlatımımda #ff0033 renk tonunu kullanacağım.(Kırmızıya Çok Yakın).
catbg ve catbg2nin olduğu bölümdeki renkleri hemen
#ff0033; yapıyoruz
Bu Şekilde Oluyor.
Linklerin Renkleri kötü durdu galiba onlarıda değiştirelim siyah yapalım.
a:link
a:visited
a:hover
| Tıklanmamış Linklerin Özellikleri Ayarlamak İçin Kullanılır
Daha Önce Tıklanmış Linklerin Özelliklerini Ayarlamak İçin Kullanılır
Mouse İle Linkin Üzerine Gelince Alacağı Özelliği Ayarlamak İçin Kullanılır
|
Bu Bölümleri Buluyoruz ve
color: #xxxxxx; Olan Bölümleri Değiştiriyoruz
Smf default temanın css dosyasında
a:hover renkleri ayarlanmamış istersek biz ekleyebiliriz.Eklemezsek eğer a:link kodlarını kullanır.
Sırada Linktree'nin Özelliklerine;
/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
color: #000000;
text-decoration: none;
}
a.nav:hover
{
color: #cc3333;
text-decoration: underline;
}Bu Kodlar Linktree'e ait.Gördüğümüz gibi renk tonu #000000 mouse ile üzerine gelince rengi #cc3333 oluyor ve altı çizgili bir hal alıyor(
text-decoration: underline; ile).
Sanki Fontu biraz küçük kalmış,Hemen Büyütelim.
Yukarıda Gördüğümüz Kodları Alttakilerle Değiştirelim bakalım ne olacak;
/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
font-size: small;
font-family: verdana, sans-serif;
color: #000000;
text-decoration: none;
}
a.nav:hover
{
color: #ff0033;
text-decoration: underline;
}Mouse'la Üstüne Gelince Oluşan Rengi ana rengimiz #ff0033 yaptım.Görelim Hep Beraber;
Eskisinden Daha Güzel Oldu Diyebiliriz.
titlebg bölümünü unuttuk hemen orasınada el atalım biraz.Yine sadece css yaptığımız aklımıza geliyor ve titlebg.jpg dosyasını kullanmak istemiyoruz,hemen kaldıralım.
Buluyoruz
background: url(images/titlebg.jpg) #E9F0F6 repeat-x;Değiştiriyoruz
background-color: #E9F0F6 Nasıl Oldu;
Kötü Oldu Değilmi, Düzenleyelim Hemen.
background-color: #E9F0F6; Kodlarını
background-color: #F1F1F1; yapalım bakalım nasıl olcak,
Yine Eskisinden Daha Hoş Durdu.
Ama Yinede Bir Sorun Var Sanki? Fontlar Büyük mü Geliyodur nedir.
değiştirelim bakalım nasıl olcak.
İşte bu.Zevke Göre Değişir.Bana Göre Eskisinden daha hoş duruyor.
Eğer böyle yapmak İsterseniz;
Bu Kodları Bulup
.titlebg, .titlebg a:link, .titlebg a:visited
{
font-weight: bold;
color: black;
font-style: normal;
}Bu Kodlarla Değiştirin
.titlebg, .titlebg a:link, .titlebg a:visited
{
font-weight: bold;
color: #9D9D9D;
font-style: normal;
font-family: Tahoma;
font-size: 11px;
}
Şimdi Diyeceksiniz Tias madem titlebg bölümü böle ufak ve hoş oldu (?) catbgyi neden unuttun.hemen onuda yapalım isteyenler olur belki.
Yine Sade ve hoş oldu.
Fakat Orda bişey Var Okla İşaretli Olan collapse resmi tüm görüntüyü alt üst ediyor.Onu Düzenlemek Gerekiyor.Konu Dışıda Olsa Burda Onuda Halledelim.
< Bu Resmi hem collapse.gif hemde expand.gif olarak images klasörüne atıyoruz.bende ataım bakalım nasıl olcak.
Daha Güzel Oldu Galiba
( Bu Arada Ufak Tefek bişey collapse.gif resmi fakat benim yaptığım bir resim herkes kullanabilir )
Devam Edelim.
Sizce Büyük Değilmi Bu Fontlar.Küçültmek İsteyenler atlamaDan Okusun
.middletext
{
font-size: 90%;
}Bölümünü Bulup Alttaki Kodlar İle Değitiriyoruz.
.middletext
{
font-family: Tahoma;
font-size: 11px;
}Bakalı Nasıl Oldu !
< İşte böyle.
Son Görüntümüzüde Koyayım Gideğim:
http://i35.tinypic.com/2vsf9ki.jpgŞimdilik bu kadar yeter sanırım.Smf ile ilgili ilk makalem.ilk makaleye bu kadar kelime çok bile :p
Neyse Arkadaşlar bir daha sefer ana sayfa dışındada çalışmalar yapacağız ve artık .php dosyalarınada girmek durumunda kalacağız.Görüşmek Üzere,Selametle.
