vb.org Archive - Mini Mods - [CM] Username Blink

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 anyone can freely re-use the code from my side!

Here are all 4 Animated Gif Blinks/Images:

Gray Blink: https://vborg.vbsupport.ru/external/2012/11/11.gif
Green Blink: https://vborg.vbsupport.ru/external/2012/11/12.gif
Red Blink: https://vborg.vbsupport.ru/external/2012/11/13.gif
Aqua Blink: https://vborg.vbsupport.ru/external/2012/11/14.gif

1) First of all, Downlod all the 4 Animated Gifs that I have attached below in the ZIP file, 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 MAIN CSS >> Scroll down untill you see the "Additional CSS Definitions" Aread...

3) Add the following Code below everything else in your Additional CSS Definitions 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 3 GIF IMAGES which is inside the "Images.ZIP" 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:

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

Code:

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:

And add the second code in FIELD 2 (Doesn't matter were):

Quote:

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!

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01038 seconds Memory Usage 1,739KB 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_code_printable (1)bbcode_php_printable (1)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (5)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
Messages: