Pro-v8 Stil Navigasyon Yapımı

[DieseL]

Modifikasyon ismi: Pro-v8 Stil + W3 Uyumlu Navigasyon
Modifikasyon Yapımcısı: XpSerkan
Test Durumu: Denemiştir-sorunsuz
Uyumlu Olduğu Sürüm-(ler): MyBB ∞
Modifikasyon Açıklaması: Bu uygulama sayesinde, pro-v8 stil navbar yaparak, foruma biraz daha görselik kazandırmış olacağız.
Modifikasyon Kurulumu:

İlk olarak kullandığınız temanın global.css kalıbına girerek, en sona aşağıdaki vermiş olduğum css kodlarını yapıştırın.

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 ''navigation'' 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.

Navigasyon Şablonlar Adım 1:
nav şablonuna girip içeriğindeki tüm kodları silin ve aşağıdaki kodları komple yapıştırıp kaydedin.

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

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

Navigasyon Şablonlar Adım 2:
nav_bit şablonuna girip içeriğindeki tüm kodları silin ve aşağıdaki kodları komple yapıştırıp kaydedin.

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>

Navigasyon Şablonlar Adım 1:
nav_bit_active şablonuna girip içeriğindeki tüm kodları silin ve aşağıdaki kodları komple yapıştırıp kaydedin.

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>

Navigasyon Şablonlar Adım 4:
nav_sep şablonuna girip içeriğindeki tüm kodları silin ve kaydedin. (Şablon içeriği boş kalacak.)

Navigasyon Şablonlar Adım 5:
nav_sep_active şablonuna girip içeriğindeki tüm kodları silin ve kaydedin. (Şablon içeriği boş kalacak.)

[TheDangerous]

teşekkürler hocam

[theend]

Teşekkürler

[Ömer.G]

çok sağol denedim oldu :)

[Rikudo]

Teşekkürler.