<
How to add an icon before username
Hi pure-members!
here you are the tutorial...
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:
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 -
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:
/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!
here you are the tutorial...
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:
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: ----------Select content
.name strong a[href="/u#"]{
padding-left: 13px;
background: url(imagedirectlink) no-repeat left;}
- For the chat box:
- Code: ----------Select content
#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: ----------Select content
.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: ----------Select content
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!