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

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):

<span class="blink1">

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

</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:

<b>

Add the second code in FIELD 2:

</b>

So together it should look like this:
Field 1: <b><span class="blink1">
Field 2: </b></span>

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 <span class="blink1"> 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:

.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!

[ozzy47]

Hey ChiNa-Man is the title of the mod supposed to say vB3.8 even though you have it listed as vB Version: 4.2.0?

[ibrahimkoky]

thanks- Tagged

[ChiNa]

Originally Posted by ozzy47

Hey ChiNa-Man is the title of the mod supposed to say vB3.8 even though you have it listed as vB Version: 4.2.0?

My bad, I have posted this MOD on vB3.8 forums too, an used the same title here as well... Thanks for notice !

[tanzeelniazi]

Really great Let me check thanks

[Cusski]

working perfect on vb4.2 pl3, should not field 2 be

</span>

and not

<span>

as showen?

Our forum has already some code in these fields, but it can be added like this

Field1

<span style="font-weight: bold; color: red;"><span class="blink1">

Field2

</span>

and works perfect

[ozzy47]

Originally Posted by ChiNa-Man

My bad, I have posted this MOD on vB3.8 forums too, an used the same title here as well... Thanks for notice !

I figured it was a copy/paste thing.

[ChiNa]

@Cusski.... Hi, Thank u for the notice! Its because I have copied and pasted the same thread on 4 other sites, and I been editing a lot, Totally forgot that part! Appreciate your notice!

[tanzeelniazi]

I cant success help please
My HTML code is:

PHP Code:

<img src='images/sooweb/icons/King.png'><span style='font-weight: bold; color:Red;'> 


PHP Code:

</span> 


how i use this <span class="blink1">
and i am using also HTML Markup hack

[sodasusu]

not show in forumhome

like this http://forum.ampm.co.id/forum.php