Go Back   vb.org Archive > vBulletin Modifications > Archive > vB.org Archives > vBulletin 3.5 > vBulletin 3.5 Template Modifications
FAQ Community Calendar Today's Posts Search

Reply
 
Thread Tools
[CM] Social 5ive Icons (Grayscale effect by hover) Details »»
[CM] Social 5ive Icons (Grayscale effect by hover)
Version: 1.00, by ChiNa ChiNa is offline
Developer Last Online: Feb 2023 Show Printable Version Email this Page

Version: 3.5.8 Rating:
Released: 08-24-2012 Last Update: Never Installs: 1
Template Edits
Additional Files Translations  
No support by the author.

Social 5ive may obviously stand for Social Five! I have made this mod from the bottom! I made this 3-4 years ago for my old MYBB forum, since it has been everywhere, but not her on vBulletin. And I had no time to make a refreshment of this! The original comes with 3 Icons, while I have build this one with 5 icons!
Its placed right under your forum header,,, On the left side!




How to Install:
Step 1: First of all, dowload the "Images.zip" from the attachments below.
Inside the "Images.zip" there are 1 folder, called "images"! If you use any FTP software then either Drag or upload the images folder to your forum root!

Step 2: Go to your ADMINCP, and on your right side menu, scroll down and choose Styles & Template, then click on Style Manager! Now on your right you should see your Template name and beside it you will see a DROPDOWN menu, now go to the dropdown menu and choose Edit Templates. Now you should be in the Template Area. Look for your "header" template!

Step 3: Now in your header, you should add the following code below EVERYTHING ELSE! So the Social Five icons will show up at the end of your header! You can also add it at the start, but I dont know how it will look like!

You decide where to put it, but I go for the header template:

Code to add:
Code:
 <style type="text/css">
 
 #facebook
 {
      background: url('images/social5/facebookb.png');
 
      height: 36px;
      width: 36px;
      display: block;
 }
 
 #facebook:hover
 {
     background: url('images/social5/facebook.png');
  
 }
 
 #twitter
 {
      background: url('images/social5/twitterb.png');
 
      height: 36px;
      width: 36px;
      display: block;
 }
 
 #twitter:hover
 {
     background: url('images/social5/twitter.png');
  
 }
 
 #digg
 {
      background: url('images/social5/diggb.png');
 
      height: 36px;
      width: 36px;
      display: block;
 }
 
 #digg:hover
 {
     background: url('images/social5/digg.png');
  
 }
 
 #linkedin
 {
      background: url('images/social5/linkedinb.png');
 
      height: 36px;
      width: 36px;
      display: block;
 }
 
 #linkedin:hover
 {
     background: url('images/social5/linkedin.png');
  
 }
 
 #youtube
 {
      background: url('images/social5/youtubeb.png');
 
      height: 36px;
      width: 36px;
      display: block;
 }
 
 #youtube:hover
 {
     background: url('images/social5/youtube.png');
  
 }
 
 </style>
 <div style="width:410px; height:36px; border:0px solid red; padding:5px;">
 
 <a id='facebook' href='http://www.facebook.com'alt="Facebook"  src="#"  style="width:36px; height:36px; border:0px solid blue;  float:left;"  /></a>
 <a id='twitter' href='http://www.twitter.com' alt="Twitter" src="#"   style="width:36px; height:36px; border:0px solid blue; float:left;"   /></a>
 <a id='digg' href='http://www.digg.com' alt="Digg" src="#"   style="width:36px; height:36px; border:0px solid blue; float:left;"   /></a>
 <a id='linkedin' href='http://linkedin.com' alt="Linkedin" src="#"   style="width:36px; height:36px; border:0px solid blue; float:left;"   /></a>
 <a id='youtube' href='http://www.youtube.com' alt="Youtube" src="#"   style="width:36px; height:36px; border:0px solid blue; float:left;"   /></a>
 </div>


Click SAVE,
Thats it!

Thanks alot for following up, Make sure to click Installed, and thanks to those who already have clicked Installed!


Extra & Optional Setup




If you wanted to place the Icons in middle or center. Then add 2 extra codes!
Add one code at the start of the code, and one at the end!

Codes for CENTERING the icons:

Start Code:
<div align="center">
End Code: </div>

If you wanted to change it to the RIGHT or LEFT side of your screen! Simply change the word "center", to either right or left!

Thats it!

Thats it, thanks for following up on my tutorial!



Show Your Support

  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Reply


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

Forum Jump


All times are GMT. The time now is 10:37 AM.


Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2024, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.03603 seconds
  • Memory Usage 2,196KB
  • Queries Executed 14 (?)
More Information
Template Usage:
  • (1)SHOWTHREAD
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)ad_showthread_beforeqr
  • (1)bbcode_code
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (6)navbar_link
  • (120)option
  • (1)post_thanks_box
  • (1)post_thanks_button
  • (1)post_thanks_javascript
  • (1)post_thanks_navbar_search
  • (1)post_thanks_postbit_info
  • (1)postbit_onlinestatus
  • (1)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available:
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files:
  • ./showthread.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/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_post_thanks.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
  • showthread_start
  • showthread_getinfo
  • forumjump
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • post_thanks_function_post_thanks_off_start
  • post_thanks_function_post_thanks_off_end
  • post_thanks_function_fetch_thanks_start
  • post_thanks_function_fetch_thanks_end
  • post_thanks_function_thanked_already_start
  • post_thanks_function_thanked_already_end
  • fetch_musername
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • post_thanks_function_can_thank_this_post_start
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • showthread_complete