قالب Navigation مای بی بی – سری اول

سلام

حتما شما هم از قالبی استفاده می کنید که منوی ناوبری یا همون Navagation جالبی نداره و دوست دارید با یک منوی ناوبری قشنگ تعویض کنید ، منظور از منوی ناوبری این هست :

و منوی ناوبری که ما میخوایم در این جلسه در بیاریم ، این هست :

آموزش :

• کنترل پنل مدیریت => قالب ها و پوسته ها => پوسته مورد نظر را باز کنید => global.css را در حالا ویرایش پیشرفته باز کنید و کدهای زیر رو به آخر کدها اضافه کنید :

/* Navigation_beporsam.ir START */
#breadcrumb{
background:#e0e0e0 url(https://beporsam.ir/wp-content/uploads/2016/05/breadcru.png) repeat-x 0 0;
border:1px solid #d6d6d6;
text-shadow:#fff 0px 1px 0px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-webkit-box-shadow:rgba(0,0,0,0.05) 0px 1px 2px;
-moz-box-shadow:rgba(0,0,0,0.05) 0px 1px 2px;
box-shadow:rgba(0,0,0,0.05) 0px 1px 2px;
overflow:hidden;
line-height:37px;
margin-bottom:4px;
clear:right;
direction:ltr;
}

#breadcrumb a{
color:#757575;
line-height:37px;
height:37px;
direction:ltr;
}

#breadcrumb a:hover{
color:#222;
}

#breadcrumb #nbar li{
float:right;
}
#breadcrumb #nbar li a{
padding-right:12px;
margin-right:-9px;
background:url(https://beporsam.ir/wp-content/uploads/2016/05/breadcrv.png) no-repeat 100% 0;
display:block;
outline:none;
text-decoration:none;
direction:ltr;
}

#breadcrumb #nbar li.first a{
margin-right:0;
background:none;
padding-right:0px;
}

#breadcrumb #nbar li span{
display:block;
padding-left:17px;
padding-right:4px;
background:url(https://beporsam.ir/wp-content/uploads/2016/05/breadcrv.png) no-repeat 0 0;
}

#breadcrumb #nbar li>span{
padding-right:4px;
background:none transparent;
direction:ltr;
}

#breadcrumb #nbar li.first a span{
padding-right:12px;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
-moz-border-radius:0 3px 3px 0;
border-radius:0 3px 3px 0;
}

#breadcrumb #nbar li a:hover{
background-position:100% -43px;
}

#breadcrumb #nbar li a:hover span{
background-position:0 -43px;
}

#breadcrumb #nbar li a:active{
background-position:100% -86px;
}

#breadcrumb #nbar li a:active span{
background-position:0 -86px;
}
/* Navigation_beporsam.ir END */

• سپس به قالب ها و پوسته ها برید => قالب مورد نظر => قالب های نوار آدرس دهی (Navbar) را انتخاب کنید ، از زیر منوی این بخش Nav را انتخاب و کدهای زیر را جایگزین کدهای موجود کنید :

<div id="breadcrumb">
<ul id="nbar" class="floatcontainer">
<li class="navbithome"><a href="{$mybb->settings['bburl']}" accesskey="1"><span><img src="https://beporsam.ir/wp-content/uploads/2016/05/home.png" style="padding:3px 6px 5px 4px"></span></a></li>
{$nav}{$activesep}{$activebit}
</div>

• سپس Nav_Bit را انتخاب و کدهای زیر را جایگزین کدهای موجود کنید :

<li class="navbit"><a href="{$navbit['url']}"><span style="direction:rtl;">{$navbit['name']}</span></a></li>

• سپس Nav_bit_active را باز کنید و کدهای زیر را جایگزین کدهای موجود بکنید :

<li class="navbit"><a><span style="direction:rtl;">{$navbit['name']}</span></a></li>

• کدهای Nav_sep و Nav_sep_active را حذف کنید!

موفق باشید