Register Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools
  #1  
Old 01 Mar 2013, 03:33
kingcruisers kingcruisers is offline
 
Join Date: Jan 2013
Need Help With Custom Breadcrumbs

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.
Reply With Quote
  #2  
Old 04 Mar 2013, 13:00
LifesGreatestGift's Avatar
LifesGreatestGift LifesGreatestGift is offline
 
Join Date: Jul 2009
maybe its just me but the background URLs in your CSS look jacked up.
__________________
If I have helped you, the least you could do is click the button to show your appreciation.
TheSecond.org - Because it is our right!
Reply With Quote
  #3  
Old 04 Mar 2013, 18:13
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
You posted in the vB5 forum, but seem to be using vb4 css. What version are you needing help with?
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #4  
Old 05 Mar 2013, 02:48
kingcruisers kingcruisers is offline
 
Join Date: Jan 2013
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; }
Reply With Quote
  #5  
Old 05 Mar 2013, 19:47
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: 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
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #6  
Old 08 Mar 2013, 03:09
kingcruisers kingcruisers is offline
 
Join Date: Jan 2013
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.
Reply With Quote
  #7  
Old 08 Mar 2013, 18:52
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: Lynne
Put the css in the css_additional.css template.
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
  #8  
Old 08 Mar 2013, 23:29
kingcruisers kingcruisers is offline
 
Join Date: Jan 2013
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.
Reply With Quote
  #9  
Old 09 Mar 2013, 19:54
Lynne's Avatar
Lynne Lynne is offline
 
Join Date: Sep 2004
Real name: 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.)
__________________
Former vBulletin.org Staff Member

Try a search before posting for help. Many users won't, and don't, help if the question has been answered several times before.
W3Schools -
Online vBulletin Manual
If I post some CSS and don't say where it goes, put it in the additional.css template.
I will NOT help via PM (you will be directed to post in the forums for help.)
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
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


New To Site? Need Help?

All times are GMT. The time now is 07:53.

Layout Options | Width: Wide Color: