قالب 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:۱px solid #d6d6d6; text-shadow:#fff 0px 1px 0px; -moz-border-radius:۳px; -webkit-border-radius:۳px; border-radius:۳px; -webkit-box-shadow:rgba(۰,۰,۰,۰.۰۵) 0px ۱px ۲px; -moz-box-shadow:rgba(۰,۰,۰,۰.۰۵) 0px ۱px ۲px; box-shadow:rgba(۰,۰,۰,۰.۰۵) 0px ۱px ۲px; overflow:hidden; line-height:۳۷px; margin-bottom:۴px; clear:right; direction:ltr; } #breadcrumb a{ color:#۷۵۷۵۷۵; line-height:۳۷px; height:۳۷px; direction:ltr; } #breadcrumb a:hover{ color:#۲۲۲; } #breadcrumb #nbar li{ float:right; } #breadcrumb #nbar li a{ padding-right:۱۲px; margin-right:-۹px; background:url(http://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:۰; background:none; padding-right:0px; } #breadcrumb #nbar li span{ display:block; padding-left:۱۷px; padding-right:۴px; background:url(http://beporsam.ir/wp-content/uploads/2016/05/breadcrv.png) no-repeat 0 0; } #breadcrumb #nbar li>span{ padding-right:۴px; background:none transparent; direction:ltr; } #breadcrumb #nbar li.first a span{ padding-right:۱۲px; -webkit-border-top-right-radius:۳px; -webkit-border-bottom-right-radius:۳px; -moz-border-radius:۰ ۳px ۳px ۰; border-radius:۰ ۳px ۳px ۰; } #breadcrumb #nbar li a:hover{ background-position:۱۰۰% -۴۳px; } #breadcrumb #nbar li a:hover span{ background-position:۰ -۴۳px; } #breadcrumb #nbar li a:active{ background-position:۱۰۰% -۸۶px; } #breadcrumb #nbar li a:active span{ background-position:۰ -۸۶px; } /* Navigation_beporsam.ir END */ |
- سپس به قالب ها و پوسته ها برید => قالب مورد نظر => قالب های نوار آدرس دهی (Navbar) را انتخاب کنید ، از زیر منوی این بخش Nav را انتخاب و کدهای زیر را جایگزین کدهای موجود کنید :
|
۱ ۲ ۳ ۴ ۵ |
<div id="breadcrumb"> <ul id="nbar" class="floatcontainer"> <li class="navbithome"><a href="{$mybb->settings['bburl']}" accesskey="۱"><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 را حذف کنید!
موفق باشید
پاسخ دهید
شما بایدوارد شوید یا ثبت نام کنید تا بتوانید پاسخ دهید.