Need Help With Custom Breadcrumbs

[kingcruisers]

I am seeking help with the html code within the header template to customize the breadcrumbs. I have already inserted the following into additional.css:

#breadcrumbs { display:block; background:url([URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-grad.gif"]http://kingcruisers.com/images/css/b...crumb-grad.gif[/URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-grad.gif"]) repeat-x 0 0; height:23px; overflow:hidden; float:left; }
#breadcrumbs a { font-size:12px; color:#105598; height:23px; line-height:23px; vertical-align:middle; padding:0 20px 0 10px; display:block; float:left; background:url([URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-mid.gif"]http://kingcruisers.com/images/css/b...dcrumb-mid.gif[/URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-mid.gif"]) no-repeat right 0; }
#breadcrumbs a:hover { text-decoration:underline; }
#breadcrumbs a.first-child { background:url([URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-home.gif"]http://kingcruisers.com/images/css/b...crumb-home.gif[/URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-home.gif"]) no-repeat 0 0; width:32px; padding:0; text-indent:-9999px; overflow:hidden; }
#breadcrumbs a.last-child { background:url([URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-end.gif"]http://kingcruisers.com/images/css/b...dcrumb-end.gif[/URL="http://kingcruisers.com/images/css/breadcrumbs/breadcrumb-end.gif"]) no-repeat right 0; }

This is the html that needs to be edited in the header template. I just need to know what needs to be changed to get the desired results.

<vb:if condition="$page['crumbs']">
<ul id="breadcrumbs" class="clearfix">
<li class="crumb ellipsis"><a class="crumb-link" href="{vb:raw baseurl}/">{vbhrase home}</a></li>
<vb:each from="page.crumbs" value="crumb">
<vb:if condition="isset($crumb['phrase']) AND !empty($crumb['phrase'])">
{vb:set crumbTitle, {vb:rawphrase {vb:raw crumb.phrase}}}
<vb:else />
<vb:comment><!-- Since we don't want phrase placeholders to be escaped, we escape user titles here. --></vb:comment>
{vb:set crumbTitle, {vb:raw crumb.title}}
</vb:if>
<li class="vb-icon separator"></li>
<li class="crumb ellipsis"><vb:if condition="$crumb['url']"><a class="crumb-link" href="{vb:raw baseurl}{vb:raw crumb.url}">{vb:raw crumbTitle}</a><vb:else />{vb:raw crumbTitle}</vb:if></li>
</vb:each>
</ul>
<vb:else />
<vb:comment>
We still need the #breadcrumbs element (even though empty) to avoid having multiple CSS rules to deal with different scenarios
where adjacent elements - breadcrumbs, channel-subtabbar, notices, announcements are available, visible, hidden or empty.
Used div instead of ul to prevent having an empty ul which is invalid in XHTML 1.0 Strict (though valid in HTML5).
Though we are currently using HTML5 doctype, using an emtpy div will ensure that this will validate even if we change the doctype in the future.
</vb:comment>
<div id="breadcrumbs"></div>
</vb:if>

Below is an image of the desired results achieved from the additional.css


I am running into trouble getting the last-child to end with /breadcrumb-end.gif rather than /breadcrumb-mid.gif. You can see how it's currently working at [URL="http://www.kingcruisers.com/roll-calls"]http://www.kingcruisers.com/roll-calls[/URL="http://www.kingcruisers.com/roll-calls"]

Any help would be greatly appreciated.

[LifesGreatestGift]

maybe its just me but the background URLs in your CSS look jacked up.

[Lynne]

You posted in the vB5 forum, but seem to be using vb4 css. What version are you needing help with?

[kingcruisers]

I am using vb5 5.0. I pasted the additional.css here and it appears that the URL tags have been added. I am more so needing help on the code for the header template to display the css.
I will try to repaste the additional.css below:

#breadcrumbs { display:block; background:url(http://kingcruisers.com/images/css/b...crumb-grad.gif) repeat-x 0 0; height:23px; overflow:hidden; float:left; }
#breadcrumbs a { font-size:12px; color:#105598; height:23px; line-height:23px; vertical-align:middle; padding:0 20px 0 10px; display:block; float:left; background:url(http://kingcruisers.com/images/css/b...dcrumb-mid.gif) no-repeat right 0; }
#breadcrumbs a:hover { text-decoration:underline; }
#breadcrumbs a.first-child { background:url(http://kingcruisers.com/images/css/b...crumb-home.gif) no-repeat 0 0; width:32px; padding:0; text-indent:-9999px; overflow:hidden; }
#breadcrumbs a.last-child { background:url(http://kingcruisers.com/images/css/b...dcrumb-end.gif) no-repeat right 0; }

[Lynne]

What is it that you think is wrong? Is it the color after the > ? If so, that is in your image - http://kingcruisers.com/images/css/b...dcrumb-mid.gif

[kingcruisers]

I was needing help with how to insert the css into the header template. For example where in the header html for the breadcrumbs would I call on the /breadcrumb-end.gif so that it displays correctly.

Thanks.

[Lynne]

Put the css in the css_additional.css template.

[kingcruisers]

Yup...I did that already. I am needing help with the html of the header template to display the custom breadcrumbs.

This is the original header html:

<vb:if condition="$page['crumbs']">
<ul id="breadcrumbs" class="clearfix">
<li class="crumb ellipsis"><a class="crumb-link" href="{vb:raw baseurl}/">{vbhrase home}</a></li>
<vb:each from="page.crumbs" value="crumb">
<vb:if condition="isset($crumb['phrase']) AND !empty($crumb['phrase'])">
{vb:set crumbTitle, {vb:rawphrase {vb:raw crumb.phrase}}}
<vb:else />
<vb:comment><!-- Since we don't want phrase placeholders to be escaped, we escape user titles here. --></vb:comment>
{vb:set crumbTitle, {vb:raw crumb.title}}
</vb:if>
<li class="vb-icon separator"></li>
<li class="crumb ellipsis"><vb:if condition="$crumb['url']"><a class="crumb-link" href="{vb:raw baseurl}{vb:raw crumb.url}">{vb:raw crumbTitle}</a><vb:else />{vb:raw crumbTitle}</vb:if></li>
</vb:each>
</ul>

I have changed the header html but still need to know how to get the last breadcrumb to display the http://kingcruisers.com/images/css/b...dcrumb-mid.gif instead of http://kingcruisers.com/images/css/b...dcrumb-mid.gif. Also, it is not loading correctly on mobile and is causing problems with notices.

My edited header html that I need help with:

<vb:if condition="$page['crumbs']">
<ul id="breadcrumbs" class="clearfix">
<li class="crumb ellipsis"><a class="first-child" href="{vb:raw baseurl}/">{vbhrase home}</a></li>
<vb:each from="page.crumbs" value="crumb">
<vb:if condition="isset($crumb['phrase']) AND !empty($crumb['phrase'])">
{vb:set crumbTitle, {vb:rawphrase {vb:raw crumb.phrase}}}
<vb:else />
<vb:comment><!-- Since we don't want phrase placeholders to be escaped, we escape user titles here. --></vb:comment>
{vb:set crumbTitle, {vb:raw crumb.title}}
</vb:if>
<li class="crumb ellipsis"><vb:if condition="$crumb['url']"><a class="crumb-link" href="{vb:raw baseurl}{vb:raw crumb.url}">{vb:raw crumbTitle}</a><vb:else />{vb:raw crumbTitle}</vb:if></li>
</vb:each>
</ul>
</br></br></br>

Thanks for your help.

[Lynne]

Unfortunately, you don't know what the lastelement is going to be. You'd be better off having an image that is transparent on the right instead of having color and then color it through CSS when there is something on the right. (Perhaps... not really sure, but that is how I would go about it.)