1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 100% width for Breadcrumb

Discussion in 'Styling and Customization Questions' started by xf_phantom, Jul 2, 2013.

  1. xf_phantom

    xf_phantom Well-Known Member

    How can i give the breadcrumb 100% width, so that the sidebar starts UNDER the breadcrumb bar?


    sidebar.png
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Edit the template and move the breadcrumb above the sidebar content.
     
    xf_phantom likes this.
  3. Shelley

    Shelley Well-Known Member

    this may not be the best way so somebody might jump in here with a better solution.

    Go into template PAGE_CONTAINER and find the following

    Code:
          <xen:hook name="page_container_content_top" />
           <xen:hook name="page_container_breadcrumb_top">
                 <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                   <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                   <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                 </div>
                 </xen:hook>
    place it above

    Code:
    <xen:if is="{$sidebar}">
    
     
    xf_phantom likes this.
  4. xf_phantom

    xf_phantom Well-Known Member

    That's what i've done, but it's strange:D

    search for:
    Code:
    <xen:if is="{$sidebar}">
             <div class="mainContainer">
               <div class="mainContent"></xen:if>
                 
                 <xen:include template="ad_above_top_breadcrumb" />
                 
                 <xen:hook name="page_container_breadcrumb_top">
                 <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                   <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                   <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                 </div>
                 </xen:hook>
                 
                 <xen:include template="ad_below_top_breadcrumb" />
               
                 <!--[if lt IE 8]>
                   <p class="importantMessage">{xen:phrase you_are_using_out_of_date_browser_upgrade}</p>
                 <![endif]-->
    
                 <xen:hook name="page_container_notices">
                 <xen:include template="notices" />             
                 </xen:hook>
                 
                 <xen:hook name="page_container_content_title_bar">
                 <xen:if is="!{$noH1}">             
                   <!-- h1 title, description -->
                   <div class="titleBar">
                     {xen:raw $beforeH1}
                     <h1><xen:if
                       is="{$h1}">{xen:raw $h1}<xen:elseif
                       is="{$title}" />{xen:raw $title}<xen:else
                       />{$xenOptions.boardTitle}</xen:if></h1>
                     
                     <xen:if is="{$pageDescription.content}"><p id="pageDescription" class="muted {$pageDescription.class}">{xen:raw $pageDescription.content}</p></xen:if>
                   </div>
                 </xen:if>
                 </xen:hook>
                 
                 <xen:include template="ad_above_content" />
                 
                 <!-- main template -->
                 {xen:raw $contents}
                 
                 <xen:include template="ad_below_content" />
                 
                 <xen:if is="!{$visitor.user_id} && !{$hideLoginBar}">
                   <!-- login form, to be moved to the upper drop-down -->
                   <xen:include template="login_bar_form" />
                 </xen:if>
                 
               <xen:if is="{$sidebar}"></div>
             </div>
             
             <!-- sidebar -->
             <aside>
               <div class="sidebar">
                 <xen:hook name="page_container_sidebar">
                 <xen:include template="ad_sidebar_top" />
                 <xen:if is="!{$noVisitorPanel}"><xen:include template="sidebar_visitor_panel" /></xen:if>
                 {xen:raw $sidebar}
                 <xen:include template="ad_sidebar_bottom" />
                 </xen:hook>
               </div>
             </aside>
           </xen:if>
           
           <xen:hook name="page_container_breadcrumb_bottom">       
           <div class="breadBoxBottom"><xen:include template="breadcrumb" /></div>
           </xen:hook>
                 
           <xen:include template="ad_below_bottom_breadcrumb" />
    replace with
    Code:
    <xen:hook name="page_container_breadcrumb_bottom">       
           <div class="breadBoxBottom"><xen:include template="breadcrumb" /></div>
           </xen:hook>
    <xen:if is="{$sidebar}">
             <div class="mainContainer">
               <div class="mainContent"></xen:if>
                 
                 <xen:include template="ad_above_top_breadcrumb" />
                 
                 <xen:hook name="page_container_breadcrumb_top">
                 <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                   <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                   <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                 </div>
                 </xen:hook>
                 
                 <xen:include template="ad_below_top_breadcrumb" />
               
                 <!--[if lt IE 8]>
                   <p class="importantMessage">{xen:phrase you_are_using_out_of_date_browser_upgrade}</p>
                 <![endif]-->
    
                 <xen:hook name="page_container_notices">
                 <xen:include template="notices" />             
                 </xen:hook>
                 
                 <xen:hook name="page_container_content_title_bar">
                 <xen:if is="!{$noH1}">             
                   <!-- h1 title, description -->
                   <div class="titleBar">
                     {xen:raw $beforeH1}
                     <h1><xen:if
                       is="{$h1}">{xen:raw $h1}<xen:elseif
                       is="{$title}" />{xen:raw $title}<xen:else
                       />{$xenOptions.boardTitle}</xen:if></h1>
                     
                     <xen:if is="{$pageDescription.content}"><p id="pageDescription" class="muted {$pageDescription.class}">{xen:raw $pageDescription.content}</p></xen:if>
                   </div>
                 </xen:if>
                 </xen:hook>
                 
                 <xen:include template="ad_above_content" />
                 
                 <!-- main template -->
                 {xen:raw $contents}
                 
                 <xen:include template="ad_below_content" />
                 
                 <xen:if is="!{$visitor.user_id} && !{$hideLoginBar}">
                   <!-- login form, to be moved to the upper drop-down -->
                   <xen:include template="login_bar_form" />
                 </xen:if>
                 
               <xen:if is="{$sidebar}"></div>
             </div>
             
             <!-- sidebar -->
             <aside>
               <div class="sidebar">
                 <xen:hook name="page_container_sidebar">
                 <xen:include template="ad_sidebar_top" />
                 <xen:if is="!{$noVisitorPanel}"><xen:include template="sidebar_visitor_panel" /></xen:if>
                 {xen:raw $sidebar}
                 <xen:include template="ad_sidebar_bottom" />
                 </xen:hook>
               </div>
             </aside>
           </xen:if>
           
           
                 
           <xen:include template="ad_below_bottom_breadcrumb" />
    
    result:
    foo.png
     
  5. Shelley

    Shelley Well-Known Member

    Looks like you left the existing breadcrumb top in which would be the reason it's showing twice. it seems to work on my installation without issue.
     
  6. xf_phantom

    xf_phantom Well-Known Member

    no, the second one is the footer breadcrumb, which is now above the content too:/
    must have missed a div or something else
     
  7. Shelley

    Shelley Well-Known Member

    Oh right, Yeah you must have done since the bottom breadcrumb is displaying as it should on my installation.
     
  8. xf_phantom

    xf_phantom Well-Known Member

    My searchstring was wrong.

    if anybody else needs this, here's the code
    search
    Code:
    <xen:if is="{$sidebar}">
             <div class="mainContainer">
               <div class="mainContent"></xen:if>
                 
                 <xen:include template="ad_above_top_breadcrumb" />
                 
                 <xen:hook name="page_container_breadcrumb_top">
                 <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                   <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                   <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                 </div>
                 </xen:hook>
    
    replace
    Code:
    <xen:include template="ad_above_top_breadcrumb" />
                 
                 <xen:hook name="page_container_breadcrumb_top">
                 <div class="breadBoxTop {xen:if $topctrl, withTopCtrl}">
                   <xen:if is="{$topctrl}"><div class="topCtrl">{xen:raw $topctrl}</div></xen:if>
                   <xen:include template="breadcrumb"><xen:set var="$microdata">1</xen:set></xen:include>
                 </div>
                 </xen:hook>
    <xen:if is="{$sidebar}">
             <div class="mainContainer">
               <div class="mainContent"></xen:if>
     
    Andrej and Tracy Perry like this.
  9. erich37

    erich37 Well-Known Member

  10. xf_phantom

    xf_phantom Well-Known Member

    Tracy Perry and erich37 like this.
  11. erich37

    erich37 Well-Known Member

    I only searched for "breadbox" because I felt hungry ;)
     

Share This Page