vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vBulletin 3.8 Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=236)
-   -   Show Thread Enhancements - [CM] Posbit Avatar Hover (Turns 360+ Effect) vB 3.8.x (https://vborg.vbsupport.ru/showthread.php?t=286291)

ChiNa 08-03-2012 10:00 PM
[CM] Posbit Avatar Hover (Turns 360+ Effect) vB 3.8.x
 
1 Attachment(s)
This is a very small modification and works with hovering your mouse over an Avatar! Location in Postbit or Posbit Legacy template! It will make your avatar turn 360 Degrees all the way arround, and back to normal! Only by mouse hovering! This mod is only for vBulletin 3.8 and 4.x! Now I have also a ZOOM OUT EFFECT code added !

 Modification is only visible for users in Firefox, Safari, Chrome & Opera! Does sadly not work for users using Internet Explorer!

DEMO HERE

For vBulletin 4.x Click HERE

Check Example Images Below, Befor Install

2 Template Edits

2 different Effects 360 Degrees Turn Effect & Zoom Out Effect

360 Degrees Turn Effect
https://vborg.vbsupport.ru/external/2012/08/29.gif


Zoom out Effect
https://vborg.vbsupport.ru/external/2012/08/30.gif

This Tutorial is only showing the code for 360 Degrees Turn Effect.You can find the code for the ZOOM OUT EFFECT Below in the Extras Section!

=============== Tutorial Starts ===============

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 Templates that you have, On the template that you use, Click on the dropdown to your right, and choose "MAIN CSS"!

Step 2: Scroll all the way down to your "Additional CSS" and past the code below, at the bottom of all the other codes.

Code to add in Additional CSS:
PHP 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 Templates, and inside the you must decide which Template you use, if its Posbit or Postbit Legacy, In my case I use "Postbit Legacy", but as Default vBulletin is set to "Postbit"

So go a head and click on one of them, depends on which one you use!

Step 4: In your Postbit template find the 2 lines below.

Code to find:
PHP Code:
<if condition="$show['avatar']">
    <div class="smallfont"> 
Now replace it with the code below.

Replace With:
PHP Code:
<if condition="$show['avatar']">
<div class="smallfont myavatar"> 

And dont worry, it will not make any further conflicts with your template, Not even later, if you upgrade your board!

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!

=============== Tutorial Ends ===============


EXTRAS & OPTIONAL:

Below you will see the code for the ZOOM OUT EFFECT!

Zoom Out Effect:
PHP Code:
.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;
} 

New Joe 08-04-2012 02:47 AM
Anyone know how to make this work for vb4?

Midohash 08-04-2012 06:13 PM
Thank you, but what is the benefit from rotating the avatar 360 degrees?

ChiNa 08-04-2012 07:14 PM
Now also a Zoom effect added!

And here is the mod for vBulletin 4.x, Published Today:
https://vborg.vbsupport.ru/showthread.php?p=2354464

Well its only to make your posts a bit Fancy! As you can see this is only a Template Modification, and not an ADDON!, So there is not much benifits when you make a Template Modification!

3raq4all 08-06-2012 06:44 PM
Thank you

tehPARADOX 08-13-2012 10:30 PM
Thanks!

ChiNa 09-20-2012 03:45 PM
Quote:
Originally Posted by New Joe (Post 2354230)
Anyone know how to make this work for vb4?

Now Also For vBulletin 4.x / CLICK HERE

You are welcome guys, Make sure click on Installed!
I see many thanks, and only 1 Installs! And thats actually myself, becaue I have it installed too! Thats all what you guys need to show your support!

mohammed146 09-20-2012 03:58 PM
nice man

SIINSI 09-27-2012 08:03 PM
Installed. Thanks! Changed "div" to "td" on 3.7X.

ChiNa 09-27-2012 09:10 PM
Quote:
Originally Posted by SIINSI (Post 2369094)
Installed. Thanks! Changed "div" to "td" on 3.7X.
Hi buddy, the Code just got updated after your reply! Please try to change the code to the updated one! Its only 1 line which should be change in your Postbit or Postbit_Legacy! No changes in your your MAIN CSS !

Look in your Postbit or Postbit_legacy for the following code below:

Find code:
<if condition="$show['avatar']">
<div class="smallfont">

Now replace it with the code below:

Replace with:
<if condition="$show['avatar']">
<div class="smallfont myavatar">

Done.. thanks for clicking on the Install button!

matrex722 11-10-2012 12:33 PM
Wow thanks for this

al2thero 11-25-2012 06:42 PM
Works great many thanks


All times are GMT. The time now is 03:28 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.01294 seconds
  • Memory Usage 1,769KB
  • 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
  • (4)bbcode_php_printable
  • (2)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (12)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