How to create a footer column like this one

[final kaoss]

I only had a look at the source. You need to add the appropiate css & images as well. Oh and it looks like theres some custom Javascript as well.

[Toorak Times]

Originally Posted by extreme-gaming

Hold the phone just a minute here... Why do you have so many premium skins installed?

Is that a problem e-g? Is there a restriction as to how many styles one can offer?

I'm just a bloke trying to build a publishing site where I can offer members a variety of skins for their different Sections, f'rinstance, someone wants to edit a gaming section I would like their section to have a skin representing the theme.

Very new at all of this and the artists I am working with are struggling to understand vB also. I sit here everyday trying to learn more. But I am excited by the work you coding geniuses do mate, and happy to support vB through the site also. I have also become a CompletevB affiliate to further promote vB.

Some of the stuff here is just amazing, and I'd like to use as many of the mods that will enhance my site and help my members, mainly writers, musicians and sports people.

--------------- Added [DATE]1325810873[/DATE] at [TIME]1325810873[/TIME] ---------------

Originally Posted by Lynne

Does what tie into the site map? I have no idea what you are asking about.

Sorry, Lynne me neither probs...lol! I am raw beginner trying to get my head around everything at once, and it is daunting.

I have seen some newspaper footers that SEEM to have their site map expressed in the footer, but no matter.

I have also seen some premium skins that seem to have a similar footer as part of the theme.

Please bear with me, I'm committed to getting my head around this stuff.

[alaska_av8r]

got it! slowly figuring it out but this style sheet code needs to be added to additional.css to get the layout working correctly. There may be more that needs to be added but at least this is a start.

PHP Code:

<!-- footer style sheet coding to define the columns etc and layout -->
/*footer*/

#body_footer {
    background: #f2f2f2 url(images/tf_ideal/blue/misc/tdg_bg.png) repeat-x top;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #f8f8f8;
    padding: 10px 0px;
    text-shadow: 0 0 0 transparent, 0px 1px 0px #ffffff;
}

#contenttypeid .textbox, textarea, select {
    border: 1px solid #dddddd;
}

.footer_select {
    margin: 7px 10px 0px 0px;
}

.footer_copyright {
    text-align: right;
    margin-top: 0px;
}

#footer_time .time {
    color: #cccccc;
}

.footer_time {
    padding: 20px 0px 10px 0px;
}

.footer {
    text-align: left;
    float: left;
    margin-top: 0px;
    padding: 0px;
}

.footer_links {
    margin: 0px;
}

.footer_links li {
    margin-right: 7px;
    margin-left: 0px;
    padding: 0px;
}

#foot .footer_links li {
    padding: 0px;
}

#foot {
    background: #004061 url(images/tf_ideal/blue/misc/b_bg.jpg) repeat-x top center;
    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 {
    color: #aaaaaa;
    padding: 25px 0px 20px 0px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;

}

#foot_top a {
    color: #ffffff;
}

#foot_top a:hover {
    color: #aaaaaa;
}

#foot_bottom {
    font-size: 12px;
    padding: 0px 0px 0px 0px;
    background: #222222;
    color: #aaaaaa;
    text-align: center;
    border-top: 1px solid #3f3f3f;
}

#foot_bottom a {
    color: #ffffff;
}

#foot_bottom a:hover {
    color: #aaaaaa;
}

#foot_bottom_inner {
    padding: 15px 0px;
}

.footer_morecopyright {
    color: #888888;
    font-size: 12px;
    text-align: left;
    float: right;
    margin-top: 0px;
    padding-bottom: 0px;
}

.footer_column_inner {
    padding: 0px 15px;
}

#footer_column_1 {
    float: left;
    width: 20%;
    text-align: left;
}

#footer_column_2 {
    float: left;
    width: 20%;
    text-align: left;
}

#footer_column_3 {
    float: left;
    width: 35%;
    text-align: left;
}

#footer_column_4 {
    float: right;
    width: 25%;
    text-align: left;
}

.footer_column_header {
    padding-bottom: 8px;
    text-align: left;
    font-family: Helvetica, Geneva;
    text-transform: uppercase;
    font-size: 14px;
    color: #bde5ff;
}

#social_icons_footer {
    clear: both;
    text-align: left;
    padding-bottom: 15px;
}

#social_icons_footer img {
    margin-top: 4px;
    margin-right: 4px;
    opacity: 0.6;
}

#social_icons_footer img:hover {
    -webkit-transition: all 0.25s ease-in-out 0s;
    -moz-transition: all 0.25s ease-in-out 0s;
    -o-transition: all 0.25s ease-in-out 0s;
    transition: all 0.25s ease-in-out 0s;
    opacity: 1;
}

.searchbutton {
    margin: 1px 0px 0px 2px;
    -webkit-transition: all 0.15s ease-in-out 0s;
    -moz-transition: all 0.15s ease-in-out 0s;
    -o-transition: all 0.15s ease-in-out 0s;
    transition: all 0.15s ease-in-out 0s; 
    box-shadow: 0 0 5px #004061;
}

.searchbutton:hover {
    box-shadow: 0 0 6px #9dbbff;
}

.footer_search .textbox,
.footer_search textarea,
.footer_search select {
    background: #ffffff url(images/tf_ideal/blue/misc/textbox_bg.png) repeat-x bottom;
    color: #222222;
    border: 1px solid #004061;
    text-shadow: 0 0 0 transparent, 0 1px 0 #ffffff;
}

.footer_search .textbox:focus {
    box-shadow: 0 0 5px #9dbbff;
    border: 1px solid #555555;
}

.footer_search .textbox {
    width: 165px;
    height: 15px;
    float: left;
}

#footer_advanced_search {
    margin: 5px 0px 20px 0px;
    font-size: 10px;
    text-align: left;
}

#footer_advanced_search a {
    color: #aaaaaa;
}

#footer_advanced_search a:hover {
    color: #ffffff;
}

<!-- end of style for the footer --> 


[final kaoss]

You could always contact the author of that particular style and request what is missing.

[alaska_av8r]

I got it figured out, i'll post the code when I am done.

[doc fluty]

any update?

[alaska_av8r]

add the following to your additional.css to control the layout and look of the items.

PHP Code:

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

PHP Code:

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