You're welcome.
Welcome: You have reached Pastor Rick's Design Elements message board... Enjoy your stay and please tell others about this board...

User Quick Links:       Sign up (learn about it) ● Sign in (lost password?)

Pastor Rick Profile
Live feed
Miscellaneous info

Head Administrator
Global user (premium)

Registered: 07-2005
Location: Texas
Posts: 550
Karma: 11 (+12/-1)
Reply ● Quote
Put a graphic beside users name


How do I put a graphic beside the users name like you have here?

To do this the easy way first pick a graphic that is within 1px of your font size height-wise then in your custom CSS put:

[sign in to see URL] {padding-left: 15px; background:url('[sign in to see URL] host/your [sign in to see URL]') top left no-repeat;}

Replace the part I have bolded with the url to your image or this won't work. Also, if you look at the graphic I used you will see that it is 13px wide so I gave my left padding 2 extra pixels to give some separation between the graphic and the users name.


What if I want different graphics for myself as the board owner, my admins, and my mods?

You can do that but be careful because there is a CSS limit of 15000 characters and you can use that up really fast. Here is the code:

.postlistusername a[href$=user_name]:link, .postlistusername a[href$=user_name]:visited {
 padding-left: 20px; background:url(http://www.image location/image [sign in to see URL]) left center no-repeat;

The user name will always be in lower case and there is a underscore in place of the blank spaces between names (for example: Pastor Rick will be pastor_rick).

Last edited by Pastor Rick, 8/23/2008, 11:25 pm


Advertise Boards On TRDConceptsDE
8/21/2008, 9:11 am Link to this post Send Email to Pastor Rick   Send PM to Pastor Rick Blog

Add a reply

You are not logged in (login)