vb.org Archive - Miscellaneous Hacks - Alternative Breadcrumbs for your vB4

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Miscellaneous Hacks - Alternative Breadcrumbs for your vB4 (https://vborg.vbsupport.ru/showthread.php?t=280518)

Alternative Breadcrumbs for your vB4

STOP: Before we go any further, I want to make it clear that you need to have a basic understanding of what you're doing. You need to have a basic understanding of CSS in order to make this perfect. I have tried my best to have this use vBulletin's existing stylevars, but you will most likely need to fine-tune it's cosmetic qualities on your own.

http://mauricedestefano.com/images/screenshot.387.png

Some people have been asking for better breadcrumbs. A few months ago, I published a barebone template on how to accomplish such a task. Despite my good efforts, some people needed additional help to get it working. To make matters easier, I took time out today to make the breadcrumbs work with a vBulletin 4 system. It includes basic Microdata.

As previously mentioned above, these will need some CSS work on a non-default style. When these were originally built, it was for my website, not for mass distribution. I have given my best efforts to port it to using vBulletin's stylevars, but it's very, very crude. I have taken some time to add comments to the CSS so you can easily change the values if they don't work right.

If you want to see a live demo, you may visit my site:

Code:

https://www.beercandle.com/forum.php

Please note my site is using the original revision. This here is the adapted.

Prerequisite to setting this up: This has only been tested on vBulletin 4.1.11; Create a copy of the Style you want to apply this to. Test it first. Make sure it looks good. :)

> Open Template Group `CSS Templates`
>> Open Template `additional.css`
### ADD ###

Code:

.bread_box {

        margin: 0;

        overflow: hidden;

        clear: both;

}

.breadcrumb {

        position: relative;

        font: 11px Arial,Calibri,Verdana,Geneva,sans-serif;

        background: {vb:stylevar sidebar_background};

        border: {vb:stylevar sidebar_border}; /* this is the border color that's around the whole thing */

        -moz-border-radius:{vb:stylevar border_radius};

        -webkit-border-radius: {vb:stylevar border_radius};

        border-radius: {vb:stylevar border_radius};

        overflow: hidden;

}

.breadcrumb .crust {

        display: block;

        float: left;

        position: relative;

}

.breadcrumb .crust:first-child a.crumb {

        padding-left: 13px;

        -moz-border-radius-topleft:{vb:stylevar border_radius};

        -moz-border-radius-bottomleft:{vb:stylevar border_radius};

        -webkit-border-top-left-radius: {vb:stylevar border_radius};

        -webkit-border-bottom-left-radius: {vb:stylevar border_radius};

        border-top-left-radius: {vb:stylevar border_radius};

        border-bottom-left-radius: {vb:stylevar border_radius};

}

.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {

        text-decoration: none;

        background-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the background color of the CRUMBS, ie: the links */

        padding: 0 10px 0 23px;

        border-bottom: {vb:stylevar sidebar_border}; /* this is the same as the border value higher up, this only shows if the last crumb causes it to overflow */

        margin-bottom: -1px;

        outline: 0 none;

        -moz-outline-style: 0 none;

        display: block;

        line-height: 22px;

        _border-bottom: none;

        color:{vb:stylevar link_color}; /* this is the color of the links in the crumbs */

        text-decoration:{vb:stylevar link_textDecoration};

}

.breadcrumb .crust b.lastcrumb {

        background: transparent none;

        color: {vb:stylevar footer_time_color}; /* this is the color of the last crumb, ie: the final destination */

        font-weight: bold;

}

.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {

        line-height: 22px;

}

.breadcrumb .crust .arrow {

        border: 12px solid transparent;

        border-right: 1px none black;

        border-left: {vb:stylevar sidebar_border}; /* this is the _background_ color of the "arrow" */

        border-left-width: 12px !important;

        border-left-style: solid !important;

        display: block;

        position: absolute;

        right: -12px;

        top: -1px;

        z-index: 50;

        width: 0px;

        height: 0px;

}

.breadcrumb .crust .arrow span {

        border: 12px solid transparent;

        border-right: 1px none black;

        border-left-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the border color of the "arrow" */

        display: block;

        position: absolute;

        left: -13px;

        top: -12px;

        z-index: 51;

        white-space: nowrap;

        overflow: hidden;

        text-indent: 9999px;

        width: 0px;

        height: 0px;

}

.breadcrumb .refresh:hover { background-position: 0px -16px; }

.breadcrumb .crust:last-child a.crumb { font-weight: bold; }

.breadcrumb .crust:hover a.crumb { 

        background-color:{vb:stylevar blocksubhead_background.backgroundColor}; /* this is the background color of the crumb when it's hovered */

        color:{vb:stylevar linkhover_color}; /* likewise, this is the color of the crumb's link when hovered */

        text-decoration:{vb:stylevar linkhover_textDecoration}; 

}

.breadcrumb .crust:hover .arrow span { 

        border-left-color:{vb:stylevar blocksubhead_background.backgroundColor}; /* this is the color of the "arrow" when hovered. It should be identical to the `.breadcrumb .crust:hover a.crumb` background value */

}

> Open Template Group `Navigation / Breadcrumb Templates`
>> Open Template `navbar`
### FIND ###

Code:

<div id="breadcrumb" class="breadcrumb">

        <ul class="floatcontainer">

                <li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" alt="{vb:rawphrase home}" /></a></li>

                {vb:raw navbits.breadcrumb}

                {vb:raw navbits.lastelement}

        </ul>

        <hr />

</div>

### REPLACE WITH ###

Code:

<div class="bread_box">

        <nav>

                <fieldset class="breadcrumb">

                        <span class="crumbs">

                                <vb:if condition="$vboptions['hometitle']">

                                        <span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">

                                                <a href="{vb:raw vboptions.homeurl}" class="crumb" rel="up" itemprop="url" alt="{vb:rawphrase home}">

                                                        <span itemprop="title">{vb:raw vboptions.hometitle}</span>

                                                </a>

                                                <span class="arrow">

                                                        <span>&gt;</span>

                                                </span>

                                        </span>

                                </vb:if>

                                {vb:raw navbits.breadcrumb}

                                {vb:raw navbits.lastelement}

                        </span>

                </fieldset>

        </nav>

</div>

>> Open template `navbar_link`
### REPLACE _EVERYTHING_ WITH ###

Code:

<vb:if condition="$show['breadcrumb']">

        <span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">

                <a href="{vb:raw nav_url}" class="crumb" rel="up" itemprop="url">

                        <span itemprop="title">{vb:raw nav_title}</span>

                </a>

                <span class="arrow">

                        <span>&gt;</span>

                </span>

        </span>

<vb:else />

        <span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">

                <b class="lastcrumb">

                        <span itemprop="title">{vb:raw nav_title}</span>

                </b>

        </span>

</vb:if>

Working well for me on 4.1.11 :up:
Thanks.

WOOHOO! Looks great!

Is there anyway to get it not to show up on the CMS or forum pageS?

Quote:

Originally Posted by CouponWCents (Post 2312236)

Is there anyway to get it not to show up on the CMS or forum pageS?

post 6 here :) - https://vborg.vbsupport.ru/showthread.php?t=243517

tagged this to sus it out.. thanks

Excellent

installed

plz can you do that from right to left as RTL
thank you

Thank you !!! Very nice

INstalled thanks.
www.minelabowners.com

very nive looking
plz provide code for vb 3.8
thanks in advance

Works with 4.1.11!
Great Job!!

thanks, Installed with some tweaking eg. no arrows, hover color etc. simplified for my style...cheers

Thanks for sharing, I was about to release my own version of this. Saves me doing so :)

Works great, even with custom themes.

Thank you for sharing.

Perfect Big Thanks =)

GREAT WORK,

Thank you so much private_ale

Hi,

Could you please tell me how to change arrow direction from ltr to rtl?

Thank you,

This has been the very first and only externally coded mod I have currently used, really impressed!

This has made a big difference to the aesthetics of my site. :up:

Cheers :)

I've done some changes on it to work with rtl

Note: I've changed also some colors to work with my forum.

Code:

.bread_box {

        margin: 0;

        overflow: hidden;

        clear: both;

}

.breadcrumb {

        position: relative;

        font: 11px Tahoma;

        background: {vb:stylevar sidebar_background};

        border: {vb:stylevar sidebar_border}; /* this is the border color that's around the whole thing */

        -moz-border-radius:{vb:stylevar border_radius};

        -webkit-border-radius: {vb:stylevar border_radius};

        border-radius: {vb:stylevar border_radius};

        overflow: hidden;

}

.breadcrumb .crust {

        display: block;

        float: right;

        position: relative;

}

.breadcrumb .crust:first-child a.crumb {

        padding-right: 13px;

        -moz-border-radius-topleft:{vb:stylevar border_radius};

        -moz-border-radius-bottomleft:{vb:stylevar border_radius};

        -webkit-border-top-left-radius: {vb:stylevar border_radius};

        -webkit-border-bottom-left-radius: {vb:stylevar border_radius};

        border-top-left-radius: {vb:stylevar border_radius};

        border-bottom-left-radius: {vb:stylevar border_radius};

}

.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {

        text-decoration: none;

        background-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the background color of the CRUMBS, ie: the links */

        padding: 0 23px 0 10px;

        border-bottom: {vb:stylevar sidebar_border}; /* this is the same as the border value higher up, this only shows if the last crumb causes it to overflow */

        margin-bottom: -1px;

        outline: 0 none;

        -moz-outline-style: 0 none;

        display: block;

        line-height: 22px;

        _border-bottom: none;

        color:{vb:stylevar link_color}; /* this is the color of the links in the crumbs */

        text-decoration:{vb:stylevar link_textDecoration};

}

.breadcrumb .crust b.lastcrumb {

        background: transparent none;

        color: #02485c; /* this is the color of the last crumb, ie: the final destination */

        font-weight: bold;

}

.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {

        line-height: 22px;

}

.breadcrumb .crust .arrow {

        border: 12px solid transparent;

        border-left: 1px none black;

        border-right: {vb:stylevar sidebar_border}; /* this is the _background_ color of the "arrow" */

        border-right-width: 12px !important;

        border-right-style: solid !important;

        display: block;

        position: absolute;

        left: -12px;

        top: -1px;

        z-index: 50;

        width: 0px;

        height: 0px;

}

.breadcrumb .crust .arrow span {

        border: 12px solid transparent;

        border-left: 1px none black;

        border-right-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the border color of the "arrow" */

        display: block;

        position: absolute;

        right: -13px;

        top: -12px;

        z-index: 51;

        white-space: nowrap;

        overflow: hidden;

        text-indent: 9999px;

        width: 0px;

        height: 0px;

}

.breadcrumb .refresh:hover { background-position: 0px -16px; }

.breadcrumb .crust:last-child a.crumb { font-weight: bold; }

.breadcrumb .crust:hover a.crumb { 

        background-color:#d6e4f7; /* this is the background color of the crumb when it's hovered */

        color:{vb:stylevar linkhover_color}; /* likewise, this is the color of the crumb's link when hovered */

        text-decoration:{vb:stylevar linkhover_textDecoration}; 

}

.breadcrumb .crust:hover .arrow span { 

        border-right-color:#d6e4f7; /* this is the color of the "arrow" when hovered. It should be identical to the `.breadcrumb .crust:hover a.crumb` background value */

}

Thanks

How to hide "Forums" links?

https://vborg.vbsupport.ru/

Love this, very nice modification. :)

I have two links to HOME when selected on the CMS home page, any ideas?

Ok, figured this one out... If you have the same trouble in the CMS as I did (Shown in the post above), I fixed it by adding a conditional into the template as shown here;

Code:

<vb:if condition="$show['breadcrumb']">

