Pro-v8 Stil Navigasyon Yapımı - [Modifikasyon]

[xpserkan]

MyBB - Pro-v8 Paket Stili NavBar Yapımı + w3 Uyumlu - [Modifikasyon]

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:

/*--------[Pro-v8 NavBar Css - 2013 X.S]--------*/
#navigasyon {
    font-family: tahoma;
    background: #E9EFF5 url(images/navbar/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(images/navbar/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(images/navbar/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(images/navbar/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.



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:

<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:

<li><a href="{$navbit['url']}" title="{$mybb->settings['bbname']}"><img alt="{$mybb->settings['bbname']}" src="images/navbar/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:

<li><a href="{$navbit['url']}" title="{$mybb->settings['bbname']}"><img alt="{$mybb->settings['bbname']}" src="images/navbar/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.)

Son olarak ekteki dosyayı indirip, .rar'dan çıkarın ve ''navbar'' klasörünü, ftp'den forumun kuruluğu olduğu dizindeki ./images klasörü içine atın tamamdır.
Şu şekilde olması gerekir ./images/navbar/

Demo Link:

Kod:

http://tr.mybbdepo.com/index.php

Ekran Görüntüsü:


Rar Şifresi: mybb.com.tr