[CM] Username Blink - On Mouse Hover vB4.x

[CM] Username Blink - On Mouse Hover vB4.x

Mod Version: 1.00, by ChiNa

vB Version: 4.2.0	Rating: (2 votes - 4.50 average)	Installs: 10
Released: 09 Nov 2012	Last Update: 16 Nov 2012	Downloads: 82
Not Supported Template Edits Re-usable Code

This was Requested by a member on our forum vBulletin-Mods..! This is a simple Modification! Now this is another Trick by hovering your mouse over a username, and it will have Blinks on it! Because the GIFs are used as a background image...

Notice: The code is made by myself, while the Images can be found online! Therefor you can freely re-use the code from my side!

Here are all 4 Animated Gif Blinks/Images:

Gray Blink:
Green Blink:
Red Blink:
Aqua Blink:

1) First of all, Downlod all the 4 Animated Gifs that I have attached below in the ZIP file called "Blinks.zip" or simply RIGHT click and copy them to your computer from the top.. Now after downloading the images, Upload them all to your forums "images" Folder!

2) Go to your ADMINCP >> and then in your Style Manager (Style & Templates) >> section, click on the DROPDOWN to its right, and click on Edit Templates >> Now look for CSS Templates and click to enter. Now choose the Additional.css Template.

3) Add the following Code below everything else in your Additional.css Template:

Add This Code Below all the way below:

PHP Code:


.blink1:hover {
  background: URL("images/blink1.gif");
  }
  .blink2:hover {
  background: URL("images/blink2.gif");
  }
  .blink3:hover {
  background: URL("images/blink2.gif");
  }
  .blink4:hover {
  background: URL("images/blink4.gif");
  }

What you just added is 3 Different "Animated GIF" wich blinks to your CSS Template! Now we are ready to assign them to EACH USERGROUP, And I will assign them 1 by 1 to 3 different USERGROUPS! But showing you only 1 TIME, you have to do the rest.

4) Now if you have Uploaded the 4 GIF IMAGES which is inside the "Blinks.zip" file folder go to next step! The images are important to upload first!

5) Now Its upto you which BLINK COLOR you want to assign, and to which group!

Go to your ADMINCP, and then find USEGROUP that you wanna assign a blinking image too.. Lets stay we choose
the Administrator Group!

Click on the Administrator group! Now if you look on the new page, you will see: Title, Description, User Title and Username HTML Markup..

We need the "Username HTML Markup"! Notice that there are 2 FIELDS there.... And we have to add
our code in both FIELDS! I will call the first field for "FIELD 1" and the other for "FIELD 2"!

Add the following code in first field (Field 1):

Code:

<span class="blink1">

And add this code in "SECOND" field (Field 2):

Code:

</span>

Thats it............ We are done.

One more thing, if you wanted to have "BIG" letters assigned to each usergroup, then add the following code in the front of the other codes
we just added...

Add the following code in FIELD 1, at the VERY START:

Code:

<b>

Add the second code in FIELD 2:

Code:

</b>

So together it should look like this:
Field 1: 
Field 2: 

NOW WE ARE OFFICIALY DONE!

One Last Thing: Remember that we added 3 Different BLINKS, you have 3 more to go! So do the same thing in the NEXT Usergoup, but remember instead of  you change the text called "blink1" to "blink2" or "blink3"! If you wanted

And if you wanted to add more than 4 blinks, Then go to your "Aditional.css" template again, and add the next code with 10 BLINKS!

10 different Codes:

Code:

.blink1:hover {
  background: URL("images/blink1.gif");
  }
  .blink2:hover {
  background: URL("images/blink2.gif");
  }
  .blink3:hover {
  background: URL("images/blink3.gif");
  }
  .blink4:hover {
  background: URL("images/blink4.gif");
  }
  .blink5:hover {
  background: URL("images/blink5.gif");
  }
  .blink6:hover {
  background: URL("images/blink6.gif");
  }
  .blink7:hover {
  background: URL("images/blink7.gif");
  }
  .blink8:hover {
  background: URL("images/blink8.gif");
  }
  .blink9:hover {
  background: URL("images/blink9.gif");
  }
  .blink0:hover {
  background: URL("images/blink0.gif");
  }

There are 10 DIFFERENT BLINKS, after adding the code to your ADDITIONAL.CSS, make sure to add the IMAGES also to your forums IMAGES folder!

Update: Images & Blinks Added Directly on TOP : 1 New Blink added

Notice: You can add your own Images as well, these are the ones I already had using in my own forum!

Download

Blinks.zip (23.3 KB, 91 downloads)

Screenshots

vBulletin LTS