Social hover icons
Mod Version: 1.00, by ramesh_umk3
| vB Version: 4.x.x | Rating:  (0 vote - 0 average) |
Installs: 3 |
| Released: 19 Jun 2012 | Last Update: Never | Downloads: 0 |
 Supported
Template Edits
Re-usable Code
|
||
A simple clickable and hover icons attracts user to use them
Procedure :
1) Style Manager --> Edit Template --> navbar
Add Code at the END
If u want to use modification only on Index page then use template condition..
2) additional.css
Add code at the END
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
http://www.pdachat.com
Feel free to share and modify
Procedure :
1) Style Manager --> Edit Template --> navbar
Add Code at the END
<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>
<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;
}
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 http://www.pdachat.com
Feel free to share and modify
Download
No files for download.