Pro v8 Stil Navigasyon Konu Bilgileri

[Root]

Admin KP > Şablon&Stil > Temalar > Temanız > Global.css > Gelişmiş Mod:
En alt'a ekleyin

Kod: Tümünü Seç Tümünü Kopyala

/*--------[Pro-v8 NavBar Css - 2013 X.S]--------*/
#navigasyon {
    font-family: tahoma;
    background: #E9EFF5 url(http://st.10tl.net/tema/diesel/nav_bg.png) repeat-x 0 0;
    display: block;
    height: 35px;
    line-height: 35px;
    margin: auto;
    border: 1px solid #D1D1D1;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 11px;
}

#navigasyon ol li {
    float: left;
    display: inline-block;
    margin: 0 3px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
}

#navigasyon ol li a {
    color: #757575;
    text-shadow: 1px -1px 1px #eee;
    padding-left: 12px;
    background: url(http://st.10tl.net/tema/diesel/nav_hover_bg.png) no-repeat 0 0;
    display: block;
    outline: none;
    text-decoration: none;
    margin-left: -15px;
}

#navigasyon ol li:first-child {
    width: 30px;
    margin-left: 15px;
}

#navigasyon ol li a img {
    display: none;
}

#navigasyon_list li:first-child:hover img {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

#navigasyon_list li:first-child a {
    background: url(http://st.10tl.net/tema/diesel/nav_hover_bg.png) right top !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    position: relative;
    width: 35px;
    height: 35px;
}

#navigasyon_list li:first-child a:hover {
    background-position: 100% -43px !important;
}

#navigasyon_list li:first-child a img {
    display: block;
    position: relative;
    max-width: 22px;
    right: 3px;
    top: 7px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
}

/* div yerine span eklendi */
#navigasyon_list li:first-child a i {
    display: none;
}

#navigasyon_list li:last-child span {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: none;
}

#navigasyon_list li:first-child span:hover {
    background-position: 100% -43px !important;
}

#navigasyon_list li:last-child a {
    font-family: tahoma;
    font-weight: bold;
    color: #555;
    font-size: 11px;
    background: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

#navigasyon li:hover a {
    background-position: 0 -43px;
    color: #444;
}

#navigasyon li:active a {
    color: #666;
    text-shadow: none;
    background-position: 0 -86px;
}

#navigasyon ol li a span {
    background: url(http://st.10tl.net/tema/diesel/nav_hover_bg.png) right top;
    display: block;
    padding-left: 4px;
    padding-right: 12px;
}

#navigasyon li:hover span {
    background-position: 100% -43px;
}

#navigasyon li:active span {
    background-position: 100% -86px;
}

#navigasyon_list {
margin:0px; padding:0px;
}
/*-----[Pro-v8 NavBar Font Hover Css - 2013 X.S]-------*/
.nav_font {
    font-weight: bold;
        font-style: normal;
    font-family: Tahoma, Geneva, Sans-Serif;
}

.nav_font_aktif {
    font-size: 12px;
        color: #3C4A9A;
}

.nav_font_aktif:hover {
        color: #333;
}

Hatırlatma: Eğer global.css kalıbında, başka bir ''navigasyon'' isminde kodlar varsa, vermiş olduğum kodları yapıştırmadan önce onları bulup silin, aksi halde çakışma olabilir ve uygulamamız hatalı olabilir.

Daha sonra aşağıdaki resimde göstermiş olduğum şablonlarda sırasıyla adımları izleyerek uygulumayı yapmaya devam ediyoruz.



Admin KP > Şablon&Stil > Şablonlar > Temanız > Navigasyon Şablonlar > nav
İçindekileri Silin Alttakileri Yapıştırın;

Kod: Tümünü Seç Tümünü Kopyala

<div id="navigasyon">
<ol id="navigasyon_list">
{$nav}{$activebit}
</ol>
</div>

Admin KP > Şablon&Stil > Şablonlar > Temanız > Navigasyon Şablonlar > nav_bit
İçindekileri Silin Alttakileri Yapıştırın;

Kod: Tümünü Seç Tümünü Kopyala

<li><a href="{$navbit['url']}" title="{$mybb->settings['bbname']}"><img alt="{$mybb->settings['bbname']}" src="http://st.10tl.net/tema/diesel/home_nav.png" /><span><i class="nav_font">{$navbit['name']}</i></span></a></li>

Admin KP > Şablon&Stil > Şablonlar > Temanız > Navigasyon Şablonlar > nav_bit_active
İçindekileri Silin Alttakileri Yapıştırın;

Kod: Tümünü Seç Tümünü Kopyala

<li><a href="{$navbit['url']}" title="{$mybb->settings['bbname']}"><img alt="{$mybb->settings['bbname']}" src="http://st.10tl.net/tema/diesel/home_nav.png" /><span><i class="nav_font nav_font_aktif">{$navbit['name']}</i></span></a></li>

Admin KP > Şablon&Stil > Şablonlar > Temanız > Navigasyon Şablonlar > nav_sep
İçindekileri Silin , Kaydedin.

Admin KP > Şablon&Stil > Şablonlar > Temanız > Navigasyon Şablonlar > nav_sep_active
İçindekileri Silin , Kaydedin.

Not:Alıntı