MyBB Community Forums

tested using: IE, Opera, Firefox and Chrome

This is useful: Change Breadcrumbs to read "Home"

Screen:



Download this http://img689.imageshack.us/img689/8026/lightw.png and put in your images folder of mybb

in global.css of your blank theme

add:

.breadcrumb {
	font-size: 11px;
	background: rgb(240, 247, 252) url('images/lightw.png') repeat-x top;
	border: 1px solid rgb(165, 202, 228);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
        margin: 0;
        padding: 0;
}

.breadcrumb .crust {
	display: block;
	float: left;
	position: relative;
}

.breadcrumb .crust:first-child a.crumb {
	padding-left: 10px;
	-moz-border-radius-topleft:4px;
	-moz-border-radius-bottomleft:4px;
	-webkit-border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {
	text-decoration: none;
        background-color: rgb(240, 247, 252);
	padding: 0 10px 0 18px;
        border-bottom: 1px solid rgb(165, 202, 228);
	margin-bottom: -1px;
	outline: 0 none;
	-moz-outline-style: 0 none;
	display: block;
	line-height: 24px;
	_border-bottom: none;
	color: rgb(23, 96, 147);
	text-decoration: none;
}

.breadcrumb .crust b.lastcrumb {
	background: transparent none;
	font-weight: bold;
}

.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {
	line-height: 24px;
}

.breadcrumb .crust .arrow {
        border: 12px solid transparent;
        border-right: 1px none black;
        border-left-color: #a5cae4;
	display: block;
	position: absolute;
	right: -12px;
	top: 0px;
	z-index: 50;
	width: 0px;
	height: 0px;
}

.breadcrumb .crust .arrow span {
        border: 12px solid transparent;
        border-right: 1px none black;
        border-left-color: #f0f7fc;
	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: #d7edfc;
	text-decoration:none; 
}

.breadcrumb .crust:hover .arrow span { 
	border-left-color: #d7edfc;
}

in ACP > Templates & Style > Templates > Your Theme > Navigation Templates > nav of your template replace:

<fieldset class="breadcrumb"><span class="crumbs">{$nav}{$activesep}
<span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
{$activebit}</span></span></fieldset>

in ACP > Templates & Style > Templates > Your Theme > Navigation Templates > nav_bit of your template replace:

<span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="{$navbit['url']}" class="crumb" rel="up" itemprop="url">
			{$navbit['name']}
		</a>
		<span class="arrow">
			<span>&gt;</span>
		</span></span>{$sep}

in ACP > Templates & Style > Templates > Your Theme > Navigation Templates > nav_bit_active of your template replace:

<a href="{$navbit['url']}" class="crumb" rel="up" itemprop="url">
{$navbit['name']}
		</a>
		<span class="arrow">
			<span>&gt;</span>
		</span>

in ACP > Templates & Style > Templates > Your Theme > Navigation Templates > nav_sep of your template: blank
in ACP > Templates & Style > Templates > Your Theme > Navigation Templates > nav_sep_active of your template: blank

---

Bonus

if you want remove this

in ACP > Templates & Style > Templates > Your Theme > Navigation Templates > nav_bit of your template replace:

<span class="crust" itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="{$navbit['url']}" class="crumb" rel="up" itemprop="url">
			{$navbit['name']}
		</a>
		<span class="arrow">
			<span>&gt;</span>
		</span></span>

obrigado - thanks

awesome!

a demo?

(2012-05-14, 08:21 PM)Solstice Wrote: [ -> ]awesome!

a demo?

same of official xenforo forum
http://xenforo.com/community/

the image is not working?

(2012-05-19, 06:17 AM)pinoykaizen Wrote: [ -> ]the image is not working?

you say this?
http://img689.imageshack.us/img689/8026/lightw.png

for me work...

a great work bro, thanks

IIRC "XenForo" is a trademark, couldn't there be any problems?

(2012-05-20, 04:37 AM)Omar G. Wrote: [ -> ]IIRC "XenForo" is a trademark, couldn't there be any problems?

but this is based in Vbulletin tutorials...
http://www.vbulletin.org/forum/showthread.php?t=280518

(2012-05-20, 04:37 AM)Omar G. Wrote: [ -> ]IIRC "XenForo" is a trademark, couldn't there be any problems?

It's just based on their style breadcrumb, so really there wouldn't be any problems.