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)

I love this modification, looks much nicer than the dDefault, thanks for the share. :)

This would be nice if you can add navbit-home icon next to "Your Site Name" or remove "Your Site Name" and replace it with the "home icon".

Quote:

Originally Posted by initiald (Post 2346294)

This would be nice if you can add navbit-home icon next to "Your Site Name" or remove "Your Site Name" and replace it with the "home icon".

This would in fact be awesome.

Conflicting issue it seems, first there is already a .breadcrumb class in vbulletin.css

Problem is that the body background is missing its white property. I tried to even change the custom additional.css (yours) breadcrumb background property to match the vbulletin.css one, cleared cache but for whatever reason didn't take effect.

Thanks. Any ideas how to put the little Home icon back? I tried but get the below result.

EDIT: Is text-indent: 9999px; really needed, and if so, is there an alt? thx

EDIT: I got the home icon pretty much where I want it for now. Had to add padding:4px 0 6px 0 Curious... what do most folks set that far left link to... 'homepage' home or 'forum' home? I have it at homepage right now, but thinking forum home might be more logical as I already have a Home button in the main top nav where What's New is.

Very happy with this, thanks for sharing!

Excellent!!! Thank you.

Hi,

Great thread! Will you share footer area code of your website? (https://www.beercandle.com/forum.php)

Also a very nice theme, what is the theme name?

this is awesome!

anyway to get rid of the forum link tho?

Quote:

Originally Posted by kralex (Post 2317443)

Thanks

How to hide "Forums" links?

http://img607.imageshack.us/img607/3...eenshot379.jpg

Thank you!
Mark as Installed.

its wonderful! thank you
anyone got a nicer/cleaner looking "post new thread" image?

thanks

Great mod, thank you! I have a small formatting issue (see attached image) and would appreciate any ideas on how to solve it. It only happens on the last item of a navigation path - upper levels are fine as in here: http://www.mopanetree.com/opentalk/1...a-space-2.html

Thank you !!! Very nice

All my arrows are pointing the wrong way using this css.

They are < instead of >. Tips?

tested on 4.2.0. buggy.

Tested 4.2.0, not working... But..

I changed some stylevar field i this code, working now..

Replace with this code on additional.css

PHP Code:


		
			
.bread_box {
    margin-top: 2px;
    overflow: hidden;
    clear: both;
}
.breadcrumb {
    position: relative;
    font: 11px Arial,Calibri,Verdana,Geneva,sans-serif;
    background: #f1f1f1 url(images/gradients/top-highlight.png) repeat-x
        scroll left top;
    border: #000000; /* 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: #f1f1f1; /* this is the background color of the CRUMBS, ie: the links */
    padding: 0 10px 0 23px;
    border-bottom: 1px; /* this is the same as the border value higher up, this only shows if the last crumb causes it to overflow */
        border-bottom-style:solid;
        border-bottom-color:#c1c1c1;
    margin-bottom: -1px;
    outline: 0 none;
    -moz-outline-style: 0 none;
    display: block;
    line-height: 22px;
    _border-bottom: none;
    color:#417394; /* this is the color of the links in the crumbs */
    text-decoration:none;
}
.breadcrumb .crust b.lastcrumb {
    background: transparent none;
    color: #3e3e3e; /* 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: #c1c1c1; /* 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: #f1f1f1; /* 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:#e9e9e9; /* this is the background color of the crumb when it's hovered */
    color: #417394; /* likewise, this is the color of the crumb's link when hovered */
    text-decoration:none; 
}
.breadcrumb .crust:hover .arrow span { 
    border-left-color:#e9e9e9; /* this is the color of the "arrow" when hovered. It should be identical to the `.breadcrumb .crust:hover a.crumb` background value */
}

Wanted to see an example, followed the link to the site and found out it was private...

Screen shots would be nice.

Thanks.....

There are screenshots, just look at the attachments.

Hi
It is great for my forum 4.2.1
thank you
given 5*
See the breadcrumb below:
https://dl.dropboxusercontent.com/u/...breadcrumb.png

Anyone know how to make this line a background: url

PHP Code:


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

Thanks
Dave

Great hack! :)

working good on (vBulletin 4.2.2)

Thank you, I'll try it l8tr ;)

On one of your screen shots (see below) your addition and the regular breadcrumb are all within very close proximity to each other.

I would think it would be better to replace the default with yours? Otherwise it's repetitive.

https://vborg.vbsupport.ru/attachmen...4&d=1332429220

I don't see the regular breadcrumb in that picture?

This is the default breadcrumb-

https://vborg.vbsupport.ru/attachmen...1&d=1385066769

The text below the bread crumb. My bad.
This text:
Beercandle Forums
Welcome to the Beercandle Forums.

There's no need for it.

Hi, do you know how can I do to enlarge this breadcrumb? I tried to maximize it with line-height but arrows remain small. Thank you.

For anyone that is still using this, these are the new replacements that fix the (vbulletin) data-vocabulary.schema deprecation from google's search console.

(just added "vbulletin" above in case anyone is searching google!)

navbar:

Code:

<div class="bread_box">

        <nav>

                <fieldset class="breadcrumb">

                        <span class="crumbs">

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

                                        <ol class="crust" itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList">

                                                <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">

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

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

                                                        </a>

                                                </li>

                                                <span class="arrow">

                                                        <span>&gt;</span>

                                                </span>

                                        </ol>

                                </vb:if>

                                {vb:raw navbits.breadcrumb}

                                {vb:raw navbits.lastelement}

                        </span>

                </fieldset>

        </nav>

</div>

navbar_link:

Code:

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

        <ol class="crust" itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList">

                <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">

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

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

                        </a>

                </li>

                        <span class="arrow">

                                <span>&gt;</span>

                        </span>

        </ol>

<vb:else />

        <ol class="crust" itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList">

                <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">

                        <b class="lastcrumb">

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

                        </b>

                </li>

        </ol>

</vb:if>

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01443 seconds Memory Usage 1,857KB 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 (2)bbcode_code_printable (2)bbcode_php_printable (2)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 (28)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: