Breadcrumb here how ?

3 Responses to Breadcrumb here how ?

1. admin says:

   It is not that hard
   
   in the navbar template find:

   <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>

   and replace it with:

   <div class="breadBoxTop">
     <fieldset class="breadcrumb">
        <ul class="crumbs">
          {vb:raw navbits.breadcrumb}
          {vb:raw navbits.lastelement}
     </fieldset>
   <br />
   </div>

   in the navbar_link template find:

   <vb:if condition="$show['breadcrumb']">
     <li class="navbit"><a href="{vb:raw nav_url}">{vb:raw nav_title}</a></li>
   <vb:else />
     <li class="navbit lastnavbit"><span>{vb:raw nav_title}</span></li>
   </vb:if>

   and replace it with:

   <vb:if condition="$show['breadcrumb']">
     <li class="crust">
       <a href="{vb:raw nav_url}" class="crumb"><span>{vb:raw nav_title}</span></a>
       <span class="arrow"><span>&gt;</span></span></li>
   <vb:else />
     <li class="crust">
       <p class="crumb">{vb:raw nav_title}</p>
       <span class="arrow"><span>&gt;</span></span></li>
   </ul>
   </vb:if>

   in additional.css add:

   /*------------------------------------------------------------------------------
   | #> Breadcrumb Xenforo Style by AdsenseExperts
   +-----------------------------------------------------------------------------*/
   .breadBoxTop { }
   .breadBoxTop .topCtrl { 
     margin-left: 5px; 
     float: right; 
     line-height: 24px; 
   }
   .breadcrumb { 
     font-size: 11px; 
     background: #F2F6F8 url('images/gradients/category-23px-light.png') repeat-x top; 
     border: 1px solid #A5CAE4; 
     border-radius: 5px; 
     -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
     -khtml-border-radius: 5px; 
     overflow: hidden; 
     zoom: 1; 
   }
   .breadcrumb .crust { 
     display: block; 
     float: left; 
     position: relative; 
     zoom: 1; 
   }
   .breadcrumb .crust a.crumb { 
     text-decoration: none; 
     background-color: #F2F6F8; 
     padding: 0 10px 0 18px; 
     margin-bottom: -1px; 
     border-bottom: 1px solid #A5CAE4; 
     outline: 0 none; 
     -moz-outline-style: 0 none; 
     display: block; 
     line-height: 24px; 
     _border-bottom: none; 
   }
   .breadcrumb .crust p.crumb { 
     text-decoration: none; 
     background-color: #F2F6F8; 
     padding: 0 10px 0 18px; 
     margin-bottom: -1px; 
     border-bottom: 1px solid #A5CAE4; 
     outline: 0 none; 
     -moz-outline-style: 0 none; 
     display: block; 
     line-height: 24px; 
     _border-bottom: none; 
   }
   .breadcrumb .crust:first-child a.crumb { 
     padding-left: 10px; 
     border-top-left-radius: 4px; 
     -webkit-border-top-left-radius: 4px;  
     -moz-border-radius-topleft: 4px; 
     -khtml-border-top-left-radius: 4px; 
     border-bottom-left-radius: 4px; 
     -webkit-border-bottom-left-radius: 4px; 
     -moz-border-radius-bottomleft: 4px; 
     -khtml-border-bottom-left-radius: 4px; 
   }
   .breadcrumb .crust:last-child a.crumb { 
     font-weight: normal; 
     -moz-border-radius-bottomleft:4px; 
     -moz-border-radius-topleft:4px; 
     padding-left:20px; 
     pointer-events: none; 
     cursor: default; 
     background-color: #F7F9FA; 
     color: #333333; 
   }
   .breadcrumb .crust:last-child p.crumb { 
     font-weight: normal; 
     -moz-border-radius-bottomleft:4px; 
     -moz-border-radius-topleft:4px; 
     padding-left:20px; 
     pointer-events: none; 
     cursor: default; 
     background-color: #F7F9FA; 
     color: #333333; 
   }
   .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: #F2F6F8; 
     display: block; 
     position: absolute; 
     left: -13px; 
     top: -12px; 
     z-index: 51; 
     white-space: nowrap; 
     overflow: hidden; 
     text-indent: 9999px; 
     width: 0px; 
     height: 0px; 
   }
   .breadcrumb .crust:hover:last-child a.crumb { 
     background-color: #F7F9FA; 
   }
   .breadcrumb .crust:hover a.crumb { 
     background-color: #d7edfc; 
   }
   .breadcrumb .crust:hover:last-child .arrow span { 
     border-left-color: #F7F9FA; 
   }
   .breadcrumb .crust:hover .arrow span { 
     border-left-color: #d7edfc; 
   }
   .breadcrumb .crust .arrow { 
     /* hide from IE6 */ _display: none; 
   }

   Done
   
   ps: I modified the CSS so often that this css could be an older version. But you can always use FireBug to see my current CSS and adapt it ;)

   Reply
2. synseal says:

   Thank you! that looks much better now.

   Reply
3. Dogs and things says:

   You're right,
   
   I had not really paid much atention to them but that's some good-looking breadcrumbs.

   Reply