Forum Home Enhancements - Awesome footer with Social Icons.

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

<!-- closing div for body_wrapper -->

Below that add...

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

<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

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

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

[Ricsca]

Thankis

[chuckhodson]

Will this work on a fixed style or does it even matter...Thanks

[socialteenz]

Originally Posted by chuckhodson

Will this work on a fixed style or does it even matter...Thanks

Should work fine, if not let me know.

I will help you out :up:

[Luis]

nice installed

[GamerPerfection]

What do i do to remove the vBulletin copyright and get my own copyright back?

[socialteenz]

Originally Posted by GamerPerfection

What do i do to remove the vBulletin copyright and get my own copyright back?

Sorry, i don't quite get you?

[GamerPerfection]

It's ok I fixed it.

The problem was that I have paid for Branding Free so the vBulletin copyright doesn't appear but I can have my own copyright.

By doing your first edit and removing the copyright bit from the footer it replaced my copyright with the vBulletin one.

All I did to fix it was re-enter the bit you asked me to delete and replaced your copyright code bit with my original.

Here's my footer so you can see what i've done with it.
http://www.gamerperfection.com

[socialteenz]

@GamerPerfection Perfect

[Martyn1983]

Very nice indeed - installed

[synseal]

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.