Footer Like Xenforo?

DRE · May 26, 2012

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.

Jake Bunce · May 27, 2012

I pulled the code from the source of this site:

Admin CP -> Appearance -> Templates -> PAGE_CONTAINER

Add the red code:

Rich (BB 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)

Jake Bunce · May 27, 2012

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.

DRE · May 27, 2012

lol thanks

DRE · May 28, 2012

I am using this now instead of doing all that. http://xenforo.com/community/resources/lms-footer-pie-xenfácil.57/

I just need to figure out how to lower the footer so that it reaches closer to the new footer I installed.

Adam Howard · Jul 25, 2012

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>

Adam Howard · Jul 25, 2012

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

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

Regina Ortega · Mar 14, 2013

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

oldzy · Mar 14, 2013

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

EQnoble · Mar 15, 2013

Instructions:

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

Regina Ortega · Mar 15, 2013

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

EQnoble · Mar 16, 2013

Regina Ortega said:
Sure, and how we get the footer in the xenforo homepage? with two buttons? (Buy Xen Foro Now! and Try a Demo)

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

AndreaMarucci · Nov 26, 2013

EQnoble said:
You literally only need to add another button setup

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?

Footer Like Xenforo?

DRE

Well-known member

Jake Bunce

Well-known member

Jake Bunce

Well-known member

DRE

Well-known member

DRE

Well-known member

Adam Howard

Well-known member

Adam Howard

Well-known member

Regina Ortega

Active member

oldzy

Active member

EQnoble

Well-known member

Attachments

Regina Ortega

Active member

EQnoble

Well-known member

Attachments

AndreaMarucci

Well-known member

Similar threads

We value your privacy