[xuma]

Bölüm 3 ikinci bölümle tekrar merhaba bu bölümde geçen bölümde bahsettiğim stilize işlemlerine devam edeceğiz.

3.2.1 Ana Menü Bu bölümdeki stil işlemlerine ana menüden başlayalım.Ana menümüzü firefox-firebug ikilisi ile incelediğimizde görüleceği gibi ana menuye joomla klasik menu css class’ı atanmış.Ancak biz üst menü için menu css class’ını kullandık.Bu karmaşayı önlemek için joomla administrator panelimize giriş yaparak modül yöneticisi menusünü izleyerek anamenu modülüne tıklayalım.Sağda bulunan gelişmiş özellikler kısmında modül sınıf son eki kısmına –yan yazalım böylece ana menu css class’ı menu-yan olacaktır.



Sitemizde kullandığımız yumuşak hatlı yapıları menude de kullanmak istiyorum ama aynı yapıyı kullanıp çok fazla iç içe kod kalabalığı yapmamak için bu sefer menu arkaplanları için bir resim kullanacağım.Yine işi daha karmaşık hale getirmemek için resim boyutundan kaçmadan bütün bir resim kullanacağım.

menu_arka.png


Şimdi menu stilimizi oluşturalım.Yine temamızın css klasöründeki genel.css dosyasını açalım ve aşağıdaki kod blogunu ekleyelim.

.menu-yan{
margin-left:5px;
}
.menu-yan a ,.menu-yan a:visited{
display:block;
width:180px;
height:25px;
background:url(../resim/menu_arka.png) no-repeat;
margin:2px 0 0 0;
padding:5px 0 0 5px;
font-family:verdana;
text-transform:uppercase;
font-size:11px;
color:#5f6062;
}
.menu-yan a:hover,.menu-yan a:active {
color:#000;
}



Böylece menümüz yaklaşık aşağıdaki gibi görünecektir.



3.2.2 Üst menü. Daha önce sorun çıkaracağı için üstmenümüzü aktif etmemiştik.Şimdi üst menümüzü ust pozisyonunda aktif edelim ve sorunumuzu inceleyelim. .



Görüldüğü gibi menümüz dikey ve stilsiz olduğu için oldukça çirkin görünüyor.O halde ilk olarak firefox-firebug ikilisi ile katmanımızı inceleyelim.Katmanımız mainlevel–nav stil id’sini almış.Aslında sonek var ancak kaldırmaya gerek yok.Şimdi css klasörümüz içinden genel.css dosyamızı açalım ve şu kod blogunu ekleyelim.

#mainlevel-nav {
position:relative;
}
#mainlevel-nav li{
float:left;
height:30px;
padding:0 5px 0 5px;
margin:0 0 0 5px;
border-right:1px solid #a5a5a5;
}
#mainlevel-nav a ,#mainlevel-nav a:visited{
height:30px;
font-family:verdana;
text-transform:uppercase;
font-size:11px;
color:#000;
}
#mainlevel-nav a:hover,#mainlevel-nav a:active {
background:#fcfcfc;
height:30px;
display:block;
color:#5f6062;
}
Böylelikle üst menümüz de hazır hale geldi.


3.2.3 Logo Logo konumlamadan önce baslik katmanı üzerinde biraz değişiklik yapalım.Değişikliğimizin amacı enine uzun olan baslik katmanımızı ikiye bölerek logo ve ekstra bir modül pozisyonu yaratmak.

<h1>Hakan ERSU Dead Dreams</h1>
kısmını silerek yerine şu iki katmanı ekliyorum.
<div id="baslik-sol"></div>
<div id="baslik-sag"></div>
Ve sol katmanıma logo için hazırladığım resmi koyuyorum.

<div id="baslik-sol">
<img src="<?phpecho$this->baseurl?>/templates/
<?phpecho$this->template?>/resim/logo.jpg"/>
</div>
<div id="baslik-sag"></div>



Böylece baslik katmanım 2 parça haline geldi dilersek baslik-sag katmanına da bir modül pozisyonu tanımlayabiliriz.

<div id="baslik-sol">
<img src="<?phpecho$this->baseurl?>/templates/
<?phpecho$this->template?>/resim/logo.jpg"/>
</div>
<div id="baslik-sag">
<jdoc:includetype="modules"name="user1"/>
</div>



Logo ve menülerimizden sonra gelecek bölümde modül ve iç sayfa stilize işlemlerine değineceğim.Sitemizin en son hali.



Not:Logo için kullanılan ikon smashingmagazine freebies kategorisi retro toys adlı ücretsiz ikon setinden alınmıştır.

[deniz1429]

Hocam çok güzel bir anlatım gene
Eline emeğine sağlık...
Bu dersin tamamlanmasını sabırsızlıkla bekliyoruz...

[Tamer Okuşluk]

Hocam elinize sağlık vereceğiniz bilgileri sabırla bekliyoruz. Teşekkür ederiz

[mx44]

resimler görunmuyor

[siyahbeyazz]

Resimler tiklanmiyor.. Acilmiyor..