Threaded Mode | Linear Mode

envira · 02-07-2011, 03:44 AM

Apple style Bread crumb navigation

Here's a tutorial on how to add Apple style navigation to your forum

[Image: attachment.php?aid=155]

1.First, download the Breadcrumb images pack from here and upload them into your "images" directory.

download: link

2.Then in your

Code:

Admin CP navigate to Templates & Style > Themes

Click "Options" next to your theme and click "Edit Theme".

Click the "Add Stylesheet" tab.

In the Filename field type: global-nav.css

Set "Attached to" to "Globally"

Then click "Write My Own Content"

In the text box that appears, put the following:

Code:

#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;

}

#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:#35acc5;

}

Click "Save"

3.Then, navigate to "Templates"

Expand the Template Set you wish to add this too, then expand the Navigation group.

Edit the "nav" template, and replace its contents with this:

Code:

yourtheme>templates>navigation templates>nav

Code:

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

{$nav}{$activebit}</ul>

Change SITE URL to the URL you want the Home image to link too.

4.Then edit the "nav_bit" template and replace it's contents with this:

Code:

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

5.Then, edit the "nav_bit_active" template and replace it's contents with this:

Code:

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

dats it you are done.
demo: www.zzdesigns.cz.cc
original tutorial here: link

euantor · 02-07-2011, 04:27 AM

Nice share, thanks!

envira · 02-07-2011, 06:04 AM

my pleasure bro.......thnkx for reply

Guru · 02-13-2011, 10:00 PM

The image is broken. I think?

envira · 02-14-2011, 05:20 AM

yea but u can have a working demo.......click the demo and see it.
http://www.zzdesigns.co.cc

Guru · 02-17-2011, 12:01 AM

I don't see the apple style anywhere on the site.?

envira · 02-17-2011, 07:04 AM

sorry guys here's daa image...

.png

1122.png (Size: 8.33 KB / Downloads: 40)

fma965 · 08-01-2011, 06:08 AM

thanks

iHydra · 04-04-2012, 08:40 AM

Link does not work anymore, you can use this:

http://www.lostsockdesign.com.au/apple-b...index.html

euantor · 04-04-2012, 09:00 AM

I've updated the OP as something was wrong with the original HTMl code that should have been there. This thread ranks fairly high in google for a specific search term after all.

Threaded Mode \| Linear Mode DeadLink Apple style Bread crumb navigation
Author	Message