The Arcive of Official vBulletin Modifications Site.

Awesome footer with Social Icons. · **Released**: 07-30-2012

Provided by Eminem Forum

WHAT DOES THIS DO?

This will help you in achieving a 4colum footer with social icons & you can customize it to match your needs.

Screen Shot:

Lets get it started

Backup your footer template before making any changes.

Go to your Admin CP->>>Your Style>>>Edit Templates>>>footer

Find

Code:

<!-- closing div for body_wrapper -->

Below that add...

Code:

<!---Awesome Footer--->
</br></br>
<div class="footer1">
    <div class="container">
        
        <div class="col4">
            <h3>About Eminem Talk</h3>
    
            <ul><div class="hfont">
               Eminem Talk is an Forum Devoted To Eminem Fans from all over the world. Let's Have A Chat About the greatest rap legend of all time now and forever. 
           </div> </ul>
        </div>
        
        <div class="col4">
            <h3>Recommended Links </h3>
                    
            <ul>
                
                <li><a href="http://www.eminem.com/">Official Eminem Site</a></li>
                <li><a href="http://www.drdre.com/">Official Dr. DRe Site </a></li>
                <!--<li><a href="http://www.8-mile.com/">8-mile Site</a></li>-->
                <li><a href="http://www.d12online.com/">Official D12 Site</a></li>                
                <li><a href="http://www.shadyrecords.com/">Official Shady Records Site</a></li>
                
            </ul>
        </div>
        
        <div class="col4">
        
            <h3>Quick Links</h3>
            
            <ul>
                <li><a href="/usercp.php">My User CP</a></li>
                <li><a href="/f4/eminem-song-you-listening-right-now-13/">Which Eminem song are you listening to right now?</a></li>
                <!--<li><a href="/f8/list-all-eminem-albums-their-achievements-awards-17/">List of All Eminem Albums With their Achievements & Awards!</a></li>-->
                
            </ul>

        </div>
        
      <div class="col4 fallowus">
           <h3>Follow us on</h3>
            
          <p>
              <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Twitter" src="social/social_twitter.png"></a> 
              <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Facebook" src="social/social_fb.png"></a> 
<a href="#" target="_blank"><img width="28" height="28" border="0" alt="youtube" src="social/youtube.png"></a>
            <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Flickr" src="social/social_flickr.png"></a> 
            <a href="#" target="_blank"><img width="28" height="28" border="0" alt="DavianArt" src="social/social_da.png"></a> 
            <a href="#" target="_blank"><img width="28" height="28" border="0" alt="Dribbble" src="social/social_dribbble.png"></a>            <a href="#"><img width="28" height="28" border="0" alt="RSS Feed" src="social/icon_rss.png"></a></p>
         

</br>
            <div id="footer_time" class="shade footer_time">{vb:rawphrase all_times_are_gmt_x_time_now_is_y}</div>

<div id="footer_copyright" class="shade footer_copyright">
    <!-- Do not remove this copyright notice -->
    Powered by <a id="vbulletinlink" href="https://www.vbulletin.com">vBulletin&reg;</a> Copyright &copy; 2012 vBulletin Solutions, Inc. <br>
    <!-- Do not remove this copyright notice -->    
</div>
<div id="footer_morecopyright" class="shade footer_morecopyright">
    <!-- Do not remove cronimage or your scheduled tasks will cease to function -->
    {vb:raw cronimage}
    <!-- Do not remove cronimage or your scheduled tasks will cease to function -->
    
    {vb:raw template_hook.footer_copyright}

</div>
      </div>
        
        <div class="clear"></div>
        
    </div>

</div>

</br>
<!---Awesome Footer--->

Now remove the following from your footer template

Code:

<div id="footer_time" class="shade footer_time">{vb:rawphrase all_times_are_gmt_x_time_now_is_y}</div>

<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>
<div id="footer_morecopyright" class="shade footer_morecopyright">
    <!-- Do not remove cronimage or your scheduled tasks will cease to function -->
    {vb:raw cronimage}
    <!-- Do not remove cronimage or your scheduled tasks will cease to function -->
    {vb:raw vboptions.copyrighttext}
    {vb:raw template_hook.footer_copyright}
</div>

Go to your Admin CP->>>Your Style>>>Edit Templates>>>css templates>>
additional.css

Code:

/* Awesome Footer
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.footer1 {
    margin-top: -13px;
    background: #000;
    min-height: 140px;
    padding: 45px 0 35px;
    border-radius: 5px 5px 5px 5px;
}
.footer1 .container .col4 h3 {
    
    font-family: 'BodoniStd-BookItalic',"Times New Roman",Times,serif !important;
    font-size: 25px;
    font-style: normal;
    margin-bottom: 22px;
    text-shadow: none; 
    border-bottom: 1px solid #FFFFFF;
    color: #FF0000;
    font-size: 18px;
    margin-bottom: 10px;
    padding-bottom: 7px;   
}

.hfont {
    color: #fff;
    font:small-caps bold 13px Tahoma,Calibri,Verdana,Geneva,sans-serif;
}
.footer1 p {
    text-shadow: none;
}
.footer1 a {
    color: whitesmoke;
    text-shadow: 0 1px 0 #373736;
    font:small-caps bold 13px Tahoma,Calibri,Verdana,Geneva,sans-serif;
}
.footer1 a:hover {
    color: #1B93DF;
}
.footer1 ul li {
    background: url("social/icon_dot.gif") no-repeat scroll 0 8px transparent;
    margin-bottom: 7px;
    padding-left: 10px;
   }
.col4 {
    float: left;
   margin-left: 56px;
    width: 202px;
}

.footer1 .container .col4 h3 {
    margin-bottom: 20px;
}

.fallowus {
    width: 226px;
}

If you wanna center your columns, add this to the additional.css

Code:

.footer1 .container {
    width: 1090px;
    margin: auto;
}

Upload the folder social to your forum root.*********************
INSTALLATION INSTRUCTIONS
***********************
1 - Edit your footer template
2 - Edit your additional.css template
3 - Upload the folder social to your forum root.
4- Make the appropriate changes to the description & links to match with your site.

Please click Mark as Installed if you are using this hack. Feel free to click on the Support Developer link and donate any amount you feel is appropriate.

watty005 · #**132** 09-05-2013, 07:20 PM

Thanks for this, it looks great! But i'm having trouble changing the color of the white text links, please see attachment, thanks.

socialteenz · #**133** 09-05-2013, 07:27 PM

Quote:

Originally Posted by watty005

Thanks for this, it looks great! But i'm having trouble changing the color of the white text links, please see attachment, thanks.

Open your additional.css

Find

Code:

.footer1 a {
    color: whitesmoke;  
    text-shadow: 0 1px 0 #373736;
    font:small-caps bold 13px Tahoma,Calibri,Verdana,Geneva,sans-serif;
}
.footer1 a:hover {
    color: #1B93DF;
}

Replace White smoke with your preferred color & change the hover to match the selected color.

socialteenz · #**134** 09-05-2013, 07:43 PM

Quote:

Originally Posted by watty005

..

Also i would suggest you to edit your body wrapper's width to something like this.

Code:

.wrapper1 {
    margin: 0 auto;
    min-width: 779px;
    position: relative;
    width: 90%; or 1100px;



}

Just my 0.2 cent, not necessary to do this edit though

watty005 · #**135** 09-06-2013, 04:59 AM

Quote:

Originally Posted by socialteenz

Open your additional.css

Find

Code:

.footer1 a {
    color: whitesmoke;  
    text-shadow: 0 1px 0 #373736;
    font:small-caps bold 13px Tahoma,Calibri,Verdana,Geneva,sans-serif;
}
.footer1 a:hover {
    color: #1B93DF;
}

Replace White smoke with your preferred color & change the hover to match the selected color.

Thanks for your help, great mod by the way!

watty005 · #**136** 09-06-2013, 05:04 AM

Quote:

Originally Posted by socialteenz

Also i would suggest you to edit your body wrapper's width to something like this.

Code:

.wrapper1 {
    margin: 0 auto;
    min-width: 779px;
    position: relative;
    width: 90%; or 1100px;



}

Just my 0.2 cent, not necessary to do this edit though

Where would I find this please? Also when I view this mod on mobile device the footer looks too big for my forum it looks too wide to the right, but it looks normal if you visit my site on a pc. Thanks again

socialteenz · #**137** 09-06-2013, 08:39 AM

Quote:

Originally Posted by watty005

Where would I find this please? Also when I view this mod on mobile device the footer looks too big for my forum it looks too wide to the right, but it looks normal if you visit my site on a pc. Thanks again

On your additional.css file.

Bob_R · #**138** 11-04-2013, 04:49 PM

See screenshot:

Can't read the text?? Only "Vbulletin" comes out clearly. If you squint you can see 12:44 PM and EST (on a seperate line) shouldn't they be on the same line?

Firstly, I'd like to at least be able to read/see it.

Secondly on the same line would be nice.

For whatever reason I'm having a bad day and can't find where to change this. I'm usually pretty good with this.

:

socialteenz · #**139** 11-04-2013, 04:52 PM

Quote:

Originally Posted by Bob_R

See screenshot:

Can't read the text?? Only "Vbulletin" comes out clearly. If you squint you can see 12:44 PM and EST (on a seperate line) shouldn't they be on the same line?

Firstly, I'd like to at least be able to read/see it.

Secondly on the same line would be nice.

For whatever reason I'm having a bad day and can't find where to change this. I'm usually pretty good with this.

:

Can i have your site url?

Bob_R · #**140** 11-04-2013, 05:09 PM

I have it on a test skin. Please advise.

socialteenz · #**141** 11-04-2013, 05:23 PM

Make sure you have copied the codes to your additional.css template.

With out taking a look, i can't assist you further.

Be assured that the same set up work for the rest of us, so you have made a mistake.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.05169 seconds Memory Usage 2,373KB Queries Executed 26 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (9)bbcode_code (6)bbcode_quote (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_post (1)navbar (4)navbar_link (120)option (1)pagenav (1)pagenav_curpage (3)pagenav_pagelink (1)pagenav_pagelinkrel (11)post_thanks_box (11)post_thanks_box_bit (11)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (1)post_thanks_postbit (11)post_thanks_postbit_info (10)postbit (3)postbit_attachment (11)postbit_onlinestatus (11)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_attachment postbit_display_complete post_thanks_function_can_thank_this_post_start pagenav_page pagenav_complete tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

11 благодарности(ей) от:
+buG, ChiNa, gamerzhut, kiba snowpaw, kushal, L2Insomnia, synseal, tacklebox joe, tanzeelniazi, The-Lind, tinoco2

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!