How to add an icon before username

by **Rideem3** on May 12th 2011, 6:04 pm

How to add an icon before username

Hello ForuMotion members, in this tutorial, you will discover how to put an icon (small image) before any username on your forum, without the glitches that come with the usual code. This is, I believe, to be available for all forum versions.

Here's an example of what I mean:

For phpBB2:
Step 1:
Navigate to...
Administration Panel → Display → Colors → CSS Style Sheet

Step 2:
Scroll all the way down (if there is already coding there), and paste the following codes -

For only posts (not including home page):

Code:
.name strong a[href="/u#"]{ padding-left: 13px; background: url(imagedirectlink) no-repeat left;}
For the chat box:

Code:
#chatbox_members a[href="/u#"]{ padding-left: 13px; background: url(imagedirectlink) no-repeat left;}
There is one more code to add for the home page (the who last posted in this topic username) and the who is online box, but this will cause the same image to appear next to your profile icon throughout your posts:

Code:
.gensmall a[href="/u#"]{ padding-left: 13px; background: url(imagedirectlink) no-repeat left;}

Step 3:
Once you have chosen the codes you want, please change the "#" character next to /u according to what user you want the icon to appear before. To find out the "#" to replace, go to that user's forum profile, and copy the number after "/u".
Example:

Code:: a[href="/u1"]

/u1 is the founder of the forum, and when you go to his profile, it will be: www.forumlink.com/u1

You can now choose the small image to place before the user name. Simply copy the direct link, and paste the link in the "imagedirectlink" text.

To make two users have icons, simply just paste the same exact code again, changing the number to correspond with his/her profile.

Once you have finished everything, click:

Submit, and you're done.

If you didn't paste the ".gensmall" link, you now have a non-glitching icon before your username!

For phpBB3:
Step 1:
Navigate to...
Administration Panel → Display → Colors → CSS Style Sheet

Step 2:
Scroll all the way down (if there is already coding there), and paste the following code:

Code:: p a[href="/u#"], .forabg a[href="/u1"], .forumbg a[href="/u#"], .postprofile strong a[href="/u#"], .page-bottom a[href="/u#"], #chatbox_members a[href="/u#"], .module a[href="/u#"] { background: url("imagedirectlink") no-repeat; padding-left: 16px; padding-top: 2px; }

Step 3:
Once you have chosen the codes you want, please change the "#" character next to /u according to what user you want the icon to appear before. To find out the "#" to replace, go to that user's forum profile, and copy the number after "/u".

Example:

Code:: a[href="/u1"]

/u1 is the founder of the forum, and when you go to his profile, it will be: www.forumlink.com/u1

You can now choose the small image to place before the user name. Simply copy the direct link, and paste the link in the "imagedirectlink" text.

To make two users have icons, simply just paste the same exact code again, changing the number to correspond with his/her profile.

Once you have finished everything, click:

Submit, and you're done.

For punBB:
Step 1:
Navigate to...
Administration Panel → Display → Colors → CSS Style Sheet

Step 2:
Scroll all the way down (if there is already coding there), and paste the following code:

Code:: .pun .user-ident .username a[href="/u#"], a.gensmall[href="/u#"], #onlinelist [href="/u#"], .statused a[href="/u#"], #stats [href="/u#"], #chatbox_members a[href="/u#"], #chatbox a[href="/u#"], #onlinechat a[href="/u#"], #profile-advanced-right div.h3 strong, .module a[href="/u#"] { background: url("imagedirectlink") no-repeat; padding-left: 16px; }

Step 3:
Once you have chosen the codes you want, please change the "#" character next to /u according to what user you want the icon to appear before. To find out the "#" to replace, go to that user's forum profile, and copy the number after "/u".

Example:

Code:: a[href="/u1"]

/u1 is the founder of the forum, and when you go to his profile, it will be: www.forumlink.com/u1

You can now choose the small image to place before the user name. Simply copy the direct link, and paste the link in the "imagedirectlink" text.

To make two users have icons, simply just paste the same exact code again, changing the number to correspond with his/her profile.

Once you have finished everything, click:

Submit, and you're done.

For Invision:
Step 1:
Navigate to...
Administration Panel → Display → Colors → CSS Style Sheet

Step 2:
Scroll all the way down (if there is already coding there), and paste the following code:

Code:: #fo_stat a[href="/u#"], .activeusers-box p a[href="/u#"], #chatbox a[href="/u#"], #chatbox_members a[href="/u#"], table.ipbtable td a[href="/u#"], .postprofile strong, .module a[href="/u#"] { background: url("imagedirectlink") no-repeat scroll 0 0 transparent; padding-left: 16px; }

Step 3:
Once you have chosen the codes you want, please change the "#" character next to /u according to what user you want the icon to appear before. To find out the "#" to replace, go to that user's forum profile, and copy the number after "/u".

Example:

Code:: a[href="/u1"]

/u1 is the founder of the forum, and when you go to his profile, it will be: www.forumlink.com/u1

You can now choose the small image to place before the user name. Simply copy the direct link, and paste the link in the "imagedirectlink" text.

To make two users have icons, simply just paste the same exact code again, changing the number to correspond with his/her profile.

Once you have finished everything, click:

Submit, and you're done.

Tutorial written by Rideem3 - phpBB3, punBB, and Invision Codings written by (An Anonymous User)

No reproduction possible without our consent, in accordance with article L122-1 of the ICC.