Forum Home Enhancements - Awesome footer with Social Icons. [Archive]

View Full Version : Forum Home Enhancements - Awesome footer with Social Icons.

socialteenz

07-30-2012, 10:00 PM

Provided by Eminem Forum (http://eminemtalk.com/)

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

Below that add...


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


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

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

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

{vb:raw cronimage}


{vb:raw template_hook.footer_copyright}

</div>
</div>

<div class="clear"></div>

</div>

</div>

</br>


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

{vb:rawphrase powered_by_vbulletin}

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

{vb:raw cronimage}

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

socialteenz

07-31-2012, 08:45 AM

FAQ:

1) Where do i edit the site title?

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

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

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

<h3>Recommended Links </h3>Change it to match your needs.

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

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

<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

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


Replace this with your links

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

Open footer template, find

<h3>Follow us on</h3>Below that, you can Find <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..

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

9) Can i move other copyrights like vbseo?

Yes, sure you can move by adding them just below

{vb:raw template_hook.footer_copyright}10) Why have your removed the version no of vbulletin?

You can refer to this post (https://www.vbulletin.com/forum/showthread.php/377698-Can-I-remove-the-vbulletin-version-number?p=2145117&viewfull=1#post2145117).

You are 100% allowed to remove the version number of vBulletinI thought it looks clean with out the version number.

socialteenz

07-31-2012, 08:46 AM

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

Open additional.css, find

.footer1 {
background: #000;
}

Replace #000 with your background color/image.

2) How to change the red title color?

Open additional.css, find

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

doctorsexy

07-31-2012, 09:07 AM

Nice... thanks

socialteenz

07-31-2012, 09:10 AM

Nice... thanks
You are welcome :)

RSNF

07-31-2012, 12:10 PM

Sweet appreciate this!

ProFifaLeagues

07-31-2012, 12:37 PM

Great work mate Looks very sweet

New Joe

07-31-2012, 12:39 PM

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

imported_dfmafia

07-31-2012, 10:35 PM

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

voglermc

08-01-2012, 05:11 PM

Where are your images?

socialteenz

08-01-2012, 05:22 PM

Where are your images?

The images are in the social.zip (https://vborg.vbsupport.ru/attachment.php?attachmentid=140221&d=1343727790) folder, if i had understood your question.

exel

08-01-2012, 06:33 PM

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.

socialteenz

08-01-2012, 09:03 PM

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

Gemma

08-01-2012, 09:39 PM

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

socialteenz

08-01-2012, 09:53 PM

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.

Gemma

08-01-2012, 10:07 PM

socialteenz

08-02-2012, 02:16 AM

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

Have manually edited this

{vb:rawphrase powered_by_vbulletin}

With this

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

BlueCheri

08-02-2012, 12:31 PM

Good one, tagged

G!

Gemma

08-02-2012, 07:14 PM

Have manually edited this

{vb:rawphrase powered_by_vbulletin}With this

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

Thanks again, added and modified to suit needs :)

http://www.arcadejunkies.org

socialteenz

08-02-2012, 07:27 PM

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

Ricsca

08-03-2012, 06:37 PM

Thankis

chuckhodson

08-04-2012, 04:20 AM

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

socialteenz

08-04-2012, 11:02 AM

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

08-04-2012, 11:03 PM

nice installed

GamerPerfection

08-05-2012, 10:08 AM

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

socialteenz

08-05-2012, 01:56 PM

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

Sorry, i don't quite get you?

GamerPerfection

08-05-2012, 02:03 PM

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

08-05-2012, 05:44 PM

@GamerPerfection (https://vborg.vbsupport.ru/member.php?u=128830) Perfect :)

Martyn1983

08-06-2012, 08:33 PM

Very nice indeed - installed :)

synseal

08-07-2012, 09:47 AM

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.

socialteenz

08-07-2012, 10:10 AM

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;

}

synseal

08-07-2012, 10:52 AM

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

socialteenz

08-07-2012, 04:54 PM

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.

synseal

08-08-2012, 10:09 AM

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

watty005

08-13-2012, 02:52 PM

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.

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

e-Novator

08-13-2012, 06:08 PM

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?

TheChief

08-14-2012, 10:54 AM

Added, all working and looking good

Cheers

socialteenz

08-17-2012, 10:38 PM

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.

socialteenz

08-17-2012, 10:39 PM

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.

socialteenz

08-17-2012, 10:40 PM

Added, all working and looking good

Cheers

Cheers Chief :)

soaringpine

08-19-2012, 02:00 AM

Love this mod but how can I get everything to center properly on full width layout? HEre is my site - http://bit.ly/PwfViE

Thanks for the help.

KrU$ty

08-19-2012, 05:30 AM

How do I get rid of the bullet points so they are just plain links? I tried "list-style: none;" but it didn't work.

Phil K?vin

08-19-2012, 07:01 PM

Is this possible?

ChiNa

08-19-2012, 07:11 PM

Can this be made to vB 3.8?

I would appreciated,, thank you in advance,, Waiting for a reply!

Gemma

08-19-2012, 08:06 PM

How do I get rid of the bullet points so they are just plain links? I tried "list-style: none;" but it didn't work.

Replace the links code like this, find (from example in OP)
<li><a href="http://www.eminem.com/">Official Eminem Site</a></li>
Change it to this
<a href="http://www.eminem.com/">Official Eminem Site</a><br/>Basically, remove the <li> and replace the </li> with <br/> in each link

socialteenz

08-22-2012, 06:36 PM

Is this possible?

Yes, that's what i have posted.

No edits.

socialteenz

08-22-2012, 07:16 PM

Can this be made to vB 3.8?

I would appreciated,, thank you in advance,, Waiting for a reply!

Here you go.

https://vborg.vbsupport.ru/showthread.php?t=286954

Disco_Dave

08-23-2012, 09:23 AM

Great mod! Still playing on a test site, how do I make the copyright text to show in a certain colour, any help would be great.

Dave

socialteenz

08-23-2012, 07:22 PM

Great mod! Still playing on a test site, how do I make the copyright text to show in a certain colour, any help would be great.

Dave

Thanks.

To change the color of the copyright text.

Go to Admin CP->>>Your Style>>>Style Variable Editor

Find: footer_copyright_color

Change it accordingly.

To change the time color,

Find: footer_time_color

Don't forget to mark this as installed for further support.

Cheers.

Disco_Dave

08-27-2012, 07:13 AM

I'm going to half to uninstall this it's messing with some of our custom styles, it removes this logo when installed?

marked with a black circle.

Dave

socialteenz

08-27-2012, 10:38 AM

I'm going to half to uninstall this it's messing with some of our custom styles, it removes this logo when installed?

marked with a black circle.

Dave

Not sure, how does it have conflict with that template?

If yes, please go and un-install it.

tarzan22

09-02-2012, 06:15 PM

Hello

Why social icons redirect the same forum?

http://www.foroxd.com/foro/

regards

Gemma

09-02-2012, 06:29 PM

Hello

Why social icons redirect the same forum?

http://www.foroxd.com/foro/

regards

You need to replace the # in the code below with your url of your social media

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

tarzan22

09-02-2012, 06:40 PM

Gemma Very good, excellent.

thanks

stoute

09-02-2012, 06:53 PM

How would one center all the columns?

so on wide screen monitors it will show as centered.

EasyEazy

09-03-2012, 08:03 AM

Many thanks for this great mod. Very handy addition. Keep up the good work

ndut

09-04-2012, 01:28 AM

NICE... i like it

socialteenz

09-04-2012, 07:27 AM

Gemma Very good, excellent.

thanks

Please mark this as installed if you are using this.

socialteenz

09-04-2012, 07:28 AM

NICE... i like it

Please mark this as installed if you are using this.

socialteenz

09-04-2012, 07:35 AM

How would one center all the columns?

so on wide screen monitors it will show as centered.

Actually, depending on your screen resolution it will change.

So, you need to play with this..

.col4 {
float: left;
margin-left: 56px;
width: Adjust the width to your needs;
}

togotutor

09-06-2012, 04:13 PM

Nice one, I will give it a try..

GameOverViper

09-11-2012, 01:16 AM

How would I go about adding an image in the background of the whole footer behind everything?

inigo

09-14-2012, 05:36 AM

Nice mod, thanks.

I want to do a suggestion to improve this mod.

I would like to integrate the lowest vbulletin bar (where is the language select, style select, and privacy policies contact,... ) into this personalized footer, so this mod replace completely the vbulletin footer.

for example in the first column instead of the description of the forum, insert this links in a column.

Thanks!

socialteenz

09-22-2012, 08:01 PM

How would I go about adding an image in the background of the whole footer behind everything?

Mark as installed for further support.

socialteenz

09-22-2012, 08:02 PM

advancedgamerz

09-30-2012, 01:43 AM

im not very good at editing templates but this worked out good. thank you.

socialteenz

09-30-2012, 02:03 AM

im not very good at editing templates but this worked out good. thank you.

Wow, that's great to hear.

Do, mark this as installed.

nezr

09-30-2012, 10:01 AM

I would like to add an image background for the whole footer. Do i change the below?

footer1 {
margin-top: -13px;
background: url("imagepath/image.png");
min-height: 140px;
padding: 45px 0 35px;
border-radius: 5px 5px 5px 5px;
}

UK CHI3F

10-01-2012, 08:11 AM

Thanks great mod makes VB look much more professional and gives better options to make good use of footers. Here are my results
Marked as installed

http://www.xboxplayers.co.uk/site/images/footer.gif

Papa Bear

10-03-2012, 12:52 AM

Installed very nice..thanks..:up:

CAG CheechDogg

10-03-2012, 12:53 AM

I have to agree , it is a very cool mod that adds a little something to your site. Well made.

ewebdesigner

10-03-2012, 04:14 PM

For some reason when I installed this hack the footer looked much different. I am pretty savy with html and a little other code but this could not work right. My vb credits remained the same. See my forum footer: http://www.affcrusher.com/forum

GhostHunter2010

10-04-2012, 09:22 AM

nothin special lol i tested an looks horrible

UK CHI3F

10-06-2012, 07:31 PM

I see someone else asked about centering all the columns to the screen, i don't want to do it to my screen as others would look wrong so changing the pixels from the left dosent cut it for me.

Has anyone got another solution for this? It must be possible surely to make the fluid look good

ShawneyJ

10-11-2012, 12:37 AM

About to install a test VB4 site to support my VB4 mods, i will be testing this out thank you ;)

Bluefin221

10-11-2012, 05:48 PM

I added an image to the bottom which appears to slightly overlap unsure how to get rid of the overlapping, anyone any ideas?

https://vborg.vbsupport.ru/

inigo

10-15-2012, 05:06 PM

Thanks for your suggestion, i will give it a try n post here..

Any update in integrating the default vbulletin footer bar links in one of your footer columns?

Thanks!

Vick98

10-17-2012, 11:04 AM

Excellent mod that makes your forum look professional.

Check out the footer: http://www.soullessknights.com

socialteenz

11-20-2012, 06:05 PM

Those of you who are trying to center this in your forum, add this to your additional.css

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

socialteenz

11-20-2012, 06:22 PM

Any update in integrating the default vbulletin footer bar links in one of your footer columns?

Thanks!

I tried & i messed it all up. Also, i didn't spend much time with it. I don't think many people would prefer it. You can use the same color for footer background & column background to make it look alike.. [I mean footer bar & my column background]

socialteenz

11-20-2012, 07:52 PM

I added an image to the bottom which appears to slightly overlap unsure how to get rid of the overlapping, anyone any ideas?

http://www.fpcforums.com/images/footer%20error.jpg

Provide a link to your site.

JasonReynolds

11-26-2012, 01:51 AM

hmm the links original color, How would you change them?

MuraTh

11-28-2012, 09:41 PM

nice thanks

socialteenz

11-29-2012, 08:41 AM

hmm the links original color, How would you change them?

Mark this is as installed for further support.

Thanks.

bada_bing

11-29-2012, 05:46 PM

OK I will ask but is there a 3.8.x version of this for some of us that are still on that version?

socialteenz

11-30-2012, 08:32 PM

OK I will ask but is there a 3.8.x version of this for some of us that are still on that version?

Yes...

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

L2Insomnia

12-07-2012, 05:33 PM

Awesome mod man thanks. It adds a level of class to VB forums and brings you out of the norm!

socialteenz

12-07-2012, 05:52 PM

Awesome mod man thanks. It adds a level of class to VB forums and brings you out of the norm!

Thank you :)

interfx

12-17-2012, 11:47 AM

I really like this footer template, and have implemented on my forum.

http://www.brassreview.com

However, when i view on my mobile device/iPad the 4th column hangs out on the right side. How can I fix this? I tried to narrow width to less than the following 1090px. but it did not display correctly.

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

Any advice out there?

Breixo

12-17-2012, 08:00 PM

Great, thanks!

thenags

12-22-2012, 06:38 PM

Anyone have a version to just add the social links without everything else?

JamalFree

01-05-2013, 05:29 PM

very intessant thanks

SouthpawK

01-05-2013, 08:09 PM

I love this! I know a little but am no expert on coding. I've got it all set up and understand where to changes the links and all. But I want to put an image in the background instead of a color. I know where to make the changes, just not sure how to put it in as far as coding. Also, doe the background image need to be a specific size to cover the entire footer as the color does? Any help is appreciated...

socialteenz

01-05-2013, 08:13 PM

gsmlover4u

01-13-2013, 01:49 PM

how can add only social icon ?

tanzeelniazi

01-13-2013, 09:46 PM

Working Perfect in Vb 4.2.0 Thanks

fxdigi-cash

02-20-2013, 02:30 AM

how can add only social icon ?

what do you mean by adding only social icons? you mean the whole footer is about social icons and no more....?? is it?

If yes, then you just need to delete everything else except this code below:

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

hit save and check it to see if works or not...

cheers

danycutu1

02-22-2013, 08:24 AM

look and works fantastic. you should make the columns fluid though, using percentage instead of pixels. looks bad in low resolutions (small monitors)

marccap

02-22-2013, 04:44 PM

I'm guessing new coding is needed to change the font for the titles such as "Quick Links" etc?

socialteenz

02-23-2013, 07:21 AM

look and works fantastic. you should make the columns fluid though, using percentage instead of pixels. looks bad in low resolutions (small monitors)

Sure i will, when i get some more time.

socialteenz

02-23-2013, 07:26 AM

I'm guessing new coding is needed to change the font for the titles such as "Quick Links" etc?

Pretty simple, go to additional.css

Find:

.footer1 .container .col4 h3 {
font-family: 'BodoniStd-BookItalic',"Times New Roman",Times,serif !important;

Change it to suit your needs.

gsmlover4u

02-26-2013, 01:46 PM

what do you mean by adding only social icons? you mean the whole footer is about social icons and no more....?? is it?

If yes, then you just need to delete everything else except this code below:

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

hit save and check it to see if works or not...

cheers

sir need some more help can you guide me how i can put this in header under username pass ?

fxdigi-cash

02-26-2013, 10:07 PM

sir need some more help can you guide me how i can put this in header under username pass ?

Hi,

can you post a snapshot of where you want to place the code?

I believe you can try placing the code at the end of the header in the header template.

Cheers :)

P.S:

if you want to place the code at the end of the header in the header template, you should place the following code to avoid any error:
<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>

</div>

and for the style play with this css in additional.css file based on your desire:

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

.fallowus {
width: 226px;
}

gsmlover4u

02-27-2013, 12:59 PM

i do edit header as you said but socialnetwork images not showing even i upload social folder in my forum root
and not showing up FOLLOW US
and how to put my twiter and facebook link in that ?

socialteenz

03-05-2013, 06:38 AM

i do edit header as you said but socialnetwork images not showing even i upload social folder in my forum root
and not showing up FOLLOW US
and how to put my twiter and facebook link in that ?

Link to your forum would be nice!

You sure, you uploaded the social icon folder in the root? cos it works perfectly.

Here is the result..

http://awesomescreenshot.com/06f108lx0c

This is what i did..

Open your header template... find

<div class="ad_global_header">

Just above that add this..

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

</div>

You can edit the [<a href="#"] # to point to your url.

Then open additional.css template & this..

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

.fallowus {
width: 226px;
}

betts02

03-05-2013, 10:27 PM

How do i remove the background image and just have it transparent ?

Solved it by using 'transparent' instead of the colour

Edited it to suit my needs and look

Many thanks

http://www.nextgenerationgamers.co.uk/

dizzynation

03-06-2013, 11:19 PM

Sweet! What if I have a Branding Free, can you provide that code?

Also, what if we have an image we want to use for background, how do we do that?

socialteenz

03-07-2013, 04:21 AM

Sweet! What if I have a Branding Free, can you provide that code?

Also, what if we have an image we want to use for background, how do we do that?

If you are branding free, find & remove these lines from my code..

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

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

</div>

Check the FAQ for adding a background image.

Also please mark as installed for further support.

Thanks.

Bob_R

03-18-2013, 09:03 PM

See the screenshot I provided.

The (in this case) PM drops down to a line by itself.

Would like it all on the same line.

For whatever reason I can't seem to figure it out. :confused:

Looks like I picked the wrong week to quit sniffing glue. :D

cc10

04-17-2013, 08:11 PM

Any plans to update this for vb5 ?

thanks

bakabanana

04-21-2013, 03:18 PM

socialteenz

04-21-2013, 05:16 PM

socialteenz

04-21-2013, 05:17 PM

Any plans to update this for vb5 ?

thanks

Sorry, nope.

walas87

04-23-2013, 10:15 AM

Thank you.

puncol

05-16-2013, 08:13 AM

Great, Thank you!

mightysanta

07-18-2013, 02:19 AM

We tried to put this on our site and when we did everything was on the left hand side. We tried that col4 edit that you told another user on page 3 but that did not change anything. Please help

fxdigi-cash

07-23-2013, 07:52 PM

We tried to put this on our site and when we did everything was on the left hand side. We tried that col4 edit that you told another user on page 3 but that did not change anything. Please help

I'm just wondering what are you trying to do??? :confused:

kiba snowpaw

08-12-2013, 02:11 PM

really great Work !!! *thumbs up*

socialteenz

08-26-2013, 09:05 AM

really great Work !!! *thumbs up*

Thank you, i am working on a new version which i will be releasing shortly :D

K4GAP

09-04-2013, 03:53 PM

What would this code look like if the background was an image.

