vb.org Archive - Forum Home Enhancements - Awesome footer with Social Icons

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 3.8 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=236)

- - Forum Home Enhancements - Awesome footer with Social Icons (https://vborg.vbsupport.ru/showthread.php?t=286954)

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:

https://vborg.vbsupport.ru/external/2012/08/60.png

Lets get it started :D

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.

Code:

<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

Code:

$ad_location[ad_footer_end]

Above that add...

Code:



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

Code:

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

Code:

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

FAQ:

1) Where do i edit the site title?

To change the site title, open your footer template, find..

Code:

<h3>About Eminem Talk</h3>

Change it to match your needs.

2) Where do i edit the site description?

To change the site description, open your footer template, find..

Code:

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.

Change it to match your needs.

3)How to change Recommended Links title ?

Open footer template, find..

Code:

<h3>Recommended Links </h3>

Change it to match your needs.

4) How do i edit the contents of the Recommended Links?

Code:

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

Replace this with your links

5)How to change Quick Links title?

Open footer template find..

Code:

<h3>Quick Links</h3>

Change it to match your needs.

6) How do i edit the contents of the Quick Links?

Open Footer template, find

Code:

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

Replace this with your links

7) How to link the icons to my social accounts?

Open footer template, find

Code:

<h3>Follow us on</h3>

Below that, you can Find

Code:

<a href="#" target="_blank"><img width="28" height="28" border="0" alt="Twitter" src="social/social_twitter.png"></a>

Replace # with your links

8) How to move the vbseo copyright like yours?

Open, footer template find..

Code:

<div id="footer_morecopyright" class="shade footer_morecopyright">

Above add

Code:

9) Can i move other copyrights like vbseo?

Yes, sure you can move by adding them just below

Code:

{vb:raw template_hook.footer_copyright}

10) Why have your removed the version no of vbulletin?

You can refer to this post.

Quote:

You are 100% allowed to remove the version number of vBulletin

I thought it looks clean with out the version number.

1) How to change the black background of your footer column?

Open, Admin CP->>>Your Style>>>All style options>>>Additional CSS Definitions>>>, find

Code:

.footer1 {

      background: #000;

    }

Replace #000 with your background color/image.

2) How to change the red title color?

Open, Admin CP->>>Your Style>>>All style options>>>Additional CSS Definitions>>> find

Code:

.footer1 .container .col4 h3 {

            color: #FF0000;

     }

Replace #FF0000 with your color.

For the remaining doubts just ask here, i will try to help you out.

Well done, Great mod mate, keep up the good job! I saw this for vB 4.x was waiting for you to do this for vB3.8!

Example Image:
https://vborg.vbsupport.ru/external/2012/08/57.png

After installing it, some of the links cant stay fit, and looks like they are set to be in the middle of everything else.. I its maybe because my theme is custom! I am going to make a few changes later, and hopefully it will work. I will get back and click on the Installed button if it does..

GREAT JOB

now this is awesome! :)

Quote:

Originally Posted by ChiNa-Man (Post 2359178)

Like i said, i tested this on default skin & it worked fine.

Try reducing the width, hopefully it will fix the problem.

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

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

Thanks for this modification; good job!

Quote:

Originally Posted by Kolektor (Post 2365775)

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

Code:

.footer1 .container {     

width: 1090px;     

margin: auto;

 }

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

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

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

Quote:

Originally Posted by Goomzee (Post 2399158)

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

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

Quote:

Originally Posted by Reminisce32 (Post 2435868)

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.

Code:

.hfont {    



    color: #fff;

Code:

.footer1 a {   

  color: whitesmoke;

Mark as installed for further support.

Ok Let Me check now. ....

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (21)bbcode_code_printable (5)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (17)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01232 seconds Memory Usage 1,810KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (21)bbcode_code_printable (5)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (17)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.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/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.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 printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: