سلام
حتما شما هم از قالبی استفاده می کنید که منوی ناوبری یا همون Navagation جالبی نداره و دوست دارید با یک منوی ناوبری قشنگ تعویض کنید ، منظور از منوی ناوبری این هست :
و منوی ناوبری که ما میخوایم در این جلسه در بیاریم ، این هست :
آموزش :
- کنترل پنل مدیریت => قالب ها و پوسته ها => پوسته مورد نظر را باز کنید => global.css را در حالا ویرایش پیشرفته باز کنید و کدهای زیر رو به آخر کدها اضافه کنید :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
/* 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.05) 0px 1px 2px; -moz-box-shadow:rgba(,,,0.05) 0px 1px 2px; box-shadow:rgba(,,,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(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:17px; padding-right:4px; background:url(http://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: 3px 3px ; border-radius: 3px 3px ; } #breadcrumb #nbar li a:hover{ background-position:100% -43px; } #breadcrumb #nbar li a:hover span{ background-position: -43px; } #breadcrumb #nbar li a:active{ background-position:100% -86px; } #breadcrumb #nbar li a:active span{ background-position: -86px; } /* Navigation_beporsam.ir END */ |
- سپس به قالب ها و پوسته ها برید => قالب مورد نظر => قالب های نوار آدرس دهی (Navbar) را انتخاب کنید ، از زیر منوی این بخش Nav را انتخاب و کدهای زیر را جایگزین کدهای موجود کنید :
|
1 2 3 4 5 |
<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 را انتخاب و کدهای زیر را جایگزین کدهای موجود کنید :
|
1 |
<li class="navbit"><a href="{$navbit['url']}"><span style="direction:rtl;">{$navbit['name']}</span></a></li> |
- سپس Nav_bit_active را باز کنید و کدهای زیر را جایگزین کدهای موجود بکنید :
|
1 |
<li class="navbit"><a><span style="direction:rtl;">{$navbit['name']}</span></a></li> |
- کدهای Nav_sep و Nav_sep_active را حذف کنید!
موفق باشید
پاسخ دهید
شما بایدوارد شوید یا ثبت نام کنید تا بتوانید پاسخ دهید.