آموزش تغییر نوار آدرس ناویری

[محمد تی ام]

با سلام


میخواستم بدونم چطور میتونم قسمت مسیر رو این شکلی کنم




سایتی که این رو دیدم:--->http://www.frozenbax.com

[Gh-Moradi]

سلام

بهش میگن نوار آدرس ناوبری
شما جستجو کنید اگر پیدا نکردید بگید براتون آموزش کامل و قشنگ تر از این رو قرار میدم

[محمد تی ام]

نه متاسفانه پیدا نکردم ممنون میشم آموزشش بدین

[Gh-Moradi]

سلام

این آموزش رو قرار میدم تا همه استفاده کنند

*** / خب قبل از همه چیز کدها رو درون نت پد بریزید و بعد در قالب قرار دهید

اول کدهای زیر را در گلوبال بریزید

کد php:

.secondary {
    background: #f9f9f9; /* Old browsers */
    background: -moz-linear-gradient(top,  #f9f9f9 0%, #fdfdfd 50%, #fcfcfc 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(50%,#fdfdfd), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f9f9f9 0%,#fdfdfd 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f9f9f9 0%,#fdfdfd 50%,#fcfcfc 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f9f9f9 0%,#fdfdfd 50%,#fcfcfc 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f9f9f9 0%,#fdfdfd 50%,#fcfcfc 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
    overflow: hidden;
    margin-top: 25px;
    padding: 0px;
    border:1px solid #ebebeb;
    border-radius: 2px;
    box-shadow:0 0 5px #e9e9e9;
    text-shadow: 1px 1px 0px #fafafa;
    font-size: 12px;
    font-family:DroidNaskh-Regular,Tahoma;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
}

.breadcrumb {
    list-style: none;
    overflow: hidden;
    margin: 0;
    padding: 0px;
    max-height:30px;
}

.breadcrumb li {
    float: right;
}

.breadcrumb li a {
    background: #f9f9f9;
    color: #777777;
    padding-top: 5px;
    padding-bottom:8px;
    padding-right:40px;
    padding-left:0;
    position: relative;
    display: block;
    float: right;
    
    text-decoration: none;
}

.breadcrumb li a:after {
    content: " ";
    display: block;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 25px solid #f9f9f9;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    right: 100%;
    z-index: 2;
}

.breadcrumb li a:before {
    content: " ";
    display: block;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 25px solid #ededed;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    margin-right: 1px;
    right: 100%;
    z-index: 1;
}

.breadcrumb li:first-child a {
    padding-right: 10px;
}

.breadcrumb li:last-child a {
}

.breadcrumb li a:hover {
    background: #f5f5f5;
    color: #777777;
}

.breadcrumb li a:hover:after {
    border-right-color: #f5f5f5 !important;
} 


خب حالا قالب های Navigation Templates را باز کنید و کد زیر را با کدهای قالب nav جایگزین کنید

کد php:

<div class="secondary">
<ul class="breadcrumb">

<li class="breadcrumb">
<a href="{$mybb->settings['bburl']}" accesskey="1" title="###"><span><img src="http://up.vbiran.ir/uploads/137715687423343_0home.png" alt="###" title="###" style="padding:0px 6px 5px 4px;margin-top:-7px;"></span></a>
</li>

{$nav}{$activesep}{$activebit}

</ul>
</div> 


همچنین کدهای قالب nav_bit را با کد زیر جایگزین کنید

کد php:

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


و همینطور کدهای قالب nav_bit_active را با کد زیر جایگزین کنید

کد php:

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


و در نهایت کد های موجود در قالب های nav_sep و nav_sep_active را حذف کنید

به همین راحتی دارای یک نوار آدرس ناوبری زیبا خواهید شد
چنانچه تغییرات را مشاهده نکردید کش مرورگر را خالی کنید حتما نتیجه رو خواهید دید

(با سپاس ویژه از جناب صادقی)

[firstboy000]

بک گراندش سفیده اگر بخوایم رنگشو عوض کنیم چکار کنیم؟

[محمد تی ام]

باید این شکل میشد؟

[firstboy000]

توی انجمن من هست.میتونی ببینی اما چون رنگش سفیده زیاد خوشگل نشده.اگر کسی میتونه بگه رنگش رو چطور عوض کنیم؟

---

بعد مشکلی که داره اینه که صفحه اول انجمن یه لینکه تصویر هم یک لینک.اگر بشه عکس رو به متن اول چسبوند بهتر میشه.

[محمد تی ام]

برا من درست شد ممنون

---

اگه بشه رنگ پس زمینش سبز کم رنگ باشه عالی میشه

[Gh-Moradi]

چی سفید قشنگ نیست؟

برای تغییر پس زمینه کافیه با رنگهای بکگراند (background) بازی کنید تا به رنگ مورد علاقه برسید

[صالح غلامیان]

درود برای سبز کمرنگ

کد php:

.secondary {
 background: #aae557; /* Old browsers */
background: -moz-linear-gradient(top, #aae557 0%, #c1dd96 21%, #c9e5a0 50%, #c1dd96 84%, #aae557 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aae557), color-stop(21%,#c1dd96), color-stop(50%,#c9e5a0), color-stop(84%,#c1dd96), color-stop(100%,#aae557)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #aae557 0%,#c1dd96 21%,#c9e5a0 50%,#c1dd96 84%,#aae557 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #aae557 0%,#c1dd96 21%,#c9e5a0 50%,#c1dd96 84%,#aae557 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #aae557 0%,#c1dd96 21%,#c9e5a0 50%,#c1dd96 84%,#aae557 100%); /* IE10+ */
background: linear-gradient(to bottom, #aae557 0%,#c1dd96 21%,#c9e5a0 50%,#c1dd96 84%,#aae557 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aae557', endColorstr='#aae557',GradientType=0 ); /* IE6-9 */
    overflow: hidden;
    margin-top: 25px;
    padding: 0px;
    border:1px solid #ebebeb;
    border-radius: 2px;
    box-shadow:0 0 5px #e9e9e9;
    text-shadow: 1px 1px 0px #fafafa;
    font-size: 12px;
    font-family:DroidNaskh-Regular,Tahoma;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
}

.breadcrumb {
    list-style: none;
    overflow: hidden;
    margin: 0;
    padding: 0px;
    max-height:30px;
}

.breadcrumb li {
    float: right;
}

.breadcrumb li a {
    background: #f9f9f9;
    color: #777777;
    padding-top: 5px;
    padding-bottom:8px;
    padding-right:40px;
    padding-left:0;
    position: relative;
    display: block;
    float: right;
    
    text-decoration: none;
}

.breadcrumb li a:after {
    content: " ";
    display: block;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 25px solid #f9f9f9;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    right: 100%;
    z-index: 2;
}

.breadcrumb li a:before {
    content: " ";
    display: block;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 25px solid #ededed;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    margin-right: 1px;
    right: 100%;
    z-index: 1;
}

.breadcrumb li:first-child a {
    padding-right: 10px;
}

.breadcrumb li:last-child a {
}

.breadcrumb li a:hover {
    background: #f5f5f5;
    color: #777777;
}

.breadcrumb li a:hover:after {
    border-right-color: #f5f5f5 !important;
}