Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
Awesome footer with Social Icons. Details »
Awesome footer with Social Icons.
Mod Version: 1.00, by socialteenz (Designer) socialteenz is offline
Developer Last Online: Nov 2019 I like it Show Printable Version Email this Page

vB Version: 4.x.x Rating: (20 votes - 4.90 average) Installs: 159
Released: 31 Jul 2012 Last Update: 31 Jul 2012 Downloads: 683
Supported Template Edits Re-usable Code Translations  

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Below that add...


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Now remove the following from your footer template


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Go to your Admin CP->>>Your Style>>>Edit Templates>>>css templates>>
additional.css


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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.

Download Now

Only licensed members can download files, Click Here for more information.

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • If you like this modification support the author by donating.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Similar Mod
Mod Developer Type Replies Last Post
65 Awesome Post Icons Skedoozy Miscellaneous Images 29 13 Oct 2015 08:55
Black + Yellow Awesome Status Icons XiTCLUB vBulletin Status Icon Sets 11 04 Jun 2013 07:25

  #31  
Old 07 Aug 2012, 12:10
socialteenz's Avatar
socialteenz socialteenz is offline
 
Join Date: May 2011
Real name: Arun
Originally Posted by synseal View Post
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;


}
__________________
Reply With Quote
  #32  
Old 07 Aug 2012, 12:52
synseal's Avatar
synseal synseal is offline
 
Join Date: Apr 2009
Real name: Ben Dover.
Originally Posted by socialteenz View Post
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.

__________________
Tech forum.
Reply With Quote
  #33  
Old 07 Aug 2012, 18:54
socialteenz's Avatar
socialteenz socialteenz is offline
 
Join Date: May 2011
Real name: Arun
Cool

Originally Posted by synseal View Post
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.
__________________
Reply With Quote
  #34  
Old 08 Aug 2012, 12:09
synseal's Avatar
synseal synseal is offline
 
Join Date: Apr 2009
Real name: Ben Dover.
Originally Posted by socialteenz View Post
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!.
__________________
Tech forum.
Reply With Quote
  #35  
Old 13 Aug 2012, 16:52
watty005 watty005 is offline
 
Join Date: Apr 2010
Real name: Craig
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.

Originally Posted by synseal View Post
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.

__________________
http://www.mylittlelibrary.co.uk Childrens Book Store (New and Used books at bargain prices)
Reply With Quote
  #36  
Old 13 Aug 2012, 20:08
e-Novator e-Novator is offline
 
Join Date: Oct 2010
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?
Reply With Quote
  #37  
Old 14 Aug 2012, 12:54
TheChief TheChief is offline
 
Join Date: Nov 2010
Added, all working and looking good

Cheers
Reply With Quote
  #38  
Old 18 Aug 2012, 00:38
socialteenz's Avatar
socialteenz socialteenz is offline
 
Join Date: May 2011
Real name: Arun
Originally Posted by watty005 View Post
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.
__________________
Reply With Quote
  #39  
Old 18 Aug 2012, 00:39
socialteenz's Avatar
socialteenz socialteenz is offline
 
Join Date: May 2011
Real name: Arun
Originally Posted by e-Novator View Post
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.
__________________
Reply With Quote
  #40  
Old 18 Aug 2012, 00:40
socialteenz's Avatar
socialteenz socialteenz is offline
 
Join Date: May 2011
Real name: Arun
Originally Posted by TheChief View Post
Added, all working and looking good

Cheers

Cheers Chief
__________________
Reply With Quote
  #41  
Old 19 Aug 2012, 04:00
soaringpine soaringpine is offline
 
Join Date: Mar 2011
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.
Reply With Quote
  #42  
Old 19 Aug 2012, 07:30
KrU$ty's Avatar
KrU$ty KrU$ty is offline
 
Join Date: Oct 2007
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.
__________________
Pixel Pirate
Reply With Quote
  #43  
Old 19 Aug 2012, 21:01
Phil Kėvin Phil Kėvin is offline
 
Join Date: Jul 2009
Is this possible?
Attached Images
File Type: jpg 62Rii.jpg (41.6 KB, 73 views)
Reply With Quote
  #44  
Old 19 Aug 2012, 21:11
ChiNa ChiNa is offline
 
Join Date: Jul 2012
Real name: CM
Can this be made to vB 3.8?

I would appreciated,, thank you in advance,, Waiting for a reply!
__________________
I am having a little break from vB Developing. I am trying to finish my PHP and MYSQL courses for now. I will answer all my PM's if anyone needed help for my products, but only when I can be online on vB.org. Its great to see new and old developers keeping vB.org alive! Thank you all for your support!CM
Reply With Quote
  #45  
Old 19 Aug 2012, 22:06
Gemma's Avatar
Gemma Gemma is offline
 
Join Date: Apr 2004
Real name: Gemma
Originally Posted by KrU$ty View Post
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)

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Change it to this

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Basically, remove the <li> and replace the </li> with <br/> in each link
__________________
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 17:49.

Layout Options | Width: Wide Color: