Lesigner Girl
Head of Runboard staff
Registered: 11-2005
Posts: 1895
Karma: 83 (+86/-3)
|
|
|
Custom Titles for Mods and Admins
Technically, you can only have one title for all board mods to share, and one title for all admins to share, with the exception of the board owner who has his or her own title. For this reason, we won't actually be using the custom title feature at all, but CSS and an image instead.
For regular member user titles, you should see User Levels/Custom Titles - Formatting With CSS and CSS Member Titles (Automatic Levels) instead. But if you have more than one admin or mod and you want each of them to have their own custom title, read on...
Step 1: Create an image
If you want text for the custom title, you still need to create an image; just make it look like text. Why? Because you can't put text into a background, but you can do that with an image.
Step 2: Upload that image to an image host
If you don't already use an image host, see: Free Image Hosting Sites.
Step 3: Custom Style Sheet (CSS)
Add the following to your CSS, replacing lesigner_girl with the name of your moderator, and the image url with the url of your image. Also, change the padding-bottom to accommodate the height of your image. In short, the only parts you need to edit are bolded below...
.lesigner_girl .postlistusername a:link,
.lesigner_girl .postlistusername a:visited {
display: block;
padding-bottom: 19px;
margin-bottom: -1em;
position: relative; z-index: 2;
background:url(http://rb.lesigns.com/rbico.gif) bottom left no-repeat;
}
Notice that I used an underscore (_) instead of a space in my username, and used all lower-case letters even though my username is capitalized. This is the format you need to use, because it needs to look like the link to their profile.
If you want to completely replace the Administrator or Moderator title with the custom title, you will need to increase the negative margin-bottom (for example, -2em instead of -1em, -30px instead of -15px, etc), as well as add this to make the custom title hide the general title:
.postlistusertitle { position: relative; z-index: 1; } * html .postlistusertitle { position: static; }
Edit: Updated CSS to work with the HTML changes.
Last edited by Lesigner Girl, 10/24/2010, 7:07 pm
|
12/31/2008, 1:57 am
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|