MyBB Destek Forumu

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

Eklenti-Plugin

Modifikasyon ismi: Pro-v8 Stil + W3 Uyumlu Navigasyon

Modifikasyon Yapımcısı: XpSerkan
Araç-Test

Test Durumu: Denemiştir-sorunsuz Onay-Cevap

Uyumlu Olduğu Sürüm-(ler): MyBB ∞
Açıklama-Detay

Modifikasyon Açıklaması: Bu uygulama sayesinde, pro-v8 stil navbar yaparak, foruma biraz daha görselik kazandırmış olacağız.
Kurulum-İnstall-Paket

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 Sağ Ok

ş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 Sağ Ok

ş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 Sağ Ok

ş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 Sağ Ok

ş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 Sağ Ok

ş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 Sağ Ok

./images/navbar/

Demo Link:

Kod:

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

Ekran Görüntüsü:

Rar Şifresi: mybb.com.tr

xpserkan