tema yapımı

Şimdi theme.html dosyasındaki kimliği belirtilmiş yani id veya class parametreleri
bazı değerler içeren taglerimiz için bir takım stil tanımlamalarında bulunmayı
öğreneceğiz..ilk olarak body taginden başlayalım..biliyorsunuz ki theme.html dosyasında sayfamızı ortalanmış bir tablo üzerine kurmuştuk..bu sebeple arka plan rengi sayfa içeriğimizi daha iyi gösterecek bir biçimde ayarlanmalıdır..benim örneğimde arka plan için sadece renk tanımlanmış, siz isterseniz resim de tanımlayabilirsiniz

Kod:
body { background-color: #99ccff; }
bu ders için verdiğim tüm örnekler aynı tema için kendi sitemde kullandığım renk
değerleridir..yani tüm parçaları değişiklik yapmadan birleştirdiğinizde ModernFizik sitesinde kullanılan temaya ulaşacaksınız..şimdi hatırlarsanız theme.html içinde
tüm içeriği taşıyan tablomuzun class="anatablo" olarak stil tanımlamasını yapmıştık şimdi css ile düzenleme yapıyoruz

Kod:
.anatablo { width: 97%; border: 3px solid #ee9933; background-color: #fafafa; font-family: verdana; font-size: 10pt; color: #333333; }
width: genişlik , border: kenarlık, background-color: arka plan rengi, font-family: yazıtipi
font-size: yazıtipi boyutu , color: yazıtipi rengi

bu aşamaya kadar bir şeyi farketmiş olmalısınız..ilk kodumuzda sadece body yazarken ikincisinde .anatablo yazdık, yani başına bir nokta koyduk..ilk kullanımımız theme.html içinde hiç bir tanımlama yapmamıza gerek bırakmıyor ve atadığımız değerler body
taginin geçtiği her yerde geçerli oluyor..her ne kadar body'nin bir çok yerde geçmesi söz konusu olmasa da biraz sonra aynı tanımlamayı sütunlarımız için de çok kullanışlı bir biçimde yapacağız..ikinci kodda ise theme.html içinde class="anatablo" şeklinde belirttiğimiz stili tanımladık..birazdan göreceğiz ki id="..." şeklinde yaptığımız tanımlamalar içinde # işaretini kullanacağız..devam edelim..

Kod:
table td { vertical-align: top; text-align: left; }
bu kodla tüm tabloların tüm sütunlarının içeriklerinin dikey konum olarak üste, yatay konum olarak ise sola hizalanmasını sağladık..

Kod:
tr#ust_menu { width: 100%; background-color: #fafafa; text-align: center; border: 2px dotted #ee9933; }
tr#ust_menu a { font-size: 12pt; }
hızlı erişim menüsü olarak tanımladığımız tr id="ust_menu" tablo satırını üstteki
gibi şekillendiriyoruz..burada bir nokta çok önemlidir..tr#ust_menu a ile ust_menu
id'sine sahip tüm tablo satırlarında geçen tüm a yani link vermeye yarayan tagleri toplu halde şekillendirdik..işte id ve class birbirinden bu noktada kesin olarak ayrılıyorlar..gördüğünüz gibi id tanımlaması yapılmış alanlar içinde bulunan diğer
taglere de müdahale imkanı sağlıyorlar..bu yüzden class yerine id kullanmak daha mantıklı

Kod:
.sayfa_icerigi { width: 100%; text-align: justify; font-size: 8pt; padding: 3px; }
a { color: #336699; font-family: verdana; font-size: 8pt; font-weight: bold; text-decoration: none; }
a:hover { color: #ee9933; font-family: verdana; font-size: 8pt; font-weight: bold; text-decoration: underline; }
üstteki kodumuz class="sayfa_icerigi" kullandığımız yerleri şekillendirir..görüldüğü
gibi bu alanlar için genişliğin tam, metin hizalamasının iki yana yaslanmış, metin boyutunun 8 punto ve yanlardan bırakılacak boşluğun da 3 piksel olması gerektiğini belirttim..ikinci ve
üçüncü satırımız ise aksi bir tanımlama olmadığı sürece (örneğin ust_menu) tüm linklerimizin şekillenmesini belirler..a:hover ise bir linkin üstüne gelindiğinde nasıl davranması gerektiğini belirleyen alandır

şimdi tek tek blokların tanımlamalarını yapalım..soldan başlıyoruz

Kod:

Kod:

td#sol_blok { width: 15%; border-right: 1px solid #cccccc; font-size:12px; }
td#sol_blok div.baslik { padding: 3px; background-color: #99ccff; color: #ee9933; font-weight: bold; border-left: 3px solid #ee9933; border-right: 3px solid #ee9933; }
td#sol_blok div.icerik { padding: 3px; line-height: 120%; line-height: 120%; }
td#sol_blok a { color: #003366; font-size: 10pt; }
td#sol_blok a:hover { color: #ee9933; }

sol bloklar için 5 adet tanımlama yaptım..ilki bu blokların genişliklerini, kenarlıklarını ve
yazıtipi boyutunu belirtiyor..baslik ve icerik alanları ise tüm bloklarda sayfanızın farklı
ve orjinal gözükmesini sağlayabileceğiniz en önemli alanlar..belki bir bakışta anlayamadığınız
tek şey line-height olabilir..bunu satırların biraz aralıklı durması için kullanıyoruz..diğer
iki satır ise sol bloğa eklenen linklerin davranışını belirleyecektir

Kod:
td#sag_blok { vertical-align: top; width: 15%; font-size:12px; }
td#sag_blok div.baslik { padding: 3px; background-color: #99ccff; color: #ee9933; font-weight: bold; border-left: 3px solid #ee9933; border-right: 3px solid #ee9933; }
td#sag_blok div.icerik { padding: 3px; line-height: 120%; line-height: 120%; }
td#sag_blok a { color: #003366; }
td#sag_blok a:hover { color: #ee9933; }
gördüğünüz gibi ben sağ blokla sol bloğumu aynı gözükecek şekilde ayarladım..ama siz
farklı görünmesini isteyebilirsiniz, tek yapmanız gereken değerlerle oynamak

Kod:
td#orta_blok { vertical-align: top; width: 70%; border-right: 1px solid #cccccc; border-right: 1px solid #cccccc; font-size:12px; }
td#orta_blok div.baslik { padding: 3px; background-color: #99ccff; color: #ee9933; font-weight: bold; border-left: 3px solid #ee9933; border-right: 3px solid #ee9933; }
td#orta_blok div.icerik { vertical-align: top; padding: 3px; line-height: 120%; line-height: 120%; }
td#orta_blok a { color: #003366; }
td#orta_blok a:hover { color: #ee9933; }
orta blok için de hemen hemen aynı tanımlamaları yapıyoruz..

Not:
orta bloğu yandakilerden geniş yapmayı unutmayın..yoksa orantısız bir görüntü
ortaya çıkabilir

Kod:
td#orta_orta_blok { vertical-align: top; padding: 3px; }
td#orta_orta_blok div.baslik { padding: 3px; background-color: #99ccff; color: #ee9933; font-weight: bold; border-left: 2px solid #ee9933; border-right: 2px solid #ee9933; }
td#orta_orta_blok div.icerik { vertical-align: top; background-color: #fafafa; padding: 3px; line-height: 120%; line-height: 120%; }
td#orta_sol_blok { vertical-align: top; padding: 3px; }
td#orta_sol_blok div.baslik { padding: 3px; background-color: #99ccff; color: #ee9933; font-weight: bold; border-left: 2px solid #ee9933; border-right: 2px solid #ee9933; }
td#orta_sol_blok div.icerik { background-color: #fafafa; padding: 3px; line-height: 120%; line-height: 120%; }
td#orta_sag_blok { vertical-align: top; padding: 3px; }
td#orta_sag_blok div.baslik { padding: 3px; background-color: #99ccff; color: #ee9933; font-weight: bold; border-left: 2px solid #ee9933; border-right: 2px solid #ee9933; }
td#orta_sag_blok div.icerik { background-color: #fafafa; padding: 3px; line-height: 120%; line-height: 120%; }
bu kodlar ise orta kısma eklenecek üçlü blokları tanımlıyor

Kod:
div#modul_icerigi { padding: 5px; }
tüm blok tanımlamalarını bitirdiğinizde sayfalarınızda esas önemi taşıyan
içeriğin modüller olduğunu unutmayın..ben örneğimde buraya pek dokunmadım
ancak siz bir takım değişiklikler yapmak isteyebilirsiniz

Kod:
.even { background-color: #f3f4f5; padding: 5px; }
.odd { background-color: #fafafa; padding: 5px; }
son olarak da theme.html'de bizim tanımlamadığımız ancak yine de xoops'ta
öntanımlı olan bir class'ı şekillendirelim..bu iki kod özellikle forum gibi
alanlarda ardarda iki satırı birbirinden ayırt etmek için kullanılabilir..