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

XF 1.2 Extending the Footer Background

Discussion in 'Styling and Customization Questions' started by Amaury, Feb 19, 2014.

  1. Amaury

    Amaury Well-Known Member

    How can I extend and move it down so it covers the copyright and Forum Rules link?

    Footer.png
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    Those elements are in a separate div - footerLegal.

    You will need to style that accordingly.
     
    Amaury likes this.
  3. Amaury

    Amaury Well-Known Member

    @Brogan

    Obviously, I would need to remove the radius from the bottom and left borders in the Main Container style property for the footer to make it look nice, but editing the footer template, would this be the correct method?

    Before (Default):
    Code:
    <xen:edithint template="footer.css" />
    
    <xen:hook name="footer">
    <div class="footer">
       <div class="pageWidth">
         <div class="pageContent">
           <xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
           <dl class="choosers">
             <xen:if is="{$canChangeStyle}">
               <dt>{xen:phrase style}</dt>
               <dd><a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a></dd>
             </xen:if>
             <xen:if is="{$canChangeLanguage}">
               <dt>{xen:phrase language}</dt>
               <dd><a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a></dd>
             </xen:if>
           </dl>
           </xen:if>
         
           <ul class="footerLinks">
           <xen:hook name="footer_links">
             <xen:if is="{$xenOptions.contactUrl.type} === 'default'">
               <li><a href="{xen:link 'misc/contact'}" class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:phrase contact_us}</a></li>
             <xen:elseif is="{$xenOptions.contactUrl.type} === 'custom'" />
               <li><a href="{$xenOptions.contactUrl.custom}" {xen:if {$xenOptions.contactUrl.overlay}, 'class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}"'}>{xen:phrase contact_us}</a></li>
             </xen:if>
             <li><a href="{xen:link help}">{xen:phrase help}</a></li>
             <xen:if is="{$homeLink}"><li><a href="{$homeLink}" class="homeLink">{xen:phrase home}</a></li></xen:if>
             <li><a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a></li>
             <li><a href="{xen:link forums/-/index.rss}" rel="alternate" class="globalFeed" target="_blank"
               title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}">{xen:phrase rss}</a></li>
           </xen:hook>
           </ul>
         
           <span class="helper"></span>
         </div>
       </div>
    </div>
    
    <div class="footerLegal">
       <div class="pageWidth">
         <div class="pageContent">
           <ul id="legal">
           <xen:hook name="footer_links_legal">
             <xen:if is="{$tosUrl}"><li><a href="{$tosUrl}">{xen:phrase terms_and_rules}</a></li></xen:if>
             <xen:if is="{$xenOptions.privacyPolicyUrl}"><li><a href="{$xenOptions.privacyPolicyUrl}">{xen:phrase privacy_policy}</a></li></xen:if>
           </xen:hook>
           </ul>
         
           <div id="copyright">{xen:phrase xenforo_copyright}</div>
           <xen:hook name="footer_after_copyright" />
       
           <xen:if is="{$debugMode}">
             <xen:if hascontent="true">
               <dl class="pairsInline debugInfo" title="{$controllerName}-&gt;{$controllerAction}{xen:if $viewName, ' ({$viewName})'}">
               <xen:contentcheck>
                 <xen:if is="{$page_time}"><dt>{xen:phrase timing}:</dt> <dd><a href="{$debug_url}" rel="nofollow">{xen:phrase x_seconds, 'time={xen:number $page_time, 4}'}</a></dd></xen:if>
                 <xen:if is="{$memory_usage}"><dt>{xen:phrase memory}:</dt> <dd>{xen:phrase x_mb, 'size={xen:number {xen:calc "{$memory_usage} / 1024 / 1024"}, 3}'}</dd></xen:if>
                 <xen:if is="{$db_queries}"><dt>{xen:phrase db_queries}:</dt> <dd>{xen:number {$db_queries}}</dd></xen:if>
               </xen:contentcheck>
               </dl>
             </xen:if>
           </xen:if>
         
           <span class="helper"></span>
         </div>
       </div> 
    </div>
    </xen:hook>
    After:
    Code:
    <xen:edithint template="footer.css" />
    
    <xen:hook name="footer">
    <div class="footer">
       <div class="pageWidth">
         <div class="pageContent">
           <xen:if is="{$canChangeStyle} OR {$canChangeLanguage}">
           <dl class="choosers">
             <xen:if is="{$canChangeStyle}">
               <dt>{xen:phrase style}</dt>
               <dd><a href="{xen:link 'misc/style', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase style_chooser}" rel="nofollow">{$visitorStyle.title}</a></dd>
             </xen:if>
             <xen:if is="{$canChangeLanguage}">
               <dt>{xen:phrase language}</dt>
               <dd><a href="{xen:link 'misc/language', '', 'redirect={$requestPaths.requestUri}'}" class="OverlayTrigger Tooltip" title="{xen:phrase language_chooser}" rel="nofollow">{$visitorLanguage.title}</a></dd>
             </xen:if>
           </dl>
           </xen:if>
         
           <ul class="footerLinks">
           <xen:hook name="footer_links">
             <xen:if is="{$xenOptions.contactUrl.type} === 'default'">
               <li><a href="{xen:link 'misc/contact'}" class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">{xen:phrase contact_us}</a></li>
             <xen:elseif is="{$xenOptions.contactUrl.type} === 'custom'" />
               <li><a href="{$xenOptions.contactUrl.custom}" {xen:if {$xenOptions.contactUrl.overlay}, 'class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}"'}>{xen:phrase contact_us}</a></li>
             </xen:if>
             <li><a href="{xen:link help}">{xen:phrase help}</a></li>
             <xen:if is="{$homeLink}"><li><a href="{$homeLink}" class="homeLink">{xen:phrase home}</a></li></xen:if>
             <li><a href="{$requestPaths.requestUri}#navigation" class="topLink">{xen:phrase go_to_top}</a></li>
             <li><a href="{xen:link forums/-/index.rss}" rel="alternate" class="globalFeed" target="_blank"
               title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}">{xen:phrase rss}</a></li>
           </xen:hook>
           </ul>
         
           <span class="helper"></span>
         </div>
       </div>
    <div class="footerLegal">
       <div class="pageWidth">
         <div class="pageContent">
           <ul id="legal">
           <xen:hook name="footer_links_legal">
             <xen:if is="{$tosUrl}"><li><a href="{$tosUrl}">{xen:phrase terms_and_rules}</a></li></xen:if>
             <xen:if is="{$xenOptions.privacyPolicyUrl}"><li><a href="{$xenOptions.privacyPolicyUrl}">{xen:phrase privacy_policy}</a></li></xen:if>
           </xen:hook>
           </ul>
         
           <div id="copyright">{xen:phrase xenforo_copyright}</div>
           <xen:hook name="footer_after_copyright" />
       
           <xen:if is="{$debugMode}">
             <xen:if hascontent="true">
               <dl class="pairsInline debugInfo" title="{$controllerName}-&gt;{$controllerAction}{xen:if $viewName, ' ({$viewName})'}">
               <xen:contentcheck>
                 <xen:if is="{$page_time}"><dt>{xen:phrase timing}:</dt> <dd><a href="{$debug_url}" rel="nofollow">{xen:phrase x_seconds, 'time={xen:number $page_time, 4}'}</a></dd></xen:if>
                 <xen:if is="{$memory_usage}"><dt>{xen:phrase memory}:</dt> <dd>{xen:phrase x_mb, 'size={xen:number {xen:calc "{$memory_usage} / 1024 / 1024"}, 3}'}</dd></xen:if>
                 <xen:if is="{$db_queries}"><dt>{xen:phrase db_queries}:</dt> <dd>{xen:number {$db_queries}}</dd></xen:if>
               </xen:contentcheck>
               </dl>
             </xen:if>
           </xen:if>
         
           <span class="helper"></span>
         </div>
       </div> 
    </div>
    </div>
    </xen:hook>
    Result:
    Footer.png
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    if it works, then yes ;)
     
    Amaury likes this.

Share This Page