Jump to content
vBWarez - Rest In Peace

[vB4] Posbit Avatar Hover (Turns 360+ Effect)

Recommended Posts

[CENTER][SIZE=3]It was not easy, but I made it! I had not much time, so for now this modification is for "Postbit_Legacy" Templates! I will later make another mod for the Postbit!![/SIZE]
Modification is only visible for users in [/SIZE][SIZE=2][COLOR=Red]Firefox[/COLOR][/SIZE][SIZE=2], [/SIZE][SIZE=2][COLOR=SeaGreen]Safari[/COLOR][/SIZE][SIZE=2], [/SIZE][SIZE=2][COLOR=RoyalBlue]Chrome[/COLOR][/SIZE][SIZE=2] & [/SIZE][SIZE=2][COLOR=DarkRed]Opera[/COLOR][/SIZE][SIZE=2]! Does sadly not work for users using[COLOR=DarkOrange] Internet Explorer![/COLOR][/SIZE][/B][/SIZE]

[SIZE=3][COLOR=YellowGreen][B]2 Template Edits
[/B][/COLOR][/SIZE] [SIZE=3][COLOR=DeepSkyBlue][B]2 Different Effects: [COLOR=DarkOrchid]360 Degrees Turn[/COLOR] & [COLOR=Red]Zoom Out Effect[/COLOR]

[COLOR=Black]For vBulletin 3.8 by [URL="http://www.vbulletin.org/forum/showthread.php?t=286291"][COLOR=Red]Clicking HERE![/COLOR][/URL]

[CENTER][B][COLOR=DarkOrchid]360 Turn Demo:

[COLOR=Red][B] Zoom Out [/B][/COLOR][COLOR=Red][B]Demo[/B][/COLOR]
[B][COLOR=DarkOrchid] [IMG]http://i1139.photobucket.com/albums/n557/ChiNa-Cheats/WhiteZoom.gif[/IMG][/COLOR][/B]

[B]:::::::::::::::::::::::::::: [SIZE=3][COLOR=DarkOrchid]TUTORIALS START[/COLOR][/SIZE] :::::::::::::::::::::::::::::::::[/B]
Lets begin:[/SIZE][/B]

[SIZE=3][B]Step 1:[/B][/SIZE] First Go to your [B][COLOR=DarkRed]ADMINCP[/COLOR],[/B] find Styles & Templates, and then click on Style Manager!

Now on your right side you should see the [B]Dropdown[/B], now in the dropdown choose Edit Template!

[SIZE=3][B]Step 2:[/B][/SIZE] Scroll down and look for [COLOR=DarkRed][B]CSS Templates[/B][/COLOR], and click to enter the template! Now look for "[B][COLOR=DarkRed]additional.css[/COLOR][/B]", Click and enter inside the "[B][COLOR=DarkRed]additional.css[/COLOR][/B]" template, and past the code below, at the bottom! (If there are any other codes, Usually Additional CSS is empty)!

[SIZE=3][B]Add the Code below in the [/B][B][COLOR=DarkRed]additional.css[/COLOR][/B][/SIZE][SIZE=3][B]:[/B][/SIZE]
[SIZE=3][COLOR=DarkOrchid]360 Degrees Turn Code:[/COLOR][/SIZE][/B]
[php].myavatar:hover {
transition: all 3s ease;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease; transform:rotate(360deg);
-webkit-transform:rotate(360deg); position:relative;

Step 3[/B][/SIZE]: Now go to your [COLOR=DarkRed][B]Styles & Template[/B][/COLOR]s, and again click on [COLOR=DarkRed][B]Style Manager[/B][/COLOR]!
And on again on your right side choose "[COLOR=DarkRed][B]Edit Template[/B][/COLOR]" in the dropdown!

Now in your templates, look for [COLOR=DarkRed][B]Postbit Legacy[/B][/COLOR], and click and enter the template! Now this mod is only for Postbit Legacy, But later I will make another one for the Postbit template as well!

[SIZE=3][B]Step 4:[/B][/SIZE] In your [COLOR=DarkRed][B]Postbit[/B] [/COLOR]template find the code below.

[SIZE=3][B]Code to find:[/B][/SIZE]
[php]<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />[/php][B]

Now replace it with the code below.[/B]

[SIZE=3][B]Replace With:[/B][/SIZE]
[php]<div class="myavatar"><img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" /></div>[/php][B]

Notice, we only add added 2 things[/B]: [B][COLOR=DarkRed]<div class="myavatar">[/COLOR][/B] in the front, And [B][COLOR=DarkRed]</div>[/COLOR] [/B]at the end of the code! [B]We did not remove the original![/B]
Dont worry, it does not make any conflicts with template, Not even in the future!

[B][SIZE=3][COLOR=DeepSkyBlue][COLOR=Black]Click Save[/COLOR][COLOR=Black], and your done![/COLOR][/COLOR][/SIZE]

[/B][CENTER][SIZE=3][COLOR=DeepSkyBlue][B]Please Notice, if you use this mod, make sure to click install, if you later needed support for this mod![/B][/COLOR][/SIZE][/CENTER]

[CENTER][B] :::::::::::::::::::::::::::: [SIZE=3][COLOR=DarkOrchid]TUTORIALS ENDS[/COLOR][/SIZE] :::::::::::::::::::::::::::::::::[/B]

[CENTER][B][SIZE=3][COLOR=DarkOrange]Extra Modification & Optional[/COLOR][/SIZE][/B]
Notice: The code that we added in the Additional CSS was the [COLOR=DarkOrchid][B]360 [/B][B]Degreess Turn Effect[/B][/COLOR] code, Below I have posted the code for [COLOR=Red][B]Zoom Out Effect[/B][/COLOR]! Enjoy[B]

[SIZE=3][COLOR=Black][COLOR=DarkRed][COLOR=Red]Zoom Out Effect:[/COLOR][/COLOR]
[/COLOR][/SIZE][/B][php].myavatar:hover {
opacity: 1; filter: alpha(opacity=100);
transition: all 2s ease;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
transform: scale(1.5);
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
}[/php]Add code in the [B][COLOR=DarkRed]additional.css[/COLOR][/B] template, And Done![/CENTER]
  • Like 2
Link to post
Share on other sites
  • 5 months later...
  • 6 months later...
  • 11 months later...
  • Create New...