MyBB Community Forums

Full Version: Breadcrumb Graphics?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi guys, ive bin looking at some forums and ive seen they have graphics over their breadcrumb navigation.

Im just wondering how I can apply some CSS to that because I cant find correct CSS class for it?

Heres some screenshots so you know what im after.
http://prntscr.com/36srl
http://prntscr.com/36t5l

Thanks
Add this to the bottom of your global css....

#breadcrumb
{
font: 11px Arial, Helvetica, sans-serif;
background-image:url(images/your image.gif);
background-repeat:repeat-x;
height:30px;
line-height:30px;
color:#9b9b9b;
border:solid 1px #cacaca;
width:100%;
overflow:hidden;
margin:0px;
padding:0px;
}
#breadcrumb li
{
list-style-type:none;
float:left;
padding-left:10px;
}
#breadcrumb a
{
height:30px;
display:block;
background-image:url(images/your image.gif);
background-repeat:no-repeat;
background-position:right;
padding-right: 15px;
text-decoration: none;
color:#454545;
}
.home
{
border:none;
margin: 8px 0px;
}

#breadcrumb a:hover
{
color:#35acc5;
}


Now in your Nav template replace with

<ul id="breadcrumb">
<li><a href="{$mybb->settings['bburl']}" title="Home"><img src="images/home.gif" alt="Home" class="home" /></a></li>
{$nav}{$activebit}
</ul>

Then in nav_bit replace with

<li><a href="{$navbit['url']}" title="{$navbit['name']}" alt="{$navbit['name']}">{$navbit['name']}</a></li>

Then in nav_bit_active replace with

<li>{$navbit['name']}</li>


Now dont forget in the css change the name of [your image.gif] and in the nav template change [home.gif] to what ever you name your images. Hope this helps Smile Let me know how it goes buddy Wink
Thanks