XF 1.2 Editing Footer

[MajesticMonkey]

Hey there everyone,
After a short hiatus I am back and slowly learning my way around xF 1.2 (wasn't here when I took my leave).

I am attempting to create a bigger and better footer that is more suited to my website however haven't had much luck.

Is someone able to give me a heads up on how they think the footer is created on this website:
http://www.adminforums.org/

Which uses xF.

I like the columns in the footer with the hover effect, and love the idea of having an image at the bottom that stretches across the four columns.

Any assistance you guys could provide would be greatly appreciated.

 

[Lisa]

This will give you the bare bones of something to mess with (it's early so will definitely need tweaking!)

Add at the bottom of your footer template (or before <div class="footerLegal">, depending on how you want to style it)

<div id="largefootercontainer">
<div class="largefooter">
<div class="footercol1">
<h5>Column 1</h5>
<!--- The First Column  -->
<p>This is random text just to show how it looks in here.</p>
<p><a href="http://discussionjunkies.com">This is a link</a></p>

</div>
<div class="footercol2">
<h5>Column 2</h5>
<!--- The Second Column  -->
  <p>This is random text just to show how it looks in here.</p>
<p><a href="http://discussionjunkies.com">This is a link</a></p>
</div>
<div class="footercol3">
<h5>Column 3</h5>
<!--- The Third Column  -->
  <p>This is random text just to show how it looks in here.</p>
<p><a href="http://discussionjunkies.com">This is a link</a></p>
</div>
<div class="footercol4">
<h5>Column 4</h5>
<!--- The Fourth Column  -->
  <p>This is random text just to show how it looks in here.</p>
<p><a href="http://discussionjunkies.com">This is a link</a></p>
</div>


</div>
</div>

Then in EXTRA.css add

  /* LARGE FOOTER */

  #largefooter {
    border-top:1px solid #ccc;
    font: 15px Helvetica,serif;
    line-height:22px;
    background: #1a1a1a; /* Change this to change the footer background... IE an Image: "url(urltoimagehere) repeat-x;" */
    height:320px; /* If you change this value, be sure to change the footer's height as well as the column's height. */
}
.largefootercontainer {
width: 950px;
height: 310px; /* If you change this value, be sure to change the footer column's height as well */
margin: 0 auto;
}
.footercol1 {
float: left;
width: 220px;
margin-top: 15px;
margin-right: 15px;
margin-left: 10px;
height: 280px;
}
.footercol1 h5, .footercol2 h5,.footercol3 h5,.footercol4 h5 {
color: #FFF;
font-size: 16px;
text-align: left;
font-variant: small-caps;
font-family: Arial;
margin:0px;
padding-bottom: 5px;
}
/* This controls how the large footer's regular text looks - Feel free to change the colours/font family */
.footercol1 p, .footercol2 p,.footercol3 p,.footercol4 p {
color: #FFF;
font-size: 12px;
text-align: left;
font: 14px Helvetica,serif;
line-height:22px;
margin:0px;
padding-bottom: 5px;
}

/* This controls how column 2's list items hyperlinks look as well as column 4's hyperlinks - Feel free to change the colours/font family */
.footercol2 ul li a, .footercol4 a {
color: #fff;
font-size: 12px;
text-align: left;
font: 14px Helvetica,serif;
line-height:22px;
margin:0px;
padding-bottom: 5px;
}
/* This controls how the large footer's hyperlinks look - Feel free to change the colours/font family */
.footercol2 ul {
color: #EEEEEE;
}
.footercol2 {
float: left;
width: 220px;
margin-top: 15px;
margin-right: 15px;
height: 280px;
}
.footercol3 {
float: left;
width: 220px;
margin-top: 15px;
margin-right: 15px;
height: 280px;
}
.footercol4 {
float: left;
width: 220px;
margin-top: 15px;
height: 280px;
}

Edit colours, sizes, etc as required.

 

[MajesticMonkey]

Love you @Azhria Lilu will add this straight away and start work on it.

 

[Lisa]

You're welcome Yell, if you want some help.

 

[BigBass]

This is going to sound really stupid, but I just cant seem to get the Columns centered. Any help would be appreciated.