How to add an icon before username

Rideem3 at 02h04
13
May
2011
   
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.

Reply
Similar topics
CSS Code for adding icon before specific username? (PHPBB2)
Would anyone here know how to add an icon before a specific username on PHPBB2 using CSS? Thanks in advance!
icon after username
need help on getting icon after username.
Username Name and Icon
Hi! Could you helo me step by step process of how to change one's username color and put an image under it THank you!
Replies 1 to 0 on 0 for "How to add an icon before username"
See also
more_less
Informations

0 Replies For the topic :
"How to add an icon before username"

This topic has been viewed 8532 times.

Last message :
13/05/2011 at 02h04 by "Rideem3"