No announcement yet.

Custom Breadcrumbs Help Needed

  • Filter
  • Time
  • Show
Clear All
new posts

  • Custom Breadcrumbs Help Needed

    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=""][/URL=""]) 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=""][/URL=""]) no-repeat right 0; }
    #breadcrumbs a:hover { text-decoration:underline; }
    #breadcrumbs a.first-child { background:url([URL=""][/URL=""]) no-repeat 0 0; width:32px; padding:0; text-indent:-9999px; overflow:hidden; }
    #breadcrumbs a.last-child { background:url([URL=""][/URL=""]) 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}}
    <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:else />
    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.
    <div id="breadcrumbs"></div>

    Below are 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=""][/URL=""]

    Any help would be greatly appreciated.

    PS: I also see that the URL tags issue hasn't been resolved yet.

  • #2
    I have attached the desired results photo here since it didn't insert correctly on the original post.


    • #3
      The best place to ask for help with customizing your code is, the modification site.

      Please don't PM or VM me for support - I only help out in the threads.
      vBulletin Manual & vBulletin 4.0 Code Documentation (API)
      Want help modifying your vbulletin forum? Head on over to
      If I post CSS and you don't know where it goes, throw it into the additional.css template.

      W3Schools &lt;- awesome site for html/css help


      Related Topics