Görünümü özelleştirmek oldukça kolaydır. CMS Turk'un CSS (Cascaded Style Sheet) tabanlı bir tasarıma sahip olmasından dolayı stil.css dosyası içerisinde yaptığınız tüm değişiklikler doğrudan tüm sayfalara uygulanır.
Her sayfada üstte görünen resmi ana klasörde bulunan ust.gif dosyasını değiştirerek kendi isteğinize göre özelleştirebilirsiniz. Orijinal ".psd" uzantılı Photoshop formatındaki dosyaya buraya tıklayarak ulaşabilirsiniz.
Body tag'ında genel sayfa özellikleri belirlenir. İlk satırda sayfa metinlerinin font büyüklüğünü, 2.satırda font şeklini belirleyebilirsiniz. margin değerleri sayfanın çevresinden uzaklığını belirtir.
body{
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
yankolon adlı tag'da sol bölümde bulunan menünün özelliklerini belirliyoruz. İlk satırda menü genişliğini, 2.satırda menünün hangi yöne yaslanacağını (standart css dosyasında sola yaslıdır) belirleyebilirsiniz. (padding değeri yankolon içerisindeki metnin çevresine göre uzaklığını belirtir)
.yankolon {
width: 175px;
float: left;
padding: 0px;
}
yankolon a:link ve yankolon a:visited sol bölümde bulunan menüdeki linklerin özelliklerini belirtir. İlk satır linklerin genişliğini, ikinci satır linklerin altında gözüken çizginin özelliklerini, 3. satır linklerin blok halde gösterilmesini, 4. satır link metninin çevreden uzaklığını, 5. satır linklerin yazım şeklini (örneğin oraya underline yazsaydık linklerin hemen altında bir çizgi gözükecekti), son satır metnin kalın fontta yazılacağını gösterir.
.yankolon a:link, .yankolon a:visited {
width: 165px;
border-bottom: 1px solid #E3E6E8;
display: block;
padding: 5px;
text-decoration: none;
font-weight: bold;
}
yankolon a:hover menü linklerinin fare ile üzerine gelindiğinde nasıl gözükeceğini belirtir. Önceki CSS tag'ından farkı 6. satırda bulunan arkaplan rengi belirleyicisidir.
.yankolon a:hover {
width: 165px;
border-bottom: 1px solid #E3E6E8;
display: block;
padding: 5px;
text-decoration: none;
background-color: #F5F5F5;
font-weight: bold;
}
icerik tag'ı sayfa içeriğinin özelliklerini belirler. İlk satırda içeriğin genişliği, ikinci satırda en düşük yüksekliği, 3. satırda metnin çevreden uzaklığını, 4. satırda menü ile beraber sola yaslı olmasını, son satırda içeriğin menüden 20 piksel uzaklıkta olmasını belirliyoruz.
.icerik {
width: 591px;
min-height: 290px;
padding: 5px;
float: left;
margin-left: 20px;
}
baslik tag'ı sayfa başlığının ayarlarını belirler. İlk satır yüksekliğini, 2. satır font büyüklüğünü, 3. satır başlığın içerikten uzaklığını, 4. satır metnin üstten uzaklığını, 5. satır metnin ortalanacağını, 6. satır metnin kalın yazılacağını, 7.satır başlık resminin url'sini, son satır resmin tekrarlanmayacağını belirtir.
.baslik {
height: 80px;
font-size: 36px;
margin-bottom: 10px;
padding-top: 20px;
text-align: center;
font-weight: bold;
background-image: url(ust.gif);
background-repeat: no-repeat;
}
sayfa tag'ında ilk satır sayfanın genişliğini, ikinci ve 3. satırda sayfanın sağdan ve soldan eşit uzaklıkta olacağını belirtir.
.sayfa {
width: 800px;
margin-right: auto;
margin-left: auto;
}
alt tag'ı site alt yazısının ve copyright yazısının özelliklerini belirler. İlk iki satır üstünde bulunan yaslanmış içerikten bağımsız olduğunu, 3. satır metnin ortalanacağını, son satır çevreden uzaklığını belirtir.
.alt {
clear: both;
float: none;
text-align: center;
padding: 3px;
}
h3 tag'ı standart bir HTML tag'ıdır. Başlık anlamında olup CMS Türk içerisinde sayfa içeriğindeki başlıkların özelliklerini belirler. İlk satır font büyüklüğünü, ikinci satır metnin kalın fontta yazılacağını, 3,4 ve 5. satırlar metin altındaki çizginin özelliklerini, 6. satır metnin üstten uzaklığını, son satır ise metin rengini belirler.
h3 {
font-size: 14px;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E3E6E8;
margin-top: 0px;
color: #666666;
}
Buradaki 4 tag sayfadaki normal linklerin renklerini ve stillerini belirler.
a:link {
color: #0099CC;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0099CC;
}
a:hover {
text-decoration: none;
color: #990000;
}
a:active {
text-decoration: none;
}
ul tag'ı standart HTML tagı'dır. Sayfada liste şeklindeki metnin özelliklerini belirler. Biz bu tag'ı liste metinlerinin başındaki noktaları ve soldaki boşluğu kaldırması için kullandık.
ul {
margin: 0;
padding: 0;
list-style: none;
}
Bundan sonrası size kalmış. Stil içerisinde tüm renkleri, sayfa genel görünümünü istediğiniz şekle sokmanız mümkün. CSS taglarının içerisine yeni kurallar ekleyebilir veya varolan CSS kurallarını kaldırabilirsiniz. CSS düzenleme ilgili aşağıdaki kaynaklara göz atabilirsiniz.
