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

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

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

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

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/07/3.png

Lets get it started :D

Backup your footer template before making any changes.

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

Find

Code:

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.

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 additional.css, find

Code:

.footer1 {

      background: #000;

    }

Replace #000 with your background color/image.

2) How to change the red title color?

Open additional.css, 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.

Quote:

Originally Posted by doctorsexy (Post 2352997)

Nice... thanks

You are welcome :)

Sweet appreciate this!

Great work mate Looks very sweet

A job for me at my office tomorrow.
This is just what I needed for one of my sites.
Thanks for this mate.

I've been waiting for something good to pop up for the footer.

thanks looks great.

now if i can get my copyright hack to work...but that's another thread. :p

Where are your images?

Quote:

Originally Posted by voglermc (Post 2353393)

Where are your images?

The images are in the social.zip folder, if i had understood your question.

Look good on a new theme I'm working on, thanks for the idea.

http://i.imgur.com/ZltQA.png

Might add a separator image in between, think that'd look better.

Quote:

Originally Posted by exel (Post 2353414)

Look good on a new theme I'm working on, thanks for the idea.

http://i.imgur.com/ZltQA.png

Might add a separator image in between, think that'd look better.

Looks good :)

Thanks for sharing, looks good socialteenz. Tagged this just now but will be looking to implement it (or bits of it) into my new site :)

Quote:

Originally Posted by Gemma (Post 2353465)

Thanks for sharing, looks good socialteenz. Tagged this just now but will be looking to implement it (or bits of it) into my new site :)

You are welcome, i am glad that you are opening a new forum :)

Good luck once again.

Thanks, actually opened a few days ago but still playing around :)

Out of curiosity, what did you use to remove the version # of vB? There is a product on here that does it but if I remember correctly it was adding something like 50 queries to the site query count

Quote:

Originally Posted by Gemma (Post 2353474)

Have manually edited this

Code:

{vb:rawphrase powered_by_vbulletin}

With this

Code:

 Powered by <a id="vbulletinlink" href="https://www.vbulletin.com">vBulletin&reg;</a> Copyright &copy; 2012 vBulletin Solutions, Inc. <br>

Good one, tagged

G!

Quote:

Originally Posted by socialteenz (Post 2353539)

Have manually edited this

Code:

{vb:rawphrase powered_by_vbulletin}

With this

Code:

 Powered by <a id="vbulletinlink" href="https://www.vbulletin.com">vBulletin&reg;</a> Copyright &copy; 2012 vBulletin Solutions, Inc. <br>

Thanks again, added and modified to suit needs :)

http://www.arcadejunkies.org

Quote:

Originally Posted by Gemma (Post 2353774)

Thanks again, added and modified to suit needs :)

http://www.arcadejunkies.org

Looks neat Gemma, don't forget to mark as installed if you use this mod ;)

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

Quote:

Originally Posted by chuckhodson (Post 2354258)

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:

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

Quote:

Originally Posted by GamerPerfection (Post 2354617)

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

Sorry, i don't quite get you?

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

@GamerPerfection Perfect :)

Very nice indeed - installed :)

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.

Quote:

Originally Posted by synseal (Post 2355202)

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;

}

Quote:

Originally Posted by socialteenz (Post 2355208)

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.

https://vborg.vbsupport.ru/external/2012/08/34.jpg

Quote:

Originally Posted by synseal (Post 2355218)

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.

Quote:

Originally Posted by socialteenz (Post 2355295)

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

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 (Post 2355218)

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.

https://vborg.vbsupport.ru/external/2012/08/34.jpg

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?

Added, all working and looking good

Cheers

Quote:

Originally Posted by watty005 (Post 2356648)

Try to play with this value...

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

Try changing the width to suit your needs.

Quote:

Originally Posted by e-Novator (Post 2356691)

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.

Quote:

Originally Posted by TheChief (Post 2356859)

Added, all working and looking good

Cheers

Cheers Chief :)

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01621 seconds Memory Usage 1,868KB 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 (22)bbcode_code_printable (18)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (2)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (40)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 pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: