Runboard.com
Слава Україні!
Runboard Extra Chat Room Support Search Facebook

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

 
Joshin Josh Profile
Live feed
Blog
Friends
Miscellaneous info

 


Registered: 11-2004
Posts: 665
Karma: 18 (+20/-2)
Different color Forumlist cells


Summary

Each runboard message board uses tables for the forumlist, (the area that shows the new post area, forum names, posts numbers, topics numbers, and last post cells.) You could change the background color of each cell with CSS if you wanted it, but on my boards I have the different colors on certain areas and I've gotten a few compliments with it.

The CSS class for each cell is #fl_td_(x)_(x) (the (x)'s represent numbers)

Let me break this down into English.
#fl=forumlist
td=table data cell
(x)first number=Vertical Row number
(x)second number=horizontal row number

There are 5 horizontal row numbers on all of runboard's forumlists.

Edit by LG: For a working example, just look at this board. emoticon /Edit

Example Code

This is where it gets a little tricky, since we all have different preferences on which cells backgrounds to change, and we all have different numbers of forums, but lets just say you want the colors to be White and Blue, and lets pretend you have 4 forums on your board.

First off you will need to go to your Board management Control panel and click on the button that says: Edit layout/colors of your board In there you will see the second option Use CSS trick 1? you will need to check that and save the settings.

Then you will need to go back to your Edit/colors layout of your board area, and click on the button that says Manage Custom Style Sheets (CSS)

To change the area's that are blue we would put this in our Custom CSS:

#fl_td_1_1, #fl_td_2_1, #fl_td_3_1, #fl_td_4_1, #fl_td_1_3, #fl_td_2_3, #fl_td_3_3, #fl_td_4_3, #fl_td_1_4, #fl_td_2_4, #fl_td_3_4, #fl_td_4_4{
background-color : #336699;
}



To change the area's that are White we would put this in our Custom CSS:

#fl_td_1_2, #fl_td_2_2, #fl_td_3_2, #fl_td_4_2, #fl_td_1_5, #fl_td_2_5, #fl_td_3_5, #fl_td_4_5{
background-color : #ffffff;
}


You would have to add a new table data cell class for each forum you have. When you start to get the hang of this you could make some really interesting layouts.

As you can see on the test board above, I added the different colors, into the header cells. This is rather easy to do in your Custom CSS. If going by my above exanple you would add this to your custom CSS:

.forum_list_header_newtext_td, .forum_list_header_topics_td, .forum_list_header_posts_td {
background-color :#336699;
height:30px;
}
.forum_list_header_forum_td, .forum_list_header_lastpost_td{
background-color :#ffffff;
height:30px;
}


You can also change the Topiclist cells, by doing the exact same thing as with the forumlist cells but instead of using '#fl_td_1_2' you would use #tl_td_1_2 which of course the tl stands for topiclist. You would also have to turn on CSS trick 2 in your Edit layout/colors of your board area of your control panel.

I haven't tried to do this with my boards because I wouldn't want to add one for every topic on my board. However, if your do use the topic list code it is recommended that you only do the amount of forums shown on the first page of your topics list.

Edit by Mooseman :
You can have a maximum of 50 topics displayed on one page, so to cover all possibilities without having to think about it laters, you can add it all the way to #tl_td_50_x

Also note that if you use this trick on the topic lists, your CSS will grow rapidly, and you may exceed your CSS limit unless you have an externally hosted CSS-file you can put it in emoticon

Last edited by Joshin Josh, 12/22/2009, 5:43 pm


---

7/27/2007, 7:14 am Link to post PM Joshin Josh Blog
 




You are not logged in (login)