Joomla'da CSS Değişiklikleri

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.

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.
  • Etiketler;
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

merhabalar, verdiğiniz bilgilir için teşekkürler fakat yinede bir sorum olacak. Sitede top menü kısmındaki yazılar (linkler) birbirine girmiş durumda. aralarındaki mesafeyi açmak istiyorum. Bunun nasıl yapabilirim?
iyi geceler. bazı şablonlar çok hoşuma gidiyo fakat şablon sayfasının başındaki banner sitemin içeriğiyle uyumlu değil joomla şablonunda üstte bulunan banneri nasıl değiştirebilirim. teşekkürler...
banner'ınızın linkine bakarak, hangi resim dosyasını kullanarak çalıştığını görebilir ve o boyutlarda ve aynı isimde bir banner ile değiştirebilirsiniz, kodlarla oynama yapmaksızın...
teşekkürler
kullandığım templatede anket sayfasında sonuçların görüntülendiği sayfada modül ekleyebileceğim bir sütun yok nasıl oluşturabilirim?
çok teşekkürler, joomla ile ilgili çalışmalarınızın devamını bekliyoruz

Yukarı Git