<vb:if condition="THIS_SCRIPT != 'home'">

<span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">

                <a href="{vb:raw nav_url}" class="crumb" rel="up" itemprop="url">

                        <span itemprop="title">{vb:raw nav_title}</span>

                </a>



                <span class="arrow">

                        <span>&gt;</span>

                </span>



        </span>

</vb:if>

<vb:else />

        <span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">

                <b class="lastcrumb">

                        <span itemprop="title">{vb:raw nav_title}</span>

                </b>

        </span>

</vb:if>

Then add this;

Code:

define('THIS_SCRIPT', 'home');

to the top of "content.php" below the <?php.

That would be a BAD idea... content.php already has THIS_SCRIPT defined as:

Code:

define('THIS_SCRIPT', 'vbcms');

Changing it would likely break other mods of even some vbulletin features itself.

Define your own constant, something other than THIS_SCRIPT...

Maybe

Code:

define('IS_HOME', 'yes');

And then in the conditional:

Code:

<vb:if condition="IS_HOME != 'yes'">

Very cool. A rookie is glad to learn from a skilled person such as you.

Quote:

Originally Posted by Moncha (Post 2321992)

Very cool. A rookie is glad to learn from a skilled person such as you.

Making a new constant was still a good idea. :up:

Just put a note somewhere so you remember to redo it when you upgrade the forum.

Hello,

how became the new breadcrumbs when there is a very long post-title?

I have a fixed style and I would like know is someone that use a fixed style, has already test this situation.

Thank you,
Regards

Looks nice ;-) Thanks for that

Two problems :

1) Layout
2) Home disappears

:confused:

http://img543.imageshack.us/img543/8...0511092756.png

Solved :)

Something similar for navbar?

This works ok for 4.2

I have default vb4.2.0 template but with customized sidebar.
Could someone help me please with breadcrumb css to make it as default colors of sidebar.
http://www.freeimagehosting.net/t/ylmsn.jpg

Nice template hack, I really like the look of the Breadcrumbs now!

I was dealing with a lot of confusion about how to change the language on my site, so I made a small modification to add and additional language picking box to the right side of the breadcrumb box. This way it's near the top of the page instead of scrolled off the bottom.

To accommodate the slightly larger drop down box for the language selector, I had to make the bar a few px taller. Below are the code modifications from private_ale's original hack.

Here's the new code for additional.css:

Code:

.bread_box {

    margin: 0;

    overflow: hidden;

    clear: both;

}

.breadcrumb {

    position: relative;

    font: 11px Arial,Calibri,Verdana,Geneva,sans-serif;

    background: {vb:stylevar sidebar_background};

    border: {vb:stylevar sidebar_border}; /* this is the border color that's around the whole thing */

    -moz-border-radius:{vb:stylevar border_radius};

    -webkit-border-radius: {vb:stylevar border_radius};

    border-radius: {vb:stylevar border_radius};

    overflow: hidden;

}

.breadcrumb .crust {

    display: block;

    float: left;

    position: relative;

}

.breadcrumb .crust:first-child a.crumb {

    padding-left: 13px;

    -moz-border-radius-topleft:{vb:stylevar border_radius};

    -moz-border-radius-bottomleft:{vb:stylevar border_radius};

    -webkit-border-top-left-radius: {vb:stylevar border_radius};

    -webkit-border-bottom-left-radius: {vb:stylevar border_radius};

    border-top-left-radius: {vb:stylevar border_radius};

    border-bottom-left-radius: {vb:stylevar border_radius};

}

.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {

    text-decoration: none;

    background-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the background color of the CRUMBS, ie: the links */

    padding: 0 10px 0 23px;

    border-bottom: {vb:stylevar sidebar_border}; /* this is the same as the border value higher up, this only shows if the last crumb causes it to overflow */

    margin-bottom: -1px;

    outline: 0 none;

    -moz-outline-style: 0 none;

    display: block;

    line-height: 29px;

    _border-bottom: none;

    color:{vb:stylevar link_color}; /* this is the color of the links in the crumbs */

    text-decoration:{vb:stylevar link_textDecoration};

}

.breadcrumb .crust b.lastcrumb {

    background: transparent none;

    color: {vb:stylevar footer_time_color}; /* this is the color of the last crumb, ie: the final destination */

    font-weight: bold;

}

.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {

    line-height: 29px;

}

.breadcrumb .crust .arrow {

    border: 15px solid transparent;

    border-right: 1px none black;

    border-left: {vb:stylevar sidebar_border}; /* this is the _background_ color of the "arrow" */

    border-left-width: 15px !important;

    border-left-style: solid !important;

    display: block;

    position: absolute;

    right: -15px;

    top: -1px;

    z-index: 50;

    width: 0px;

    height: 0px;

}

.breadcrumb .crust .arrow span {

    border: 15px solid transparent;

    border-right: 1px none black;

    border-left-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the border color of the "arrow" */

    display: block;

    position: absolute;

    left: -16px;

    top: -15px;

    z-index: 51;

    white-space: nowrap;

    overflow: hidden;

    text-indent: 9999px;

    width: 0px;

    height: 0px;

}

.breadcrumb .refresh:hover { background-position: 0px -16px; }

.breadcrumb .crust:last-child a.crumb { font-weight: bold; }

.breadcrumb .crust:hover a.crumb { 

    background-color:{vb:stylevar blocksubhead_background.backgroundColor}; /* this is the background color of the crumb when it's hovered */

    color:{vb:stylevar linkhover_color}; /* likewise, this is the color of the crumb's link when hovered */

    text-decoration:{vb:stylevar linkhover_textDecoration}; 

}

.breadcrumb .crust:hover .arrow span { 

    border-left-color:{vb:stylevar blocksubhead_background.backgroundColor}; /* this is the color of the "arrow" when hovered. It should be identical to the `.breadcrumb .crust:hover a.crumb` background value */

}

Here's the new code to add for navbar:

Code:

<div class="bread_box">

    <nav>

        <fieldset class="breadcrumb">

            <span class="crumbs">

                <vb:if condition="$vboptions['hometitle']">

                    <span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">

                        <a href="{vb:raw vboptions.homeurl}" class="crumb" rel="up" itemprop="url" alt="{vb:rawphrase home}">

                            <span itemprop="title">{vb:raw vboptions.hometitle}</span>

                        </a>

                        <span class="arrow">

                            <span>&gt;</span>

                        </span>

                    </span>

                </vb:if>

                {vb:raw navbits.breadcrumb}

                {vb:raw navbits.lastelement}

<!-- Language Selector -->

<li style="float: right;">

<form action="{vb:raw vboptions.forumhome}.php" method="get" id="footer_select">

<vb:if condition="$show['languagechooser']">

<select name="langid" onchange="switch_id(this, 'lang')">

<optgroup label="{vb:rawphrase quick_language_chooser}">

{vb:raw languagechooserbits}

</optgroup>

</select>

</vb:if>

</form>     </li>

<!-- Language Selector Ends -->

            </span>

        </fieldset>

    </nav>

</div>

navbar_link remains the same.

I hope you find this hack-on-hack useful!

-dwx

I'm having an issue with it after installing. It shows two lines on the bottom, which doesn't look like the examples I've seen here. I'm using the latest version of vbulletin, 4.2.0.

Quote:

Originally Posted by Americanbang (Post 2340248)

I'm having an issue with it after installing. It shows two lines on the bottom, which doesn't look like the examples I've seen here. I'm using the latest version of vbulletin, 4.2.0.

I had the same issue, it was because there's an underline that's NOT overwritten by the bounding box. It's theme specific, and has nothing to do with 4.2. You tweak the CSS and make the regions larger so it fills up your space.

Take a look at the modification's I posted above, I increased the height of the bar by 6 or 7px to accommodate the language picker, and had to adjust the arrows to fit as well.

dwx

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.04090 seconds Memory Usage 1,881KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (13)bbcode_code_printable (3)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: