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

Footer Like Xenforo?

Discussion in 'Styling and Customization Questions' started by DRE, May 26, 2012.

  1. DRE

    DRE Well-Known Member

    How do ai make a footer like xenforo.com? I've tried lms addon but it doesn't look right on my site. I basically just need a template and I can figure it out from there.
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I pulled the code from the source of this site:

    Admin CP -> Appearance -> Templates -> PAGE_CONTAINER

    Add the red code:

    Code:
    <!DOCTYPE html>
    <html id="XenForo" lang="{$visitorLanguage.language_code}" dir="{$visitorLanguage.text_direction}" class="Public {xen:if {$visitor.user_id}, 'LoggedIn', 'LoggedOut'} {xen:if {$sidebar}, 'Sidebar', 'NoSidebar'}" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
    <xen:hook name="page_container_head">
    	<meta charset="utf-8" />
    	<xen:if is="{$requestPaths.fullBasePath}">
    		<base href="{$requestPaths.fullBasePath}" />
    		<script><xen:comment>/* Chrome bug and for Google cache */</xen:comment>
    			var _b = document.getElementsByTagName('base')[0], _bH = "{xen:jsescape $requestPaths.fullBasePath}";
    			if (_b && _b.href != _bH) _b.href = _bH;
    		</script>
    	</xen:if>
    
    	<title><xen:if is="{$title}">{xen:raw $title} | {$xenOptions.boardTitle}<xen:else />{$xenOptions.boardTitle}</xen:if></title>
    	
    	<noscript><style>.JsOnly { display: none !important; }</style></noscript>
    	<link rel="stylesheet" href="css.php?css=xenforo,form,public&amp;style={xen:urlencode $_styleId}&amp;dir={$visitorLanguage.text_direction}&amp;d={$visitorStyle.last_modified_date}" />
    	<!--XenForo_Require:CSS-->	
    	{xen:helper ignoredCss, {$visitor.ignoredUsers}}
    
    	<xen:include template="google_analytics" />
    	<xen:include template="page_container_js_head" />
    	
    	<link rel="alternate" type="application/rss+xml" title="{xen:phrase rss_feed_for_x, 'title={$xenOptions.boardTitle}'}" href="{xen:link forums/-/index.rss}" />
    	<xen:if is="{$pageDescription.content} AND !{$pageDescription.skipmeta} AND !{$head.description}"><meta name="description" content="{xen:string wordTrim, {xen:helper stripHtml, {xen:raw $pageDescription.content}}, 200}" /></xen:if>
    	<xen:if is="{$head}"><xen:foreach loop="$head" value="$headElement">{xen:raw $headElement}</xen:foreach></xen:if>
    </xen:hook>
    </head>
    
    <body{xen:if {$bodyClasses}, ' class="{$bodyClasses}"'}>
    <xen:hook name="body">
    
    <div class="wrapperXfSite">
    
    <xen:if is="{$visitor.is_moderator} || {$visitor.is_admin}">
    	<xen:include template="moderator_bar" />
    <xen:elseif is="!{$visitor.user_id} && !{$hideLoginBar}" />
    	<xen:include template="login_bar" />
    </xen:if>
    
    <div id="headerMover">
    	<div id="headerProxy"></div>
    
    <div id="content" class="{$contentTemplate}">
    	<div class="pageWidth">
    		<div class="pageContent">
    			<!-- main content area -->
    			
    			<xen:hook name="page_container_content_top" />
    			
    			<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 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" />
    					
    						<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" />
    						
    		</div>
    	</div>
    </div>
    
    <header>
    	<xen:include template="header" />
    	<xen:edithint template="navigation" />
    	<xen:edithint template="search_bar" />
    </header>
    
    </div>
    
    <footer>
    	<xen:include template="footer" />
    </footer>
    
    <xen:include template="page_container_js_body" />
    
    <xen:if is="{$cronLink}"><img src="{$cronLink}" width="1" height="1" alt="" style="display: none" /></xen:if>
    
    <div class="footerXfSite">
    	<div class="pageWidth">
    		<div class="content upper">
    			<a href="http://xenforo.com/" class="logo"><img src="styles/default/xenforo/logo.png" alt="XenForo logo" /></a>
    			
    			<div class="social">
    				<a href="http://www.facebook.com/xenforo" target="_blank"
    					title="Join XenForo on Facebook"
    					class="facebook Tooltip"					
    					data-tipclass="social"
    					data-position="top left"
    					data-offsetx="232"
    					data-offsety="-8">Facebook</a>
    				<a href="http://www.twitter.com/xenforo" target="_blank"
    					title="Follow @XenForo on Twitter"
    					class="twitter Tooltip"
    					data-tipclass="social"
    					data-position="top left"
    					data-offsetx="232"
    					data-offsety="-8">Twitter</a>
    			</div>
    			
    			<div class="sales">
    				<a href="http://xenforo.com/community/forums/xenforo-pre-sales-and-feedback.5/" class="salesLink left">Pre-Sales Questions</a>
    				<a href="http://xenforo.com/purchase" class="buyCta"><strong class="inner">Buy XenForo Now!</strong></a>
    				<a href="http://xenforo.com/customers" class="salesLink right">Customer Area</a>
    			</div>
    		</div>
    		<div class="content lower">			
    			<div class="links left">
    				<nav>
    					<a href="http://xenforo.com" rel="home">Home</a>	
    					<a href="http://xenforo.com/community/forums/announcements">News</a>
    					<a href="http://xenforo.com/community/search/">Search</a>
    					<a href="http://xenforo.com/contact" class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">Contact Us</a>
    					<a href="http://xenforo.com/demo/">Admin Demo</a>
    					<a href="http://xenforo.com/help/" rel="help">Help</a>
    					<a href="http://xenforo.com/license-agreement" rel="license">License Agreement</a>
    				</nav>
    			</div>
    			
    			<div class="links right">
    				<a>XenForo Ltd. is registered in England and Wales with company number 07294282.</a>
    			</div>
    		</div>
    	</div>
    </div>
    
    </div>
    <script type="text/javascript">$(function() { $('html').css('background', 'black'); });</script>
    
    </xen:hook>
    </body>
    </html>
    
    (continued in next post, character limit)
     
    MichaelDance, Adam Howard and 8thos like this.
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Admin CP -> Appearance -> Templates -> EXTRA.css

    Add this code:

    Code:
    .wrapperXfSite{background-color:rgb(240,240,240);}#content
    .pageWidth{min-height:450px !important}.footerXfSite{border-top:5px solid #176093;background:#032A46 url('styles/default/xfcomforums/forum-footer.png') repeat-x bottom;overflow:hidden;font-size:11px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;margin-top:25px;padding-bottom:50px;padding-top:10px}.footerXfSite,
    .footerXfSite
    a{color:#a5cae4}.footerXfSite
    .content{margin:10px
    0;background:url(rgba.php?r=43&g=72&b=92&a=102);background:rgba(43, 72, 92, 0.4);_filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#662B485C,endColorstr=#662B485C);border:1px
    solid rgb(43, 72, 92);border:1px
    solid rgba(43, 72, 92, 0.45);_border:1px
    solid rgb(43, 72, 92);border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;overflow:hidden;zoom:1}.footerXfSite
    .logo{display:block;margin-left: -8px;float:left}.footerXfSite .logo
    img{display:block;padding:7px
    10px}.footerXfSite
    .strapline{display:none;font-size:10px;font-weight:bold;margin-top: -5px}.footerXfSite
    .sales{display:block;text-align:center}.footerXfSite
    .buyCta{display:inline-block;border:solid 2px #176093;box-shadow:2px 2px 5px #032A46;-webkit-box-shadow:2px 2px 5px #032A46;-moz-box-shadow:2px 2px 5px #032A46;-khtml-box-shadow:2px 2px 5px #032A46;padding:1px;border-radius:7px;-webkit-border-radius:7px;-moz-border-radius:7px;-khtml-border-radius:7px;margin:7px
    auto;width:150px;text-align:center}.footerXfSite .buyCta
    .inner{display:block;background:#176093 url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x center -7px;color:#d7edfc;height:20px;line-height:20px;padding:5px
    0;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;font-size:14px;font-weight:bold}.footerXfSite .buyCta:hover{text-decoration:none;border-color:#d7edfc}.footerXfSite .buyCta:hover
    .inner{background-color:#65a5d1;color:#f0f7fc;text-shadow:0 0 0 transparent, 0 1px 3px #032A46}.footerXfSite
    .social{float:right;padding:5px
    10px;height:40px;width:112px}.footerXfSite .social
    a{display:block;margin-bottom:8px;line-height:16px;padding-right:20px;background:transparent url('styles/default/xfcomforums/forum-footer.png') no-repeat right 0px;text-align:right}.footerXfSite .social
    a.twitter{background-position:right -16px}.footerXfSite
    .content{overflow:hidden;zoom:1;padding:2px
    5px}.footerXfSite
    .links.left{float:left}.footerXfSite
    .links.right{float:right}.footerXfSite .links a,
    .footerXfSite .links
    label{display:block;float:left}.footerXfSite
    .salesLink{display:inline-block;width:110px}.footerXfSite
    .salesLink.left{text-align:right}.footerXfSite
    .salesLink.right{text-align:left}.footerXfSite .links a,
    .footerXfSite .links label,
    .footerXfSite
    .salesLink{padding:3px
    5px}.footerXfSite .links a[href]:hover,
    .footerXfSite .links label:hover,
    .footerXfSite .salesLink:hover{text-decoration:none;background-color:#176093;color:#d7edfc;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-khtml-border-radius:3px}.xenTooltip.social{width:110px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box}.xenTooltip.social
    .arrow{left:auto;right:9px}
    
    This is just a straight copy paste from the source code.
     
  4. DRE

    DRE Well-Known Member

    lol thanks
     
  5. DRE

    DRE Well-Known Member

  6. Adam Howard

    Adam Howard Well-Known Member

    Word of advise for those who find this as I did through Google

    In Extra

    That 1st line...

    Code:
    .wrapperXfSite{background-color:rgb(240,240,240);}#content
    Change the color to clear or you'll end up with a white background (assuming if your skin design isn't white)

    Code:
    .wrapperXfSite{background-color:clear;}#content
    The end of PAGE_CONTAINER

    Code:
    <script type="text/javascript">$(function() { $('html').css('background', 'black'); });</script>
    Should also turn clear (or you'll end up with a black background)

    Code:
    <script type="text/javascript">$(function() { $('html').css('background', 'clear'); });</script>
     
    MichaelDance likes this.
  7. Adam Howard

    Adam Howard Well-Known Member

    Final edit or change you need to make is in EXTRA

    styles/default/xfcomforums/forum-footer.png

    Change that to fit your needs

    XenForo uses this one
    [​IMG]

    But I much prefer this one of my own making (I also dislike Facebook)

    forum-footer.png
     
  8. Regina Ortega

    Regina Ortega Active Member

    Hello, i want to add this to my forum , but i dont get the black ending and the facebook and twitter images, how do i do :(?

    Nvm, already done, at EXTRA.CSS the template used had another name :p
     
  9. oldzy

    oldzy Active Member

    Added the footer per above. Mine does not stay fixed/static to the bottom of the screen though.
     
  10. EQnoble

    EQnoble Well-Known Member

    Instructions:

    1. Download and unzip the archive
    2. Upload the contents of the UPLOAD folder to your forum root
    3. Install from xml
    4. Edit bigfoot_bigfoot and bigfoot_bigfoot.css templates as you see fit to match your site.
     

    Attached Files:

    Robert F Schmitz likes this.
  11. Regina Ortega

    Regina Ortega Active Member

    Sure, and how we get the footer in the xenforo homepage? with two buttons? (Buy Xen Foro Now! and Try a Demo)
     
  12. EQnoble

    EQnoble Well-Known Member

    You literally only need to add another button setup the same way immediately following the first button.


    You can open template: bigfoot_bigfoot

    copy this line and paste it right below where you copied it from:
    Code:
                    <a class="buyCta" href="http://xenforo.com/purchase"><strong class="inner">Buy XenForo Now!</strong></a>
    then edit that line to read:
    Code:
                    <a class="buyCta" href="http://xenforo.com/demo/"><strong class="inner">Try A Demo</strong></a>


    I also added this to the bigfoot_bigfoot.css template as I forgot to add this before:
    Code:
    .footerBigfoot .buyCta:hover {
        text-decoration:none;
    }
     
    .footerBigfoot .buyCta:hover .inner {
        background-color:#65A5D1;
        color:#F0F7FC;
        text-shadow:0 0 0 transparent, 0 1px 3px #032A46;
    }

    Or if you don't want to go through all of that I have the fixes applied here....
     

    Attached Files:

    CyclingTribe and Regina Ortega like this.
  13. AndreaMarucci

    AndreaMarucci Well-Known Member

    I've installed this one and it's very good. only problem is that is not responsive. There's a way to make it responsive or maybe to hide it if you're on mobile?
     

Share This Page