MyBB Source » Customization » Tutorials » Apple style Bread crumb navigation

Latest News:
Latest Mods: Latest Tutorials:


 
 
Thread Rating:
  • 1 Votes - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Apple style Bread crumb navigation
Author Message
envira
Junior Member


Posts: 36
Joined: Nov 2010
Reputation: 1
Post: #1
 Apple style Bread crumb navigation
Apple style Bread crumb navigation

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



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">[*][URL=SITE URL" title="Home][IMG]images/home.png[/IMG][/URL]

{$nav}{$activebit}

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:
[*][URL={$navbit['url']}]{$navbit['name']}[/URL]

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

Code:
[*]{$navbit['name']}

dats it you are done.
demo: www.zzdesigns.cz.cc
original tutorial here: link
02-07-2011, 03:44 AM


euantor
Designer/Themer

Support

Posts: 770
Joined: Jun 2009
Reputation: 6
Post: #2
RE: Apple style Bread crumb navigation
Nice share, thanks!
02-07-2011, 04:27 AM
envira
Junior Member


Posts: 36
Joined: Nov 2010
Reputation: 1
Post: #3
RE: Apple style Bread crumb navigation
my pleasure bro.......thnkx for reply
02-07-2011, 06:04 AM
Dead Soulâ„¢
Member


Posts: 109
Joined: Mar 2010
Reputation: 0
Post: #4
RE: Apple style Bread crumb navigation
The image is broken. I think?
02-13-2011, 10:00 PM
envira
Junior Member


Posts: 36
Joined: Nov 2010
Reputation: 1
Post: #5
RE: Apple style Bread crumb navigation
yea but u can have a working demo.......click the demo and see it.
http://www.zzdesigns.co.cc
02-14-2011, 05:20 AM
Dead Soulâ„¢
Member


Posts: 109
Joined: Mar 2010
Reputation: 0
Post: #6
RE: Apple style Bread crumb navigation
I don't see the apple style anywhere on the site.?
02-17-2011, 12:01 AM
envira
Junior Member


Posts: 36
Joined: Nov 2010
Reputation: 1
Post: #7
RE: Apple style Bread crumb navigation
sorry guys here's daa image...


  1122.png (Size: 8.33 KB / Downloads: 8)
02-17-2011, 07:04 AM
 




User(s) browsing this thread: 2 Guest(s)