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. This was tested on vbulletin 3.8.x Default skin & it worked fine.

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


Remove the following code first.

<div align="center">
    <div class="smallfont" align="center">
    <!-- Do not remove this copyright notice -->
    $vbphrase[powered_by_vbulletin]
    <!-- Do not remove this copyright notice -->
    </div>

    <div class="smallfont" align="center">
    <!-- Do not remove cronimage or your scheduled tasks will cease to function -->
    $cronimage
    <!-- Do not remove cronimage or your scheduled tasks will cease to function -->

    $vboptions[copyrighttext]
    </div>
</div>

</form>

Now, find

$ad_location[ad_footer_end]

Above that add...

<!---Awesome Footer--->
</br></br>
<div class="footer1">
    <div class="container">
        
        <div class="col4">
            <h3>About Eminem Talk</h3>
    
          <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>
        </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 class="smallf" align="center">
    <!-- Do not remove this copyright notice -->
    $vbphrase[powered_by_vbulletin]
    <!-- Do not remove this copyright notice -->
    </div>

    <div class="smallf" align="center">
    <!-- Do not remove cronimage or your scheduled tasks will cease to function -->
    $cronimage
    <!-- Do not remove cronimage or your scheduled tasks will cease to function -->

    $vboptions[copyrighttext]
    </div>
      </div>
        
        <div class="clear"></div>
        
    </div>

</div>

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

Go to your Admin CP->>>Your Style>>>All style options>>>Additional CSS Definitions>>>In the second box add this

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

.footer1 {
    background: none repeat scroll 0 0 #000000;
    border-radius: 5px 5px 5px 5px;
    margin-top: -13px;
    min-height: 210px;
    padding: 5px 0 35px;
}
.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: 262px;
}

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

.fallowus {
    width: 226px;
}

.smallf {
    color: #FFFFFF;
    font: small-caps bold 13px Tahoma,Calibri,Verdana,Geneva,sans-serif;
}

Upload the folder social to your forum root.

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

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

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

4.X version here


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.

[socialteenz]

Originally Posted by Kolektor

there are some huge monitors or small monitor, is there any way to adjust it automatically with the size of the screens?

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

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

[stevieb]

how does it auto-resize as crashes in phone etc...?

[Goomzee]

not works for me and also tell me where i put this code

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

[socialteenz]

Originally Posted by Goomzee

not works for me and also tell me where i put this code

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

Add this to the additional.css

[Reminisce32]

how do I change the color of the linked text (not the hover color)?

[socialteenz]

Originally Posted by Reminisce32

how do I change the color of the linked text (not the hover color)?

Go to additional.css

Replace the color in the following 2 locations.

.hfont {    

    color: #fff;

.footer1 a {   
  color: whitesmoke;

Mark as installed for further support.

[dil shah]

Ok Let Me check now. ....