ChiNa
08-03-2012, 10:00 PM
I made this modification for vBulletin 3.8, but today I decided to try on vB4.x! I must admit it was not easy, because i never had worked on a vB 4.x befor! 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!!
Modification is only visible for users in Firefox, Safari, Chrome & Opera! Does sadly not work for users using Internet Explorer!
2 Template Edits
2 Different Effects: 360 Degrees Turn & Zoom Out Effect
For vBulletin 3.8 by Clicking HERE! (https://vborg.vbsupport.ru/showthread.php?t=286291)
360 Turn Demo:
https://vborg.vbsupport.ru/external/2012/08/26.gif
Zoom Out Demo
https://vborg.vbsupport.ru/external/2012/08/27.gif
:::::::::::::::::::::::::::: TUTORIALS START :::::::::::::::::::::::::::::::::
Lets begin:
Step 1: First Go to your ADMINCP, find Styles & Templates, and then click on Style Manager!
Now on your right side you should see the Dropdown, now in the dropdown choose Edit Template!
Step 2: Scroll down and look for CSS Templates, and click to enter the template! Now look for "additional.css", Click and enter inside the "additional.css" template, and past the code below, at the bottom! (If there are any other codes, Usually Additional CSS is empty)!
Add the Code below in the additional.css:
360 Degrees Turn Code:
.myavatar:hover {
transition: all 3s ease;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease; transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg); position:relative;
}
Step 3: Now go to your Styles & Templates, and again click on Style Manager!
And on again on your right side choose "Edit Template" in the dropdown!
Now in your templates, look for Postbit Legacy, 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!
Step 4: In your Postbit template find the code below.
Code to find:
<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />
Now replace it with the code below.
Replace With:
<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>
Notice, we only add added 2 things: <div class="myavatar"> in the front, And </div> at the end of the code! We did not remove the original!
Dont worry, it does not make any conflicts with template, Not even in the future!
Click Save, and your done!
Please Notice, if you use this mod, make sure to click install, if you later needed support for this mod!
:::::::::::::::::::::::::::: TUTORIALS ENDS :::::::::::::::::::::::::::::::::
Extra Modification & Optional
Notice: The code that we added in the Additional CSS was the 360 Degreess Turn Effect code, Below I have posted the code for Zoom Out Effect! Enjoy
Zoom Out Effect:
.myavatar:hover {
opacity: 1; filter: alpha(opacity=100);
transition: all 2s ease;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform: scale(1.5);
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
position:relative;
}Add code in the additional.css template, And Done!
Modification is only visible for users in Firefox, Safari, Chrome & Opera! Does sadly not work for users using Internet Explorer!
2 Template Edits
2 Different Effects: 360 Degrees Turn & Zoom Out Effect
For vBulletin 3.8 by Clicking HERE! (https://vborg.vbsupport.ru/showthread.php?t=286291)
360 Turn Demo:
https://vborg.vbsupport.ru/external/2012/08/26.gif
Zoom Out Demo
https://vborg.vbsupport.ru/external/2012/08/27.gif
:::::::::::::::::::::::::::: TUTORIALS START :::::::::::::::::::::::::::::::::
Lets begin:
Step 1: First Go to your ADMINCP, find Styles & Templates, and then click on Style Manager!
Now on your right side you should see the Dropdown, now in the dropdown choose Edit Template!
Step 2: Scroll down and look for CSS Templates, and click to enter the template! Now look for "additional.css", Click and enter inside the "additional.css" template, and past the code below, at the bottom! (If there are any other codes, Usually Additional CSS is empty)!
Add the Code below in the additional.css:
360 Degrees Turn Code:
.myavatar:hover {
transition: all 3s ease;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease; transform:rotate(360deg);
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg); position:relative;
}
Step 3: Now go to your Styles & Templates, and again click on Style Manager!
And on again on your right side choose "Edit Template" in the dropdown!
Now in your templates, look for Postbit Legacy, 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!
Step 4: In your Postbit template find the code below.
Code to find:
<img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" />
Now replace it with the code below.
Replace With:
<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>
Notice, we only add added 2 things: <div class="myavatar"> in the front, And </div> at the end of the code! We did not remove the original!
Dont worry, it does not make any conflicts with template, Not even in the future!
Click Save, and your done!
Please Notice, if you use this mod, make sure to click install, if you later needed support for this mod!
:::::::::::::::::::::::::::: TUTORIALS ENDS :::::::::::::::::::::::::::::::::
Extra Modification & Optional
Notice: The code that we added in the Additional CSS was the 360 Degreess Turn Effect code, Below I have posted the code for Zoom Out Effect! Enjoy
Zoom Out Effect:
.myavatar:hover {
opacity: 1; filter: alpha(opacity=100);
transition: all 2s ease;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
transform:rotate(0deg);
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform: scale(1.5);
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
position:relative;
}Add code in the additional.css template, And Done!