.footer1 { background: #000; }

ozzy47

09-04-2013, 04:04 PM

What would this code look like if the background was an image.

.footer1 { background: #000; }

Something like so:

.footer1 { background: url(images/chain_gradient.jpg; }
images being the location of the image.

chain_gradient.jpg being the name of the image.

K4GAP

09-04-2013, 04:06 PM

Something like so:

.footer1 { background: url(images/chain_gradient.jpg; }
images being the location of the image.

chain_gradient.jpg being the name of the image.

Thanks Ozzy I'll give it a try

ozzy47

09-04-2013, 04:54 PM

Let me know if that does it, I did not test it out as I don't have this installed.

socialteenz

09-04-2013, 05:03 PM

What would this code look like if the background was an image.

.footer1 { background: #000; }

Here you go.

.footer1 {
background: url(url of the image) repeat fixed left top #5A9229;
}

or

.footer1 {
background-image: url(url of the image);
}

K4GAP

09-04-2013, 06:50 PM

Let me know if that does it, I did not test it out as I don't have this installed.

Yep that did it. Looks good, check it out. Link on sig.

K4GAP

09-04-2013, 06:52 PM

Here you go.

.footer1 {
background: url(url of the image) repeat fixed left top #5A9229;
}

or

.footer1 {
background-image: url(url of the image);
}

Thanks social. btw, love your site :)

socialteenz

09-04-2013, 07:04 PM

Thanks social. btw, love your site :)

Thanks man, ha i am gonna dump that site real soon.

My current forum (http://forums.petalburgwoods.com/) :D

ozzy47

09-04-2013, 07:04 PM

Yep that did it. Looks good, check it out. Link on sig.

Looks good, glad it worked out. :)

K4GAP

09-04-2013, 07:08 PM

Thanks man, ha i am gonna dump that site real soon.

My current forum (http://forums.petalburgwoods.com/) :D

Your new site is very pleasant on the eyes. Looks great!

xRaW

09-04-2013, 09:26 PM

It does look very nice indeed, thank you for sharing this!

watty005

09-05-2013, 07:20 PM

Thanks for this, it looks great! But i'm having trouble changing the color of the white text links, please see attachment, thanks.

socialteenz

09-05-2013, 07:27 PM

Thanks for this, it looks great! But i'm having trouble changing the color of the white text links, please see attachment, thanks.

Open your additional.css

Find

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

Replace White smoke with your preferred color & change the hover to match the selected color.

socialteenz

09-05-2013, 07:43 PM

..

Also i would suggest you to edit your body wrapper's width to something like this.

.wrapper1 {
margin: 0 auto;
min-width: 779px;
position: relative;
width: 90%; or 1100px;

}

Just my 0.2 cent, not necessary to do this edit though ;)

watty005

09-06-2013, 04:59 AM

Open your additional.css

Find

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

Replace White smoke with your preferred color & change the hover to match the selected color.

Thanks for your help, great mod by the way!

watty005

09-06-2013, 05:04 AM

Also i would suggest you to edit your body wrapper's width to something like this.

.wrapper1 {
margin: 0 auto;
min-width: 779px;
position: relative;
width: 90%; or 1100px;

}

Just my 0.2 cent, not necessary to do this edit though ;)

Where would I find this please? Also when I view this mod on mobile device the footer looks too big for my forum it looks too wide to the right, but it looks normal if you visit my site on a pc. Thanks again

socialteenz

09-06-2013, 08:39 AM

Where would I find this please? Also when I view this mod on mobile device the footer looks too big for my forum it looks too wide to the right, but it looks normal if you visit my site on a pc. Thanks again

On your additional.css file.

Bob_R

11-04-2013, 04:49 PM

See screenshot:

Can't read the text?? Only "Vbulletin" comes out clearly. If you squint you can see 12:44 PM and EST (on a seperate line) shouldn't they be on the same line?

Firstly, I'd like to at least be able to read/see it.

Secondly on the same line would be nice.

For whatever reason I'm having a bad day and can't find where to change this. I'm usually pretty good with this. :o:

socialteenz

11-04-2013, 04:52 PM

Bob_R

11-04-2013, 05:09 PM

I have it on a test skin. Please advise.

socialteenz

11-04-2013, 05:23 PM

Make sure you have copied the codes to your additional.css template.

With out taking a look, i can't assist you further.

Be assured that the same set up work for the rest of us, so you have made a mistake.

Bob_R

11-04-2013, 05:49 PM

Something to do with these lines.

class="shade footer_time"
class="shade footer_morecopyright"

Changed background from black to white and can see all text.

FYI: All additional.css code accounted for as per instructions

Bob_R

11-04-2013, 07:27 PM

I got it. All is well. Now, I'll decide if I even wish to use this.

john7911

11-05-2013, 10:25 AM

Thank you :)

john7911

11-17-2013, 04:47 PM

Thank you ;)

K4GAP

01-07-2014, 08:56 PM

This would be so cool if it got all it's formatting from the style being used. I wouldn't expect the submitter to help me any as he has changed to another cms. But, would any of you other readers have any insight into how this could be done?