Welcome Guest ! Please   Login or Register


Check out our latest Premium Themes, Majestic , Majestic - Dark and Musk Themes for MyBB 1.8 Click to Shop Now

Now open for Custom Theme requests : Click to Order Now





 
Thread Rating:
  • 2 Vote(s) - 5 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Make A Nice Breadcrumb Navigation for your site

myskins Offline
Super Moderator
******

Posts: 13
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 204.34Points
Post: #1
Thumbs Up Make A Nice Breadcrumb Navigation for your site

Hello friends,
This is an old tutorial,but upon request i am making a post regarding the breadcrumb navigation to your site.

To achieve this : you need to edit a few templates.

To start with :


1.Download the following package and upload the image files to the root folder of your server i.e : public_html.
LINK

2.Add the following code to your global.css of your theme at the bottom.

Code:
#breadcrumb
{
    font: 11px Arial, Helvetica, sans-serif;
    background-image:url('images/bc_bg.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/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;
}

3.Now its all the template edits :Here are list of edits you should perform

a.navigate to "Templates" and choose your theme Templates :

b.Expand the Navigation set of templates.

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

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

d.Then edit the "nav_bit" template and replace it's contents with the following code:

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

e.Then, edit the "nav_bit_active" template and replace it's contents with the following code:

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

f.The other two navigation templates : nav_sep_active,nav_sep should be left empty.

This finishes your template edits and you will have a beautiful breadcrumb navigation to your site.

Here is the final preview : http://i.imgur.com/c4GRa.png

Hope this helps,
Regards,

[Image: KIDsp.png]
(This post was last modified: 09-10-2012 08:43 PM by envira.)
08-31-2012 04:27 PM
Find
3
Quote




Dominic L. Offline
Design the Web
***

Posts: 53
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 864.70Points
Post: #2
RE: Make A Nice Breadcrumb Navigation for your site

Thank you for listen my request Smile Very nice
08-31-2012 04:30 PM
Find
0
Quote




myskins Offline
Super Moderator
******

Posts: 13
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 204.34Points
Post: #3
RE: Make A Nice Breadcrumb Navigation for your site

(08-31-2012 04:30 PM)Pirate_Dominic Wrote:  Thank you for listen my request Smile Very nice

Glad you like it SmileSmile,
Regards,

[Image: KIDsp.png]
08-31-2012 04:33 PM
Find
1
Quote




Dominic L. Offline
Design the Web
***

Posts: 53
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 864.70Points
Post: #4
RE: Make A Nice Breadcrumb Navigation for your site

I test it but css url image aren't correct

change this
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;
}

with this

Code:
#breadcrumb
{
    font: 11px Arial, Helvetica, sans-serif;
    background: url(images/warriors/bc_bg.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/warriors/bc_separator.gif);
    background-repeat:no-repeat;
    background-position:right;
    padding-right: 15px;
    text-decoration: none;
    color:#454545;
}

and this

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>

with this

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

The images are gif not png Smile

Regards,Pirate_Dominic
08-31-2012 04:55 PM
Find
1
Quote




envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,207.30Points
Post: #5
RE: Make A Nice Breadcrumb Navigation for your site

(08-31-2012 04:55 PM)Pirate_Dominic Wrote:  The images are gif not png Smile

Regards,Pirate_Dominic

Thank you,i just overlooked,
the tut is now updated Smile
regards,

[Image: lt79ucY.png]
08-31-2012 05:11 PM
Find
0
Quote




Verilog Offline
Junior Member
**

Posts: 14
Joined: Aug 2012
Likes Received : 3

Nationality:

Mood: None

Points: 279.94Points
Post: #6
RE: Make A Nice Breadcrumb Navigation for your site

It will be great to see screenshot of final result, although i know it Wink
This will be very helpful for others.

MyBB Themes at WallBB.co.uk
09-09-2012 09:56 PM
Find
1
Quote




envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,207.30Points
Post: #7
RE: Make A Nice Breadcrumb Navigation for your site

(09-09-2012 09:56 PM)Verilog Wrote:  It will be great to see screenshot of final result, although i know it Wink
This will be very helpful for others.

This is the demo/preview : http://i.imgur.com/c4GRa.png SmileSmileWinkWink

[Image: lt79ucY.png]
09-10-2012 08:43 PM
Find
0
Quote




Verilog Offline
Junior Member
**

Posts: 14
Joined: Aug 2012
Likes Received : 3

Nationality:

Mood: None

Points: 279.94Points
Post: #8
RE: Make A Nice Breadcrumb Navigation for your site

Oh great, demo preview of my site Smile

MyBB Themes at WallBB.co.uk
09-15-2012 09:02 PM
Find
0
Quote




HyperActive Offline
Banned

Posts: 9
Joined: Sep 2012

Nationality:

Mood: None

Points: 171.51Points
Post: #9
RE: Make A Nice Breadcrumb Navigation for your site

This appeared as a corrupt image for me, i followed each step.
09-16-2012 03:33 AM
Find
0
Quote




envira Offline
Doctor Web
*******

Posts: 1,233
Joined: Aug 2012
Likes Received : 299

Facebook Google Plus Twitter
Nationality: India

Mood: Lazy

Points: 61,207.30Points
Post: #10
RE: Make A Nice Breadcrumb Navigation for your site

Can you show your forum link so I can fix it for you Smile

[Image: lt79ucY.png]
09-16-2012 10:57 AM
Find
0
Quote





Possibly Related Threads...
Thread: Author Replies: Views: Last Post
Smile [1.8x] HOW TO GET A NICE LOOKING PAGINATION Tilby David 3 686 04-25-2016 09:55 PM
Last Post: Subscription
Smile Tutorial to make 4 column footer for MyBB envira 9 4,986 07-20-2014 06:43 PM
Last Post: VetFalco
Heart Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery envira 33 12,752 07-20-2014 06:18 PM
Last Post: VetFalco

Forum Jump:


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

About Myskins

MySkins Studio is MyBB Themes Resource Website.

At MySkins Studio, We procreate MyBB Themes both custom MyBB Themes and premium Mybb Themes.We believe in quality and assure you the best MyBB themes at a very reasonable price , that suits your taste.

Feel free to drop in a request and get a quote.