vBulletin Mods

The Official vBulletin Modifications Site
https://www.vbulletin.org/forum/showthread.php?t=284652

Social hover icons
by ramesh_umk3
 19 Jun 2012 17:09
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


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

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 12:53.

Powered by vBulletin® Version 3.8.14
Copyright © 2021, MH Sub I, LLC dba vBulletin. All Rights Reserved. vBulletin® is a registered trademark of MH Sub I, LLC
Copyright ©2001 - , vbulletin.org. All rights reserved.