<a class="navbar-brand" href="#">Navbar</a> kodunu siliyoruz. Bunu yapmamın sebebi navbar içerisinde logoya gerek olmamasıydı. Şimdi üst menüye bir arkaplan rengi vermeliyiz. #5a6079 hex kodunda bir renk seçtim. Bu değişikliği aşağıdaki CSS kodu ile sağlayacağız. Ancak bunu yapmadan önce <nav class="navbar navbar-expand-lg navbar-light bg-light"> kodundaki üstü turuncu renkle çizilmiş olan bg-light seçicisini silmeliyiz. Bu seçici, navbara arkaplan rengi veren seçicidir. Bu seçici yerine biz kendi istediğimiz rengi belirten seçiciyi ekleyeceğiz. Şu şekilde bir CSS kodu yazıyoruz. .arkaplan-rengi{
background:#5a6079!important;
}
<b:skin><![CDATA[ ]]></b:skin> etiketleri arasına yazıyoruz. Daha sonrasında ise bg-light yerine arkaplan-rengi seçicisini ekliyoruz ve temayı kaydediyoruz. Navbarın arkaplan renginin değiştiğini görüyoruz. Şimdi link isimlerini ve bağlantıları(href) değiştirebiliriz. Değiştirme işlemini kendi istediğinize göre yapın, href kısmı ise şimdilik boş kalabilir.Navbar Ortalama
Farkettiyseniz eğer navbar linkleri ekranın en köşesinden itibaren başlıyor, sağ tarafında köşesinde ise arama kutusu var. Bir blog için bu genişlik fazla bu sebeple navbarı ortalamamız gerekiyor. O yüzden resimde olduğu gibi bir değişiklik yapıyorum.
Öncelikle navbar kodunu, <div class="container"> </div> etiketi içerisine aldık. Bu sayede navbar ortalanmış oldu.Temaya Arkaplan Ekleme
Navbarı düzenlemeye devam etmeden önce temaya bir arkaplan belirlemekte yarar var. Küçük bir araştırma sonucu şöyle bir site buldum. (transparent textures) Bu site içerisinde bulunan desenlerden bir tanesini seçtim ve indirdim. Daha sonrasında resmi upload edip, resim url adresini aşağıdaki CSS kodunda kullandım.
body{
background:url("resim url adresi");
}
Navbar Yazı Tipi
Menü linklerinin rengi beyaz(#ffffff) olacak. Yazı tipi boyutu ise 14px. Font ise "PT Sans" olacak. Ancak "PT Sans" fontunu doğrudan font-family olarak veremeyiz çünkü font Blogger'da yok. Bu yüzden fontu tema içerisine eklemeliyiz. Google Fonts sitesine giriyoruz. Beğenilen bir fontu "Select this font" butonu ile seçiyoruz.
Daha sonrasında embed kodu kopyalanıp, <head> etiketi içerisine eklenir. Artık "PT Sans" fontu temada kullanılabilir. Şimdi CSS kodu ile menünün font yapısını değiştirelim.nav a{
font-size: 15px;
color: #fff!important;
font-family: 'PT Sans', sans-serif;
}
Dropdown Menü Düzenleme
Dropdown yani açılır menüyü biraz daha özelleştirmek istiyorum. Bu sebeple temanın CSS bölümüne aşağıdaki kodu yazdım.
@media (min-width: 992px){
.dropdown-menu {
margin-top: 8px!important;
background: #000!important;
border-top-left-radius: 0px!important;
border-top-right-radius: 0px!important;
margin-left: -30px!important;
opacity: 0.5!important;
}}
.dropdown-menu {
background: #000!important;
opacity: 0.5!important;
}
a.dropdown-item:hover {
color:#555!important;
}Arama Kutusu Düzenleme
Arama kutusu için ilk önce kod kısmını düzenlememiz gerek. Tema kodunda CTRL+F yaparakbtn-outline-success seçicisini bulup siliyoruz. Bu işlemden sonra CSS kod kısmına aşağıdaki kodları yazıyorum. placeholder içerisinde yazan Search değerini, "Ara.." olarak değiştiriyorum. @media (min-width: 576px){
.mr-sm-2, .mx-sm-2 {
margin-right: 0px!important;
}}
.form-control{
border-radius:0!important;
border-bottom-left-radius: 3px!important;
border-top-left-radius: 3px!important;
border:none!important;
padding: 3px 3px!important;
font-size: 14px!important;
}
.btn{
border-radius:0!important;
border-bottom-right-radius: 3px!important;
border-top-right-radius: 3px!important;
padding: 2px 5px 2px 5px!important;
font-size: 14px!important;
}Bu derse ait tema kodunu görmek için tıklayınız. Bir diğer yazıda header yapımını gerçekleştireceğiz.
icon eklemeyi sizin yaptığnız gibi yapıyorum ama bende iconun resmi çıkmıyor nerde ynalış yapıyorum
YanıtlayınSilKodları görmeden net bir şey söylemem mümkün değil. Font Awesome kütüphanesinin kullanımı değişmiş olabilir. Güncel haline uygun şekilde kullanmanız gerekir.
SilFont Awesome dan alırken icon'un ücretsiz olduğundan emin ol yoksa gözükmüyor
Silmerhaba yazınız çok güzel teşekkürler
YanıtlayınSilHerşeyi adım adım yaptım ama navbar'ı daraltamadım. Muhtemelenbir yeri eksik anlatıyorsun.
YanıtlayınSilHayır, eksik anlatmıyorum. Sadece belli şeyleri gösterdim. Burada spesifik olarak bir kişiye özel tema yapılmıyor. Gerisi yapmak isteyen kişiye kalıyor, mesela Google. İyi günler.
Sil