Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Template Modifications
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
Awesome footer with Social Icons. Details »»
Awesome footer with Social Icons.
Version: 1.00, by socialteenz socialteenz is offline
Developer Last Online: Nov 2023 Show Printable Version Email this Page

Category: Forum Home Enhancements - Version: 4.x.x Rating:
Released: 07-30-2012 Last Update: 07-30-2012 Installs: 159
Supported Template Edits
Re-useable Code Translations  

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.

Download Now

File Type: zip social.zip (14.1 KB, 828 views)

Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.
11 благодарности(ей) от:
+buG, ChiNa, gamerzhut, kiba snowpaw, kushal, L2Insomnia, synseal, tacklebox joe, tanzeelniazi, The-Lind, tinoco2

Comments
  #32  
Old 08-07-2012, 10:10 AM
socialteenz's Avatar
socialteenz socialteenz is offline
 
Join Date: May 2011
Posts: 465
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by synseal View Post
This is great! thanks for sharing.

How do I get it to spread out evenly for a fluid style, everything is over to the left.

TIA.

Open your additional.css template.

make the following changes, find & replace with the following.

.col4 {
float: left;
margin-left: 56px;
width: 252px;


}
Reply With Quote
  #33  
Old 08-07-2012, 10:52 AM
synseal's Avatar
synseal synseal is offline
 
Join Date: Apr 2009
Posts: 334
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by socialteenz View Post
Open your additional.css template.

make the following changes, find & replace with the following.

.col4 {
float: left;
margin-left: 56px;
width: 252px;


}
Thanks that has made a difference, it is probably cause my monitor is a 26".

Is their a way to move the copyright in-line to the right.

Thanks.

Reply With Quote
  #34  
Old 08-07-2012, 04:54 PM
socialteenz's Avatar
socialteenz socialteenz is offline
 
Join Date: May 2011
Posts: 465
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by synseal View Post
Thanks that has made a difference, it is probably cause my monitor is a 26".

Is their a way to move the copyright in-line to the right.

Thanks.
I inspected your site, but your width is 272 instead of 252. Just check once.


width: 252px;

Just change the value of the width to your likings.
Reply With Quote
  #35  
Old 08-08-2012, 10:09 AM
synseal's Avatar
synseal synseal is offline
 
Join Date: Apr 2009
Posts: 334
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by socialteenz View Post
I inspected your site, but your width is 272 instead of 252. Just check once.


width: 252px;

Just change the value of the width to your likings.
Thanks I tried 252, I have made the style fixed as it looks allot better with your mod.

Thanks for the help!.
Reply With Quote
Благодарность от:
socialteenz
  #36  
Old 08-13-2012, 02:52 PM
watty005 watty005 is offline
 
Join Date: Apr 2010
Location: Wales, UK
Posts: 109
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Thanks for this, great job! How do I make the Black Box Smaller while keeping all four columns? I've change my forum width to 1080px and it shows fine, but if I make the forum width smaller it displays like the picture in the below post? How can I do this? Thanks.

Quote:
Originally Posted by synseal View Post
Thanks that has made a difference, it is probably cause my monitor is a 26".

Is their a way to move the copyright in-line to the right.

Thanks.

Reply With Quote
  #37  
Old 08-13-2012, 06:08 PM
e-Novator e-Novator is offline
 
Join Date: Oct 2010
Posts: 9
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

great job!!!!!!
can you please help on how to insert an image isntead of the background colour?
what should the size be?also wehere to place it?additional.css or footer file?
Reply With Quote
  #38  
Old 08-14-2012, 10:54 AM
TheChief TheChief is offline
 
Join Date: Nov 2010
Posts: 73
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Added, all working and looking good

Cheers
Reply With Quote
  #39  
Old 08-17-2012, 10:38 PM
socialteenz's Avatar
socialteenz socialteenz is offline
 
Join Date: May 2011
Posts: 465
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by watty005 View Post
Thanks for this, great job! How do I make the Black Box Smaller while keeping all four columns? I've change my forum width to 1080px and it shows fine, but if I make the forum width smaller it displays like the picture in the below post? How can I do this? Thanks.

Try to play with this value...

.col4 {
float: left;
margin-left: 56px;
width: 252px;
}

Try changing the width to suit your needs.
Reply With Quote
  #40  
Old 08-17-2012, 10:39 PM
socialteenz's Avatar
socialteenz socialteenz is offline
 
Join Date: May 2011
Posts: 465
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by e-Novator View Post
great job!!!!!!
can you please help on how to insert an image isntead of the background colour?
what should the size be?also wehere to place it?additional.css or footer file?

Spend a min to read the FAQ.

Also, mark this as installed for further support.
Reply With Quote
  #41  
Old 08-17-2012, 10:40 PM
socialteenz's Avatar
socialteenz socialteenz is offline
 
Join Date: May 2011
Posts: 465
Благодарил(а): 0 раз(а)
Поблагодарили: 0 раз(а) в 0 сообщениях
Default

Quote:
Originally Posted by TheChief View Post
Added, all working and looking good

Cheers

Cheers Chief
Reply With Quote
Reply


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:51 PM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.05237 seconds
  • Memory Usage 2,372KB
  • Queries Executed 28 (?)
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
  • (5)bbcode_code
  • (8)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
  • (4)pagenav_pagelink
  • (1)pagenav_pagelinkrel
  • (11)post_thanks_box
  • (12)post_thanks_box_bit
  • (11)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (2)post_thanks_postbit
  • (11)post_thanks_postbit_info
  • (10)postbit
  • (1)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_postinfo_query
  • fetch_postinfo
  • 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