add the following to your additional.css to control the layout and look of the items.
.main_wrap {
margin: 0 50px;
width: auto;
}
#body_footer {
background: #F2F2F2;
border-bottom: 1px solid #F8F8F8;
border-top: 1px solid #DDDDDD;
padding: 10px 0;
text-shadow: 0 0 0 transparent, 0 1px 0 #FFFFFF;
}
#contenttypeid .textbox, textarea, select {
border: 1px solid #DDDDDD;
}
.footer_select {
margin: 7px 10px 0 0;
}
.footer_copyright {
margin-top: 0;
text-align: right;
}
#footer_time .time {
color: #CCCCCC;
}
.footer_time {
padding: 20px 0 10px;
}
.footer {
float: left;
margin-top: 0;
padding: 0;
text-align: left;
}
.footer_links {
margin: 0;
}
.footer_links li {
margin-left: 0;
margin-right: 7px;
padding: 0;
}
#foot .footer_links li {
padding: 0;
}
#foot {
background: #2F4456;
border-top: 1px solid #3F3F3F;
line-height: 19px;
text-shadow: 0 0 0 transparent, 0 1px 0 #000000;
}
#foot li {
padding-bottom: 5px;
}
#foot_top {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
color: #AAAAAA;
padding: 25px 0 20px;
}
#foot_top a {
color: #FFFFFF;
}
#foot_top a:hover {
color: #AAAAAA;
}
#foot_bottom {
background: #E6E6E6;
border-top: 1px solid #3F3F3F;
color: #AAAAAA;
font-size: 12px;
padding: 0;
text-align: center;
}
#foot_bottom a {
color: #000000;
}
#foot_bottom a:hover {
color: #E5E5E5;
text-decoration: none;
}
#foot_bottom_inner {
padding: 15px 0;
}
.footer_morecopyright {
color: #444444
float: right;
font-size: 12px;
margin-top: 0;
padding-bottom: 0;
text-align: left;
}
.footer_column_inner {
padding: 0 15px;
}
#footer_column_1 {
float: left;
text-align: left;
width: 10%;
}
#footer_column_2 {
float: left;
text-align: left;
width: 55%;
}
#footer_column_3 {
float: left;
text-align: left;
width: 10%;
}
#footer_column_4 {
float: right;
text-align: left;
width: 25%;
}
.footer_column_header {
color: #BDE5FF;
font-family: Helvetica,Geneva;
font-size: 14px;
padding-bottom: 8px;
text-align: left;
text-transform: uppercase;
}
#social_icons_footer {
clear: both;
padding-bottom: 15px;
text-align: left;
}
#social_icons_footer img {
margin-right: 4px;
margin-top: 4px;
opacity: 0.6;
}
#social_icons_footer img:hover {
-moz-transition: all 0.25s ease-in-out 0s;
opacity: 1;
}
.searchbutton {
-moz-transition: all 0.15s ease-in-out 0s;
box-shadow: 0 0 5px #004061;
margin: 1px 0 0 2px;
}
.searchbutton:hover {
box-shadow: 0 0 6px #9DBBFF;
}
.footer_search .textbox, .footer_search textarea, .footer_search select {
background: url("images/tf_ideal/blue/misc/textbox_bg.png") repeat-x scroll center bottom #FFFFFF;
border: 1px solid #004061;
color: #222222;
text-shadow: 0 0 0 transparent, 0 1px 0 #FFFFFF;
}
.footer_search .textbox:focus {
border: 1px solid #555555;
box-shadow: 0 0 5px #9DBBFF;
}
.footer_search .textbox {
float: left;
height: 15px;
width: 165px;
}
#footer_advanced_search {
font-size: 10px;
margin: 5px 0 20px;
text-align: left;
}
#footer_advanced_search a {
color: #AAAAAA;
}
#footer_advanced_search a:hover {
color: #FFFFFF;
}
This is a copy of the footer template code, I changed it a bit from what they had.
<vb:if condition="!empty($ad_location['ad_footer_start']) or !empty($ad_location['global_above_footer'])">
<div style="clear: {vb:stylevar left}">
{vb:raw ad_location.ad_footer_start}
{vb:raw ad_location.global_above_footer}
</div>
</vb:if>
<div id="body_footer">
<div class="main_wrap">
<!-- style language chooser -->
<form action="{vb:link forumhome|nosession}" method="get" id="footer_select" class="footer_select">
<vb:if condition="$show['quickchooser']">
<select name="styleid" onchange="switch_id(this, 'style')">
<optgroup label="{vb:rawphrase quick_style_chooser}">
{vb:raw quickchooserbits}
</optgroup>
</select>
</vb:if>
<vb:if condition="$show['languagechooser']">
<select name="langid" onchange="switch_id(this, 'lang')">
<optgroup label="{vb:rawphrase quick_language_chooser}">
{vb:raw languagechooserbits}
</optgroup>
</select>
</vb:if>
</form><!-- end style language chooser -->
<div id="footer_copyright" class="shade footer_copyright">
<!-- Do not remove this copyright notice -->
{vb:rawphrase powered_by_vbulletin}
<!-- Do not remove this copyright notice -->
</div><!-- end vb copyright -->
</div><!-- end of main wrap -->
</div><!-- end of body footer -->
<!-- this adds a blank line to build space between style chooser and lower blue box -->
<div class="clear"></div>
<!-- begin columns -->
<div id="foot">
<div id="foot_top">
<div class="main_wrap">
<div class="below_body">
<!-- column 1 -->
<div id="footer_column_1">
<div class="footer_column_inner">
<h4 class="footer_column_header">column 1</h4>
<div>
put whatever you want here, leave blank if necessary, column widths is adjusted in style sheet
</div>
</div>
</div>
<!-- column 2 -->
<div id="footer_column_2">
<div class="footer_column_inner">
<h4 class="footer_column_header">About Us</h4>
<div>
We are the website
</div>
</div>
</div>
<!-- column 3 -->
<div id="footer_column_3">
<div class="footer_column_inner">
<h4 class="footer_column_header">column 3</h4>
<div>
put whatever you want here, leave blank if necessary, column width is adjusted in style sheet
</div>
</div>
</div>
<!-- column 4 -->
<div id="footer_column_4">
<div class="footer_column_inner">
<h4 class="footer_column_header">Search</h4>
<div>
<!-- search bar -->
<form action="search.php?{vb:raw session.sessionurl}do=process" method="post" id="navbar_search" class="navbar_search">
<vb:comment><input type="hidden" name="s" value="{vb:raw session.sessionurl}" /></vb:comment>
<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="hidden" name="do" value="process" />
<span class="textboxcontainer"><span><input type="text" value="" name="query" class="textbox" tabindex="99"/></span></span>
<span class="buttoncontainer"><span><input type="image" class="searchbutton" src="{vb:stylevar imgdir_button}/search<vb:if condition="$stylevar['textdirection'] == 'rtl'">_rtl</vb:if>.<vb:if condition="is_browser('ie') AND !is_browser('ie', 7)">gif<vb:else />png</vb:if>" name="submit" onclick="document.getElementById('navbar_search').submit;" tabindex="100"/></span></span>
</form>
</div>
<!-- advanced search -->
<div id="footer_advanced_search">
<a href="search.php{vb:raw session.sessionurl_q}" accesskey="4">{vb:rawphrase advanced_search}</a>
</div>
<div id="social_icons_footer">
<h4 class="footer_column_header">Connect With Us</h4>
<div>
<a href="http://www.facebook.com/"><img src="images/social/facebook.png" alt="Facebook" /></a>
<a href="http://twitter.com/"><img src="images/social/twitter.png" alt="Twitter" /></a>
<a href="http://www.youtube.com/"><img src="images/social/youtube.png" alt="YouTube" /></a>
</div>
</div>
<div class="clear"></div>
</div><!-- closes footer column inner -->
</div><!-- closes footer column 4 -->
<div class="clear"></div>
</div><!-- closes below body -->
</div><!-- closes main wrap -->
<!-- closes foot top -->
</div>
<div id="foot_bottom">
<div class="main_wrap">
<div id="foot_bottom_inner">
<!-- contact info etc -->
<div id="footer" class="floatcontainer footer">
<ul id="footer_links" class="footer_links">
<!-- contact us -->
<ul id="footer_links" class="footer_links">
<vb:if condition="$show['contactus']"><li><a href="{vb:raw vboptions.contactuslink}" rel="nofollow" accesskey="9">{vb:rawphrase contact_us}</a></li></vb:if>
<vb:if condition="$vboptions['hometitle']"><li><a href="{vb:raw vboptions.homeurl}">{vb:raw vboptions.hometitle}</a></li></vb:if>
<vb:if condition="$show['admincplink']"><li><a href="{vb:raw admincpdir}/index.php{vb:raw session.sessionurl_q}">{vb:rawphrase admin}</a></li></vb:if>
<vb:if condition="$show['modcplink']"><li><a href="{vb:raw modcpdir}/index.php{vb:raw session.sessionurl_q}">{vb:rawphrase mod}</a></li></vb:if>
<vb:if condition="$vboptions['archiveenabled']"><li><a href="archive/index.php{vb:raw session.sessionurl_q}">{vb:rawphrase archive}</a></li></vb:if>
{vb:raw template_hook.footer_links}
<vb:if condition="$vboptions['privacyurl']"><li><a href="{vb:raw vboptions.privacyurl}">{vb:rawphrase privacy_statement}</a></li></vb:if>
<vb:if condition="$vboptions['tosurl']"><li><a href="{vb:raw vboptions.tosurl}">{vb:rawphrase terms_of_service}</a></li></vb:if>
<li><a href="{vb:raw relpath}#top" onclick="document.location.hash='top'; return false;">{vb:rawphrase top}</a></li>
</ul><!-- end contact us -->
<!-- initialize vbulletin -->
<script type="text/javascript">
<!--
// Main vBulletin Javascript Initialization
vBulletin_init();
//-->
</script>
{vb:raw template_hook.footer_javascript}
<!-- closes footer -->
</div>
<!-- <div style="display: none;"> -->
<!-- closes foot bottom inner -->
</div>
<!-- closes main wrap -->
</div>
<!-- vb copyright -->
<!-- closes foot bottom -->
</div>
<!-- daylight savings time -->
<vb:if condition="$show['dst_correction']">
<!-- auto DST correction code -->
<form action="profile.php?do=dst" method="post" name="dstform">
<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
<input type="hidden" name="do" value="dst" />
</form>
<script type="text/javascript">
<!--
var tzOffset = {vb:raw bbuserinfo.timezoneoffset} + {vb:raw bbuserinfo.dstonoff};
var utcOffset = new Date().getTimezoneOffset() / 60;
if (Math.abs(tzOffset + utcOffset) == 1)
{ // Dst offset is 1 so its changed
document.forms.dstform.submit();
}
//-->
</script>
<!-- / auto DST correction code -->
</vb:if>
<!-- begin below body -->
<div class="below_body">
<!-- add footer -->
{vb:raw ad_location.ad_footer_end}
<!-- facebook connect -->
<vb:if condition="$vboptions['enablefacebookconnect']">
{vb:raw facebook_footer}
</vb:if>
<!-- closes below body -->
</div>
<!-- closes foot -->
</div>
<!-- begin google analytics -->