Joomla içerik yönetim sistemi son zamanların en gözde açık kaynak kodlu sistemi ancak birçok kullanıcı içerik değişikliği haricinde değişiklikler de yapmak istiyor. Sitenizin renklerinden veya tasarımından hoşlanmıyorsanız bu dersi incelemenizi tavsiye ederim çünkü bu derste CSS kodlarında yapılabilecek değişikliklerinden bahsedeceğiz.
Öncelikle CSS kodlarına bir göz atalım. (Örnek olarak 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 aramaformu 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.
Öncelikle CSS kodlarına bir göz atalım. (Örnek olarak 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 aramaformu 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.
