Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Template Modifications

Reply
 
Thread Tools
Alternative Breadcrumbs for your vB4 Details »»
Alternative Breadcrumbs for your vB4
Version: 1.00, by private_ale private_ale is offline
Developer Last Online: Nov 2023 Show Printable Version Email this Page

Category: Miscellaneous Hacks - Version: 4.1.11 Rating:
Released: 03-21-2012 Last Update: Never Installs: 148
Re-useable Code Translations  
No support by the author.

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.


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>

Screenshots

File Type: jpg screenshot.379.jpg (73.9 KB, 0 views)
File Type: jpg screenshot.381.jpg (70.9 KB, 0 views)
File Type: jpg screenshot.382.jpg (110.5 KB, 0 views)
File Type: jpg screenshot.383.jpg (90.1 KB, 0 views)
File Type: jpg screenshot.384.jpg (88.3 KB, 0 views)
File Type: jpg screenshot.385.jpg (87.3 KB, 0 views)
File Type: jpg screenshot.386.jpg (77.5 KB, 0 views)

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.
14 благодарности(ей) от:
+buG, BCP Hung, BirdOPrey5, Bowlsworld, davut_c20, Dr.osamA, dwx, eTiKeT?, fxdigi-cash, iBaker, regitbull, Ricsca, Taurus1

Comments
  #52  
Old 10-23-2012, 03:54 AM
gariksher gariksher is offline
 
Join Date: Feb 2011
Location: Russia
Posts: 19
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thank you!
Mark as Installed.
Reply With Quote
  #53  
Old 10-28-2012, 07:42 PM
cuphongle cuphongle is offline
 
Join Date: Jul 2005
Posts: 224
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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

thanks
Reply With Quote
  #54  
Old 01-04-2013, 09:36 PM
joerns joerns is offline
 
Join Date: Feb 2005
Posts: 23
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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
Attached Images
File Type: png Breadcrumb.png (111.7 KB, 0 views)
Reply With Quote
  #55  
Old 01-04-2013, 10:38 PM
JamalFree JamalFree is offline
 
Join Date: Dec 2012
Posts: 41
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thank you !!! Very nice
Reply With Quote
  #56  
Old 01-15-2013, 10:55 PM
Lpspider Lpspider is offline
 
Join Date: Oct 2005
Posts: 164
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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

They are < instead of >. Tips?
Attached Images
File Type: png Screen Shot 2013-01-15 at 6.01.39 PM.png (20.3 KB, 0 views)
Reply With Quote
  #57  
Old 01-29-2013, 12:43 PM
badbob1337 badbob1337 is offline
 
Join Date: Oct 2012
Posts: 9
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

tested on 4.2.0. buggy.
Reply With Quote
  #58  
Old 03-11-2013, 02:19 AM
AnthemToGod AnthemToGod is offline
 
Join Date: Aug 2008
Posts: 4
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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-top2px;
    
overflowhidden;
    
clearboth;
}
.
breadcrumb {
    
positionrelative;
    
font11px 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};
    
overflowhidden;
}
.
breadcrumb .crust {
    
displayblock;
    
floatleft;
    
positionrelative;
}
.
breadcrumb .crust:first-child a.crumb {
    
padding-left13px;
    -
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-decorationnone;
    
background-color#f1f1f1; /* this is the background color of the CRUMBS, ie: the links */
    
padding0 10px 0 23px;
    
border-bottom1px/* 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;
    
outline0 none;
    -
moz-outline-style0 none;
    
displayblock;
    
line-height22px;
    
_border-bottomnone;
    
color:#417394; /* this is the color of the links in the crumbs */
    
text-decoration:none;
}
.
breadcrumb .crust b.lastcrumb {
    
backgroundtransparent none;
    
color#3e3e3e; /* this is the color of the last crumb, ie: the final destination */
    
font-weightbold;
}
.
breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {
    
line-height22px;
}
.
breadcrumb .crust .arrow {
    
border12px solid transparent;
    
border-right1px none black;
    
border-left#c1c1c1; /* this is the _background_ color of the "arrow" */
    
border-left-width12px !important;
    
border-left-stylesolid !important;
    
displayblock;
    
positionabsolute;
    
right: -12px;
    
top: -1px;
    
z-index50;
    
width0px;
    
height0px;
}
.
breadcrumb .crust .arrow span {
    
border12px solid transparent;
    
border-right1px none black;
    
border-left-color#f1f1f1; /* this is the border color of the "arrow" */
    
displayblock;
    
positionabsolute;
    
left: -13px;
    
top: -12px;
    
z-index51;
    
white-spacenowrap;
    
overflowhidden;
    
text-indent9999px;
    
width0px;
    
height0px;
}
.
breadcrumb .refresh:hover background-position0px -16px; }
.
breadcrumb .crust:last-child a.crumb font-weightbold; }
.
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 */

Reply With Quote
2 благодарности(ей) от:
blackberry, fxdigi-cash
  #59  
Old 07-09-2013, 11:17 AM
DemOnstar's Avatar
DemOnstar DemOnstar is offline
 
Join Date: Dec 2012
Posts: 859
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

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

Screen shots would be nice.

Thanks.....
Reply With Quote
  #60  
Old 07-09-2013, 10:25 PM
final kaoss final kaoss is offline
 
Join Date: Apr 2006
Posts: 1,314
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

There are screenshots, just look at the attachments.
Reply With Quote
  #61  
Old 07-12-2013, 07:30 AM
ahobilam's Avatar
ahobilam ahobilam is offline
 
Join Date: Aug 2011
Location: Chennai, India
Posts: 128
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Hi
It is great for my forum 4.2.1
thank you
given 5*
See the breadcrumb below:
Reply With Quote
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:54 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.08166 seconds
  • Memory Usage 2,423KB
  • Queries Executed 28 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (5)bbcode_code
  • (1)bbcode_php
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (4)navbar_link
  • (120)option
  • (1)pagenav
  • (1)pagenav_curpage
  • (3)pagenav_pagelink
  • (11)post_thanks_box
  • (15)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (2)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (9)postbit_attachment
  • (11)postbit_onlinestatus
  • (11)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.php 

Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_postinfo_query
  • fetch_postinfo
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • fetch_musername
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • post_thanks_function_fetch_thanks_bit_start
  • post_thanks_function_show_thanks_date_start
  • post_thanks_function_show_thanks_date_end
  • post_thanks_function_fetch_thanks_bit_end
  • post_thanks_function_fetch_post_thanks_template_start
  • post_thanks_function_fetch_post_thanks_template_end
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_attachment
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • pagenav_page
  • pagenav_complete
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete