JTY/B4/D9 - Modüllerin CSS Ayarlaması ve Suffix Değeri

Önceki bölümlerde sitemizin XHTML ve CSS kodlamasını yapmış ve joomla üzerinde çalışır bir site oluşturmuştuk. Şimdi ise bazı özel ayarlamalar ile sitemizin daha düzgün gözükmesini sağlayacağız. Burada yazacağımız kodların bir bölümü standart başlıklardan oluşmakla birlikte, modül içlerinde sonek (suffix) tanımlaması yaparak bazı özel başlıklarda kullanacağız.

Joomlada modüllerin standart çerçevesi .moduletable şeklindedir. Bu seçicinin altına yazacağım her tanımlama sitedeki standart haldeki tüm modülleri etkileyecektir. Yazdığım kodlar alttan hizalama içeriyor. Sebebi ise sağ sütunda altalta çıkacak olan modüllerin birbirine yapışık görünmemesi.

 .moduletable{
 margin-bottom: 15px;
 padding-bottom: 5px;
 clear: both;
 } 

margin-bottom komutuyla başlık ile içerik arasını 15px açıyorum. Sabit boyutta kestiğim arkaplan resmimi no-repeat komutuyla birlikte background içerisinde gösteriyorum. Başlıkların büyük çıkmasını istediğim için font boyutunu ve yazı yüksekliğini ayarladıktan sonra yazı rengi color komutu ile beyazlaştırıyorum. Ardından text-shadow komutu ile gölgelendirme yapıyorum.

.moduletable h3{
width: 356px;
 height: 42px;
 float: left;
 text-indent: 15px;
 margin-left: -5px;
 margin-bottom: 15px;
 background: url(../images/modul-baslik.png) no-repeat;
 font: normal 20px/40px Arial, Helvetica, sans-serif;
 color: #fff;
 text-shadow: 1px 1px 1px #000;
 } 

Gördüğünüz gibi sag modül pozisyonunda 3 tane modül yayınladım. Yukarıda yaptığım .moduletable tanımlaması ile aralarını açmıştım. İsterseniz bu tanımlamadaki margin ve padding değerlerini silin ve siteye tekrar bakın. Böylelikle yazdığımız kodların ne işe yaradığını daha iyi görebilirsiniz.

Şimdi ise anamenümüzü düzenleyelim. Menümüzü düzenlemek için suffix (Son Ek) komutu yazarak dersimize devam ediyoruz. Suffix yazmak için yönetici paneline giriş yapıyoruz. Modül yöneticisinden ilgili modülü bulup, detaylarına gitmek için modüle tıklıyoruz. Modül detay sayfasının sağ kısmındaki Gelişmiş Özellikler sekmesine tıklıyoruz. Buradaki Modül Sınıf Son Eki bölümüne -anamenu yazıyoruz ve modülü kaydediyoruz.

Bu işlemi yaptıktan sonra sadece Ana Menüye özel css tanımlaması yapabileceğiz. Joomlanın standart menü seçicisi ul.menu iken, bizim yaptığımız Son Ek yani Suffix değeri sayesinden tüm tanımlamaların sonuna -anamenu yazıp, ul.menu seçicisinin başına .moduletable-anamenu yazacağız. Böylelikle diğer menüler etkilenmeden sadece bu menüyü özelleştireceğiz. (NOT: Burada modül son sınıf eki yerine menü son sınıf eki bölümünü de kullanabilirdik. Fakat modül son ek kısmından bahsettiğimiz için özellikle bu şekilde ayarladık)  

Menüleri yanyana göstermek ve diğer ayarlar için aşağıdaki tanımlamaları yapıyoruz. İlk bölümde modül pozisyonu içerisinde çıkacak herşeyi sola hizaladık

.moduletable-anamenu ul.menu, 
 .moduletable-anamenu ul.menu ul {
 text-align:left;
 float: left;
 } 

Burada dikkat etmemiz gereken diğer kod list-style:none kodudur. Normalde li şeklinde sıralanan öğelerin başlarında küçük bir icon yada numara olur. Biz burada birşey çıkmasını istemediğimiz için bu kodu yazıyoruz.

Hemen ardından bir backgrounda tanımlaması yaptık. Buradaki backgroundun sonundaki no-repeat yazısı bu arkaplanın devam etmeyeceğini gösteriyor. Biz buradaki resmi menülerin arasında göstereceğiz.

Padding değerinin yanında 2 sayı yazıyor. Daha önceden 4 tane sayı yazan değerin ne ifade ettiğini göstermiştik. Buradaki 2 sayı ise üstten-alttan ve soldan-sağdan hizala şeklinde kullanılmakta. Yani ilk değer üst-alt için hizalıyor, ikinci değer sol-sağ için hizalıyor. Burada menü öğelerinin arasında soldan 19px, sağdan 19px olacak şekilde boşluk bırakıyoruz.

Anamenünün arkaplanının üst bölümü geçişli olarak ayarlandığı için margin-top komutu ile 1px aşağı doğru hizalıyoruz. Ardından menü öğelerinin boyutunu ve yazı yüksekliğini ayarlıyoruz. 15px yazı puntosunu, 40px ise yazının yüksekliğini ifade ediyor. Baştaki normal ise yazının kalın olmadığını gösteriyor. İsterseniz normal yerine bold yazabilirsiniz.

 .moduletable-anamenu ul.menu li{
text-align:left;
 float: left;
 list-style: none;
 background: url(../images/anamenu-ayrac.png) no-repeat right top;
 padding: 0 19px;
 margin-top: 1px;
 font: normal 15px/40px Arial, Helvetica, sans-serif;
 } 

Hemen alttaki bölümde a'nın yanına :hover kodunu ekleyerek, linkin üzerine gelindiğinde ne olacağını tanımlıyoruz. Burada text-decoration:none diyerek altında çizgi çıkmasını önlememiz şuan için yeterli. Buraya backgroud vererek arkaplan renginin, color vererek yazı renginin değişmesini sağlayabiliriz.

 .moduletable-anamenu ul.menu li a{
 color: #fff;
 text-decoration: none; 
 }
 
 .moduletable-anamenu ul.menu li a:hover{
 text-decoration: none; 
 } 

Gördüğünüz gibi ana menümüzde tam istediğimiz şekilde göründü.

Bu bölümde yazdığımız tüm kodları toplu şekilde yazıyorum. 

.moduletable {
 margin-bottom: 15px;
 padding-bottom: 5px;
 width: 355px;
 clear: both;
 } 
 
 .moduletable h3 {
 width: 356px;
 height: 42px;
 float: left;
 text-indent: 15px;
 margin-left: -5px;
 margin-bottom: 15px;
 background: url(../images/modul-baslik.png) no-repeat;
 font: normal 20px/40px Arial, Helvetica, sans-serif;
 color: #fff;
 text-shadow: 1px 1px 1px #000;
 }
 
 .moduletable-anamenu ul.menu, 
 .moduletable-anamenu ul.menu ul {
 text-align:left;
 float: left;
}
 
 .moduletable-anamenu ul.menu li{
 text-align:left;
 float: left;
 list-style: none;
 background: url(../images/anamenu-ayrac.png) no-repeat right top;
 padding: 0 19px;
 margin-top: 1px;
 font: normal 15px/40px Arial, Helvetica, sans-serif;
 }
 
 .moduletable-anamenu ul.menu li a{
 color: #fff;
 text-decoration: none; 
 }
 .moduletable-anamenu ul.menu li a:hover{
 text-decoration: none; 
 } 
 
 
 .moduletable-ustmenu ul.menu, 
 .moduletable-ustmenu ul.menu ul {
 text-align:left;
 float: left;
 }
 
 .moduletable-ustmenu ul.menu li{
 text-align:left;
 float: left;
 list-style: none;
 }
 
 .moduletable-ustmenu ul.menu li {
 background: url(../images/ustmenu-ayrac.png) no-repeat right top;
 padding-right: 15px;
 padding-left: 5px;
 font: normal 12px/28px Arial, Helvetica, sans-serif;
 color: #5e5e5e;
 }
 
 .moduletable-ustmenu ul.menu li a{
 color: #5e5e5e;
 text-decoration: none; 
 }
 
 .moduletable-ustmenu ul.menu li a:hover{
 text-decoration: none; 
 }

Bir sonraki derste Üst Menü için bir css ayarlaması yapacağız. Yine burada yaptığımız işlemi aynısını yapacağız. Fakat yazdığımız farklı Son Ek (suffix) sayesinde menüler birbirinden farklı gözükecek. Diğer derse geçmek için tıklayın. >>