Joomla'da her ne kadar görsellikle oynayabiliyor olsak da sonuç itibariyle çoğu Joomla kullanıcısının müdahale etmekten çekindiği CSS kodları var. Aslında bu CSS kodları sayesinde joomla sitemizi çok daha güzel hale getirebiliriz. Nasıl mı? Anlatacaklarımı iyi takip edin. Mutlaka işinize yarayacaktır.Öncelikle CSS kodlarına bir göz atalım. (Örnek olarak Joomla 1.0.12 versiyonu kullanıldı)
"templates" klasörü içerisinde üzerinde değişiklik yapacağımız temayı buluyor ve klasör içinde "css" klasörü içerisinde "template_css.css" dosyasını açıyoruz. Bu pencerede birçok farklı kod görüntülenir. Biz hepsinden bahsetmeyeceğiz, birkaçını örnek maksadıyla inceleyeceğiz.
#buttons_outer { ile başlayan bölüm sayfanın üst bölgesindeki menü için hazırlanmış kodları içerir.width: 635px;
margin-bottom: 2px;
margin-right: 2px;
float: left;
kısmında width tablo genişliğini gösterir. 635 değeri ile değişiklik yapabilirsiniz. margin değerleri de dipten (margin-bottom) ve sağdan (margin-right) bırakılacak boşluk değerleridir.
#search_outer {
float: left;
width: 165px;
}
kısmı arama formunuzun özelliklerini içerir. width değeri genişlik değeridir.
#search_inner .inputbox {
border: 0px;
padding: 3px 3px 3px 5px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
color: #0066ff;
kodu ile arama formu içerisine yazılacak yazının özelliklerini belirtirsiniz. color değeri renk kodu font size ve font şekli üzerinde de değişiklik yapılabilir.
#header {
float: left;
padding: 0px;
margin-right: 2px;
width: 550px;
height: 150px;
background: url(../images/header_short.jpg) no-repeat;
bölümü logonuzun bulunduğu tabloyu içerir. genişlik (width) ve yükseklik (height) değerleri değiştirilebilir. background kodu logonuzun yerini belirttiğiniz koddur. Bu adresi değiştirebilirsiniz. no-repeat kodu logonun, sayfalar arası geçişte tekraren yüklenmesini engeller.
#footer {
text-align: center;
padding: 3px;
kısmı sitenizin en alt kısmında bulunan Copyright yazılarının olduğu bölümü içerir. Burada bu kısma yazacağınız yazının merkez (center) , sağa dayalı (right), sola dayalı (left) olup olmamasına karar verirsiniz.
a:link, a:visited {
color: #0066ff; text-decoration: none;
font-weight: bold;
}
kısmı sitedeki linklendirdiğiniz yazıların alacağı rengi ve yazı tipini belirtir. color değeri renk değişimini ve font-weight kısmı da kalın mı, italic mi yazılacak bunun karar verildiği koddur.
a:hover {
color: #000000; text-decoration: none;
font-weight: bold;
kısmı fare imlecini üzerine getirdiğinizi linklendirdiğiniz yazıların alacağı durumu gösterir. Yukarıda anlatıldığı gibi renk ve font özellikleri içerir.
