SMF CSS Düzenlemeleri İle Tema Yapımı

Okuma Süresi: 2 Dakika  | Yazdır

smf

Merhabalar.

Simple Machines Forum sisteminde sitenizin görünüşünü etki eden en önemli dosya, tema klasörünün içinde bulunan, style.css dosyasıdır.

Bu css dosyası ile forumunuzun görünümünde bir çok değişiklik yapabilir,kendi özgün temanızı oluşturabilirsini.

Şimdi bu dosyayı nasıl düzenleyeceğimizi göreceğiz. Css dosyamızı düzenlemek için ihtiyacımız olan ekipman yalnızca Notepad programı. Ayrıca renk kodlarını gösteren bir kartelanız da olursa daha güzel olur.

Şimdi Notepad ile style.css dosyasını açalım. Ben anlatımı default tema üzerinden yaptım. Genelde bu tüm temalarda aynıdır. O yüzden telaşlanmanıza gerek yok.

Kodlarımız şu şekildedir;

/* Normal, standard links. */

a:link

{

color: #476C8E;

text-decoration: none;

}

a:visited

{

color: #476C8E;

text-decoration: none;

}

a:hover

{

text-decoration: underline;

}

Burada a:link şeklinde belirtilen kodumuz sitemizdeki tüm aktif linklerin rengini belirtir. Bunu keyfimize göre düzenleyebiliriz.

a:visited kodu ise sitemizdeki ziyaret edilmiş olan linklerin rengini belirtir.

A:hover ise aktif linkin üzerine mouse ile gelindiğinde ortaya çıkacak olan atraksiyonu belirtir. Burada underline(altını çiz) komutu kullanılmış. Siz bunu;

None,Overline vb. şeklinde değiştirebilirsiniz.

Şimdi forumumuzun navigasyon menüsünün rengi ile oynayalım. Yine style.css dosyasını açalım. Default temada kodlarımız şu şekildedir;

/* Navigation links – for the link tree. */

.nav, .nav:link, .nav:visited

{

color: #000000;

text-decoration: none;

}

a.nav:hover

{

color: #cc3333;

text-decoration: underline;

}

Burada nav:link aktif navigasyon linkini ifade ederken, nav:visited kodu ise daha önceden ziyaret edilmiş olan navigasyon linkini ifade eder. a.nav:hover ise mouse ile navigasyon linki üzerine gelindiğinde çıkacak rengi ifade eder.

Şimdi forumun arka planı ve genişliği ile oynamayı gösterelim.

/* The main body of the entire forum. */

body

{

background-color: #E5E5E8;

margin: 0px;

padding: 12px 30px 4px 30px;

}

Background-color değerini istediğimiz bir renk yapabiliriz. Forumun genişliği için padding değerleri ile oynamamız gerekir.

Temaların style.css dosyaları incelendiğinde,buna benzer kodlar bulunacaktır. Bu kodları düzenlediğimizde kendi temanızı oluşturabilirsiniz.

a:link,a:visited,a:hover kodlarının mantığı bir çok style objesinde geçerlidir. Bunlardan faydalanarak temanızı geliştirebilirsiniz.

Kolay gelsin..