vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)
-   -   Mini Mods - Social hover icons (https://vborg.vbsupport.ru/showthread.php?t=284652)

ramesh_umk3 06-18-2012 10:00 PM
Social hover icons
 
1 Attachment(s)
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 :D , U can mod according to ur vB skin

LIVE DEMO OF SOCIAL HOVER ICONS

Feel free to share and modify :)


All times are GMT. The time now is 09:54 AM.

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.01989 seconds
  • Memory Usage 1,733KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)bbcode_code_printable
  • (2)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (1)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.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/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.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
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete