Go Back   vb.org Archive > vBulletin Modifications > vBulletin 4.x Modifications > vBulletin 4.x Template Modifications
Reload this Page Mini Mods - Social hover icons
FAQ Members List Calendar Search Today's Posts Mark Forums Read
Social hover icons Details »»
Social hover icons
MOD Information
The Developer
 
Version: 1.00, by ramesh_umk3 ramesh_umk3 is offline
Developer Last Online: Jan 2023 Show Printable Version Email this Page
Category: Mini Mods - Version: 4.x.x Rating:
Released: 06-18-2012 Last Update: Never Installs: 3
Template Edits
Re-useable Code  
No support by the author.

A simple clickable and hover icons attracts user to use them

Procedure :

1) Style Manager --> Edit Template --> navbar

Add Code at the END

Quote:

<div style="float:right" class="box">
<a href="YOUR FACEBOOK LINK HERE" target="_blank" class="social-media facebook"><img src="http://www.megawrz.com/images/faceb.png" width="30" height="30" alt="Facebook" /></a>
<a href="YOUR TWITTER LINK HERE" target="_blank" class="social-media twitter"><img src="http://www.megawrz.com/images/tweet.png" width="30" height="30" alt="Twitter" /></a>
<a href="YOUR YOUTUBE LINK HERE" target="_blank" class="social-media youtube"><img src="http://www.megawrz.com/images/mytube.png" width="30" height="30" alt="YouTube" /></a>
</div>
If u want to use modification only on Index page then use template condition..

Quote:
<vb:if condition="THIS_SCRIPT=='index'">
NAVBAR CODE HERE
</vb:if>

2) additional.css

Add code at the END

Code:
/*Created On : June 15th 2012 */
/*The Mobile Phone OS Community*/
/*www.megawrz.com*/

.box {
	width: 200px;
	height: 48px;
	margin: 0 0 10px 0;
	float: left;
	
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
	
	background: #DEDEDE; 
	background: -moz-linear-gradient(top,  #DEDEDE 0%, #DEDEDE 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DEDEDE), color-stop(100%,#DEDEDE));
	background: -webkit-linear-gradient(top,  #DEDEDE 0%,#DEDEDE 100%); 
	background: -o-linear-gradient(top,  #DEDEDE 0%,#DEDEDE 100%); 
	background: -ms-linear-gradient(top,  #DEDEDE 0%,#DEDEDE 100%); 
	background: linear-gradient(top,  #DEDEDE 0%,#DEDEDE 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DEDEDE', endColorstr='#DEDEDE',GradientType=0 );
	
    -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
    -moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
    box-shadow: 0px 1px 5px 0px #4a4a4a;
}


.facebook {
background: rgb(83,107,155);
background: -moz-linear-gradient(top, rgba(83,107,155,1) 0%, rgba(75,105,167,1) 9%, rgba(75,105,167,1) 13%, rgba(88,113,167,1) 18%, rgba(42,70,128,1) 32%, rgba(42,70,128,1) 89%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(83,107,155,1)), color-stop(9%,rgba(75,105,167,1)), color-stop(13%,rgba(75,105,167,1)), color-stop(18%,rgba(88,113,167,1)), color-stop(32%,rgba(42,70,128,1)), color-stop(89%,rgba(42,70,128,1)));
background: -webkit-linear-gradient(top, rgba(83,107,155,1) 0%,rgba(75,105,167,1) 9%,rgba(75,105,167,1) 13%,rgba(88,113,167,1) 18%,rgba(42,70,128,1) 32%,rgba(42,70,128,1) 89%);
background: -o-linear-gradient(top, rgba(83,107,155,1) 0%,rgba(75,105,167,1) 9%,rgba(75,105,167,1) 13%,rgba(88,113,167,1) 18%,rgba(42,70,128,1) 32%,rgba(42,70,128,1) 89%);
background: -ms-linear-gradient(top, rgba(83,107,155,1) 0%,rgba(75,105,167,1) 9%,rgba(75,105,167,1) 13%,rgba(88,113,167,1) 18%,rgba(42,70,128,1) 32%,rgba(42,70,128,1) 89%);
background: linear-gradient(top, rgba(83,107,155,1) 0%,rgba(75,105,167,1) 9%,rgba(75,105,167,1) 13%,rgba(88,113,167,1) 18%,rgba(42,70,128,1) 32%,rgba(42,70,128,1) 89%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#536b9b', endColorstr='#2a4680',GradientType=0 );
}

.twitter {
	background: rgb(62,152,193);
	background: -moz-linear-gradient(top, rgba(62,152,193,1) 0%, rgba(108,168,196,1) 10%, rgba(108,168,196,1) 13%, rgba(55,132,168,1) 26%, rgba(18,121,169,1) 44%, rgba(18,121,169,1) 89%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(62,152,193,1)), color-stop(10%,rgba(108,168,196,1)), color-stop(13%,rgba(108,168,196,1)), color-stop(26%,rgba(55,132,168,1)), color-stop(44%,rgba(18,121,169,1)), color-stop(89%,rgba(18,121,169,1)));
	background: -webkit-linear-gradient(top, rgba(62,152,193,1) 0%,rgba(108,168,196,1) 10%,rgba(108,168,196,1) 13%,rgba(55,132,168,1) 26%,rgba(18,121,169,1) 44%,rgba(18,121,169,1) 89%);
	background: -o-linear-gradient(top, rgba(62,152,193,1) 0%,rgba(108,168,196,1) 10%,rgba(108,168,196,1) 13%,rgba(55,132,168,1) 26%,rgba(18,121,169,1) 44%,rgba(18,121,169,1) 89%);
	background: -ms-linear-gradient(top, rgba(62,152,193,1) 0%,rgba(108,168,196,1) 10%,rgba(108,168,196,1) 13%,rgba(55,132,168,1) 26%,rgba(18,121,169,1) 44%,rgba(18,121,169,1) 89%);
	background: linear-gradient(top, rgba(62,152,193,1) 0%,rgba(108,168,196,1) 10%,rgba(108,168,196,1) 13%,rgba(55,132,168,1) 26%,rgba(18,121,169,1) 44%,rgba(18,121,169,1) 89%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e98c1', endColorstr='#1279a9',GradientType=0 );
}
.youtube {
background: rgb(165,58,58);
background: -moz-linear-gradient(top, rgba(165,58,58,1) 0%, rgba(189,78,74,1) 8%, rgba(189,78,74,1) 13%, rgba(189,78,74,1) 18%, rgba(169,42,37,1) 32%, rgba(169,42,37,1) 89%, rgba(130,28,28,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(165,58,58,1)), color-stop(8%,rgba(189,78,74,1)), color-stop(13%,rgba(189,78,74,1)), color-stop(18%,rgba(189,78,74,1)), color-stop(32%,rgba(169,42,37,1)), color-stop(89%,rgba(169,42,37,1)), color-stop(100%,rgba(130,28,28,1)));
background: -webkit-linear-gradient(top, rgba(165,58,58,1) 0%,rgba(189,78,74,1) 8%,rgba(189,78,74,1) 13%,rgba(189,78,74,1) 18%,rgba(169,42,37,1) 32%,rgba(169,42,37,1) 89%,rgba(130,28,28,1) 100%);
background: -o-linear-gradient(top, rgba(165,58,58,1) 0%,rgba(189,78,74,1) 8%,rgba(189,78,74,1) 13%,rgba(189,78,74,1) 18%,rgba(169,42,37,1) 32%,rgba(169,42,37,1) 89%,rgba(130,28,28,1) 100%);
background: -ms-linear-gradient(top, rgba(165,58,58,1) 0%,rgba(189,78,74,1) 8%,rgba(189,78,74,1) 13%,rgba(189,78,74,1) 18%,rgba(169,42,37,1) 32%,rgba(169,42,37,1) 89%,rgba(130,28,28,1) 100%);
background: linear-gradient(top, rgba(165,58,58,1) 0%,rgba(189,78,74,1) 8%,rgba(189,78,74,1) 13%,rgba(189,78,74,1) 18%,rgba(169,42,37,1) 32%,rgba(169,42,37,1) 89%,rgba(130,28,28,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a53a3a', endColorstr='#821c1c',GradientType=0 );
}

.social-media {
	width: 41px;
	display: block;
	float: left;
	height: 33px;
	padding: 5px 4px 2px 4px;
	margin: -2px 0 0 13px;
	text-align: center;
	opacity: .8;
	filter: alpha(opacity=90);
		
	-webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 0 0 5px 5px;

    -webkit-box-shadow: 0px 1px 2px 0px #000;
    -moz-box-shadow: 0px 1px 2px 0px #000;
    box-shadow: 0px 1px 2px 0px #000;
}

.social-media:hover {
	padding: 10px 4px 2px 4px;
	opacity: 1;
	filter: none;
    -webkit-box-shadow: inset 0px 1px 2px 0px #666;
    -moz-box-shadow:	inset 0px 1px 2px 0px #666;
    box-shadow: 		inset 0px 1px 2px 0px #666;
}
In .box tag of css u can use different color shades to background of top and bottom sections
i have added only "DEDEDE" Hex color on both top and bottom according to default vBulletin Style , U can mod according to ur vB skin

LIVE DEMO OF SOCIAL HOVER ICONS

Feel free to share and modify

Show Your Support

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

« Previous Thread | Next Thread »
Thread Tools

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:50 AM.

Contact Us - Archive - Top

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.
X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.08073 seconds
  • Memory Usage 2,212KB
  • Queries Executed 15 (?)
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
  • (2)bbcode_quote
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)modsystem_post
  • (1)navbar
  • (4)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