Runboard.com
You're welcome.
Runboard Extra Chat Room Support Search Facebook





Runboard.com       Sign up learn about it | Sign in lost password?

 
Lesigner Girl Profile
Live feed
Blog
Friends
Miscellaneous info

 

Head of Runboard staff

Registered: 11-2005
Posts: 1895
Karma: 83 (+86/-3)
Reply Quote
Different color for, or image next to, specific usernames


Board owners might want to color the usernames of their staff -- and/or long-standing members, etc -- differently than everyone else, or add an image next to or below them. You can actually do this a couple of ways.

The main purpose of this post is to show you how to target the names themselves. The actual styling attributes are just examples of some of the things you can do. Only add what you want, whether it's padding, an image, underlining, etc. To add an image below something instead of beside it, use padding-bottom instead of padding-left.

Of course, the code you're using will go into the custom CSS, which you can find at the top of the layout/colors page of your board's control panel.

Note the use of all lower-case letters, as well as an underscore wherever there is a space in the name. Here, "Lesigner Girl" becomes "lesigner_girl".




Post list only:

Here at Runboard Extra, you'll see the Runboard logo Image next to staff names in the post list. To do that, you can do something like this:

.lesigner_girl .postlistusername,
.rimmer .postlistusername
{
  padding-left: 21px;
  background:url(http://URL_TO_IMAGE) 2px center no-repeat;
}


If you want to change the color of that link, or change whether it's underlined or not, you'll need to add a:link and a:visited for each name.

.lesigner_girl .postlistusername a:link,
.lesigner_girl .postlistusername a:visited,
.rimmer .postlistusername a:link,
.rimmer .postlistusername a:visited
{
    color: #be0021;
    text-decoration: underline;
}




All over the board:

If you want to, for example, make certain names red everywhere it appears on your board, you can target them this way instead:

a.ul_lesigner_girl:link,
a.ul_lesigner_girl:visited,
a.ul_rimmer:link,
a.ul_rimmer:visited
{
    color: #be0021;
}


If this doesn't change every occurrence of those usernames (as of the time on this post, the who's online is a little different), add this:

a[href$=lesigner_girl]:link,
a[href$=lesigner_girl]:visited,
a[href$=rimmer]:link,
a[href$=rimmer]:visited
{
    color: #be0021;
}


To learn more about CSS, visit my blog: IfYouCodeItTheyWill.com. There's a beginner's section with a project you can download and work with, or you can click on the "CSS" link in the sidebar.

If you don't have the time or desire to learn CSS and just want a little help with specific styling of usernames on Runboard, ask in the Q&A forum at this board.

---
Runboard Knowledge Base
Runboard Support Forums
Find other message boards
1/6/2012, 3:13 am Link to post Email Lesigner Girl   PM Lesigner Girl Blog
 


Reply



You are not logged in (login)