Make Yet Another Nice Breadcrumb Navigation for your forum....
Example:
![[Image: 352kjo3.jpg]]()
Edit: Navigation Templates
Edit Template: nav
Replace all:
Edit Template: nav_bit
Replace all:
Edit Template: nav_bit_active
Replace all:
Edit Template: nav_dropdown * Delete all content
Edit Template: nav_sep * Delete all content
Edit Template: nav_sep_active * Delete all content
Edit: global.css
Add:
Download and upload the home.png image to your forum images directory
![.png]( "PNG Image")
home.png (Size: 3.62 KB / Downloads: 213)
NOTE: * If you want to remove the ForumName first link you can do it simply like so:
Edit Template: nav
Remove:
Edit Template: nav
So it looks like:
Example:
![[Image: 25kpziv.png]]()
Example:
Edit: Navigation Templates
Edit Template: nav
Replace all:
Code:
<fieldset class="breadcrumb"><span class="crumbs">
<img src="{$mybb->settings['bburl']}/images/home.png" alt="Home" class="home"/>
<span class="arrow">
<span></span>
</span>{$nav}{$activesep}<span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
{$activebit}</span></span></fieldset>Edit Template: nav_bit
Replace all:
Code:
<span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="{$navbit['url']}" class="crumb" rel="up" itemprop="url">
{$navbit['name']} </a>
<span class="arrow">
<span></span>
</span></span>Edit Template: nav_bit_active
Replace all:
Code:
<a href="{$navbit['url']}" class="crumb" rel="up" itemprop="url">
{$navbit['name']} </a>
<span class="arrow">
<span></span>
</span>Edit Template: nav_dropdown * Delete all content
Edit Template: nav_sep * Delete all content
Edit Template: nav_sep_active * Delete all content
Edit: global.css
Add:
Code:
@media (max-width:768px) {
.breadcrumb .crust:nth-child(2n) {
display: none;
}
.breadcrumb .crust:first-child {
display: block;
}
.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {
max-width: 70px !important;
}
}
.breadcrumb {
font-size: 11px;
background: #f5f5f5;
border: 1px solid #e9e9e9;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
overflow: hidden;
margin: 0;
padding: 0;
margin-top: 21px
}
.breadcrumb i {
line-height: inherit;
font-size: 15px
}
.breadcrumb .crust {
display: block;
float: left;
position: relative
}
.breadcrumb .crust:first-child a.crumb {
padding-left: 10px;
padding-right: 10px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px
}
.breadcrumb .crust:nth-child(2) {
display: none
}
.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {
text-decoration: none;
background-color: #FFF;
padding: 0 15px 0 25px;
border-bottom: 1px solid #e9e9e9;
margin-bottom: -1px;
outline: 0 none;
-moz-outline-style: 0 none;
display: block;
line-height: 35px;
_border-bottom: none;
color: #171717;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 35px;
max-width: 180px
-moz-border-radius-topleft: 3px;
-moz-border-radius-bottomleft: 3px;
-webkit-border-top-left-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.breadcrumb .crust b.lastcrumb {
background: transparent none;
font-weight: 700;
color: #86B413!important;
}
.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {
line-height: 35px
}
.breadcrumb .crust .arrow {
border: 18px solid transparent;
border-right: 1px none #000;
border-left-color: #e9e9e9;
border-width: 19px 0 19px 10px;
display: block;
position: absolute;
right: -10px;
top: -1px;
z-index: 1;
width: 0;
height: 0;
}
.breadcrumb .crust .arrow span {
border: 18px solid transparent;
border-right: 1px none #000;
border-left-color: #FFF;
border-width: 19px 0 19px 10px;
display: block;
position: absolute;
left: -11px;
top: -19px;
z-index: 2;
white-space: nowrap;
overflow: hidden;
text-indent: 9999px;
width: 0;
height: 0;
}
.breadcrumb .refresh:hover {
background-position: 0 -16px
}
.breadcrumb .crust:last-child a.crumb {
font-weight: 700;
}
.breadcrumb .crust:hover a.crumb {
background-color: #f3f3f3;
text-decoration: none;
}
.breadcrumb .crust:hover .arrow span {
border-left-color: #f3f3f3;
}
.home {
border:none;
margin: 8px 0px;
padding-left: 8px;
padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
float: left;
}Download and upload the home.png image to your forum images directory
home.png (Size: 3.62 KB / Downloads: 213)
NOTE: * If you want to remove the ForumName first link you can do it simply like so:
Edit Template: nav
Remove:
Code:
<span class="arrow">
<span></span>
</span>Edit Template: nav
So it looks like:
Code:
<fieldset class="breadcrumb"><span class="crumbs">
<img src="{$mybb->settings['bburl']}/images/home.png" alt="Home" class="home"/>
{$nav}{$activesep}<span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
{$activebit}</span></span></fieldset>