You may have seen something similar posted at: Make A Nice Breadcrumb Navigation for your site
though it appears to not have been posted here and is missing the images linked as the provided link gives you a 404 not found and the home image was offset as well so it did not display in correct position. So I made a few changes..., got the original images and decided to post it here..., since it already wasn't.
Anywhoo, it is actually from this original source:
Create apple.com-like breadcrumb using simple CSS - Janko Jovanovic (2008)
This is an example of what you will get after the tutorial:
![[Image: m7dg6q.png]]()
![[Image: 11gr72h.png]]()
* If you comment out...
You will notice it plays nicely with resizing.......
Because of:
Anywhoo..., lets begin the tutorial...
Edit: Global.css
add:
Edit: Navigation Templates
Edit Template: nav
Replace with:
Edit Template: nav_bit
Replace with:
Edit Template: nav_bit_active
Replace with:
Edit Template: nav_dropdown
Delete all
Edit Template: nav_sep
Delete All
Edit Template: nav_sep_active
Delete all
Upload these images to your images folder:
![.png]( "PNG Image")
home.png (Size: 587 bytes / Downloads: 95)
![.png]( "PNG Image")
bc_bg.png (Size: 171 bytes / Downloads: 97)
![.png]( "PNG Image")
bc_separator.png (Size: 517 bytes / Downloads: 96)
If you do not like that original home.png image you could replace it with this one:
![.gif]( "GIF Image")
home.gif (Size: 67 bytes / Downloads: 91)
and change the image link to reflect the .gif extension...
For example:
or simply change this actual image to .png extension...
though it appears to not have been posted here and is missing the images linked as the provided link gives you a 404 not found and the home image was offset as well so it did not display in correct position. So I made a few changes..., got the original images and decided to post it here..., since it already wasn't.
Anywhoo, it is actually from this original source:
Create apple.com-like breadcrumb using simple CSS - Janko Jovanovic (2008)
This is an example of what you will get after the tutorial:
* If you comment out...
Code:
#container {
/* min-width: 990px; */
}Code:
.wrapper {
/* min-width: 970px; */
}You will notice it plays nicely with resizing.......
Because of:
Code:
overflow:hidden;Anywhoo..., lets begin the tutorial...
Edit: Global.css
add:
Code:
/** Apple Like Breadcrumbs **/
#breadcrumb {
font: 11px Arial, Helvetica, sans-serif;
background-image:url('images/bc_bg.png');
background-repeat:repeat-x;
height:30px;
line-height:30px;
color:#9b9b9b;
border:solid 1px #cacaca;
width:100%;
overflow:hidden;
margin:0px;
padding:0px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
}
#breadcrumb li {
list-style-type:none;
float:left;
padding-left:10px;
}
#breadcrumb a {
height:30px;
display:block;
background-image:url('images/bc_separator.png');
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:#0066A2;
}Edit: Navigation Templates
Edit Template: nav
Replace with:
Code:
<ul id="breadcrumb"><li><a href="{$mybb->settings['bburl']}/index.php" title="Home"><img class="home" src="{$mybb->settings['bburl']}/images/home.png" alt="Home" /></a></li>{$nav}{$activebit}</ul>Edit Template: nav_bit
Replace with:
Code:
<li><a href="{$navbit['url']}">{$navbit['name']}</a></li>Edit Template: nav_bit_active
Replace with:
Code:
<li>{$navbit['name']}</li>Edit Template: nav_dropdown
Delete all
Edit Template: nav_sep
Delete All
Edit Template: nav_sep_active
Delete all
Upload these images to your images folder:
home.png (Size: 587 bytes / Downloads: 95)
bc_bg.png (Size: 171 bytes / Downloads: 97)
bc_separator.png (Size: 517 bytes / Downloads: 96)
If you do not like that original home.png image you could replace it with this one:
home.gif (Size: 67 bytes / Downloads: 91)
and change the image link to reflect the .gif extension...For example:
Code:
<ul id="breadcrumb"><li><a href="{$mybb->settings['bburl']}/index.php" title="Home"><img class="home" src="{$mybb->settings['bburl']}/images/home.gif" alt="Home" /></a></li>{$nav}{$activebit}</ul>or simply change this actual image to .png extension...