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
Let me know how it goes buddy