Choose from our various pricing plans. There is a package for everyone!


[jQuery] How to easily create multiple coloured Usernames

View previous topic View next topic Go down

Tutorial [jQuery] How to easily create multiple coloured Usernames

Post by Irate on Thu May 02, 2013 8:14 am

Hello everyone!

Today, I will explain in simple steps how to create multiple coloured usernames by adding a single page of jQuery to your JavaScript pages (found under Administration Panel -> Modules -> JavaScript pages).

You do not need to be the founder of your forum to do so and literally every username can be coloured this way.

Simply follow the instructions given in the comments of the code provided to you below.

Code:
jQuery(document).ready(function(){ //do when document is ready to be modified

var username = '<span><strong><font color="#a200ff">Irate</font></strong></span>';

//Create a new variable for the desired name colour. This example would modify my
//Username to be displayed in purple. If you don't know which color code is right for
//you, look up hexadecimal color codes on Google.

jQuery('a[href="/u207"] span').html(username);

//This code looks for the link with the href attribute of "/u207". forumotion
//automatically supplies this link for you and you can easily find your userlink
//by creating a new test post with {USERLINK} in it - this automatically displays your
//userlink. For this tutorial, I will use my userlink on this forum.
//After the code successfully found all specified span elements which contain the
//name of the selected user, it will replace the name with the variable I declared
//when I initialized this function.

jQuery('a[title="Irate"]').html(username);

//This line looks for the title attribute set to "Irate" for all links and replaces all
//matching elements with the variable username.

jQuery('div#whoisonline a[href="/u207"] span').html(username);

//Like the first line looking for my userlink, this line does the same, just that it
//only searches the Who is Online widget provided to you by forumotion.

}); //end the code

After following all steps and having created a new JavaScript page (specify that you want the code to load on all pages) your username will be multiple coloured in all pages except for the profile page and for the chatbox.
Reason being why this code does not work in the chatbox is that the default forumotion chatbox is loaded as embedded object - means you cannot apply JavaScript to the chatbox unless you have the chatbox load in an iframe.
Profiles are generally difficult to code onto because they do not use your userlink on the page. I will supply a code for that soon, though.

Author: Irate
Skills required: HTML, jQuery
Difficulty: Easy
Demo: Click here.
avatar
Irate
Member
Member

Age : 21
Posts : 91
Join date : 2013-05-01
Forum Version : PhpBB2
Reputation : 2

View user profile http://duelacademy.net

Back to top Go down

Tutorial Re: [jQuery] How to easily create multiple coloured Usernames

Post by Mostone on Thu May 02, 2013 5:35 pm

Nice tutorial, clapping

I will to try Hi
avatar
Mostone
Member
Member

Age : 24
Posts : 84
Join date : 2013-04-25
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: [jQuery] How to easily create multiple coloured Usernames

Post by Irate on Thu May 02, 2013 6:16 pm

Tell me if it worked!

By the way, the screenshot was taken from my mobile on, so the image size is a bit larger than usual as I had to zoom in really close to get the image displayed properly.
avatar
Irate
Member
Member

Age : 21
Posts : 91
Join date : 2013-05-01
Forum Version : PhpBB2
Reputation : 2

View user profile http://duelacademy.net

Back to top Go down

Tutorial Re: [jQuery] How to easily create multiple coloured Usernames

Post by RSguideMaker on Thu May 02, 2013 10:39 pm

Nice tutorial. I hope to be able to give it a shot next time I administrate/own a Forumotion forum.



Please do not request help via PM! Post on the forums where it can help everyone.
avatar
RSguideMaker
Support Moderator
Support Moderator

Age : 18
Posts : 421
Join date : 2012-05-23
Reputation : 9

View user profile http://euanfitzpatrick.co.nf/

Back to top Go down

Tutorial Re: [jQuery] How to easily create multiple coloured Usernames

Post by Mati™ on Tue Dec 02, 2014 12:18 am

Great tutorial! Thank for your contribution.

Tutorial Accepted
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: [jQuery] How to easily create multiple coloured Usernames

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum