Joshin Josh
Banned user
Registered: 11-2004
Posts: 953
Karma: 10 (+10/-0)
|
|
Reply | Quote
|
|
Runboard CSS Cheat Sheet
A few of you have asked how to start a skin from scratch.. You really can't do that because the runboard HTML is hard coded onto the board. However you can completely change the look of the HTML by changing the CSS to whatever colors/themes you like.
The following CSS would be a good start for your skin boards CSS. As all of this is Runboard CSS. If you would like to learn more about where/what the runboard CSS is then take a look at this excellent tutorial that Lesigner Girl has made: Runboard's CSS Classes
Here is a cheat sheet for the RB CSS used in a skin:
I've added the CSS body to this snippet, it's not a CSS class of course, but it is always good to add in your starting CSS. You will still have to change the colors/borders/images to fit your theme.
/*SETS BACKGROUND COLOR AND PROPERTIES OF BODY*/
body {
background-color : #1f1f1f;
margin-left : 0;
margin-right : 0;
}
/*SETS WIDTHS OF FORUM TOPIC POST AND MEMBERLIST TABLES*/
.ak_msg_master_table {
border : none;
width : 770px;
font-family : verdana;
font-size : 11px;
}
.forum_list_table, .topic_list_table, .ak_msg_post_master_table, .ak_msg_seememberlist_table {
width : 760px;
border:1px solid #CCCCCC;
background-color : #000000;
}
/*SETS PROPERTIES OF THE SEPARTORS*/
.ak_msgform_poll_options_head_td, .ak_msg_seememberlist_head_user_td, .ak_msg_seememberlist_head_date_td, .ak_msg_seememberlist_head_im_td, .ak_msg_seememberlist_head_pm_td, .ak_msg_seememberlist_head_email_td, .ak_poll_table_header, .forum_list_header_newtext_td, .forum_list_header_forum_td, .forum_list_header_topics_td, .forum_list_header_posts_td, .forum_list_header_lastpost_td, .forumlist_separator_td, .topic_list_header_modbox_td, .topic_list_header_newtext_td, .topic_list_header_posticon_td, .topic_list_header_topic_td, .topic_list_header_startedby_td, .topic_list_header_replies_td, .topic_list_header_views_td, .topic_list_header_lastpost_td, .msgform_clickable_smiley_box_h, .ak_subject_posticon_head_td {
font-family : verdana;
font-size : 11px;
height : 25px;
background-image : url(http://img.runboard.com/img/layouts/epikk3_2/tableheaderbg.jpg);
background-repeat : repeat-x;
padding-top : 2px;
padding-bottom : 2px;
}
/*SETS WIDTHS OF BOARD STATS AND WHOS ONLINE TABLE*/
.forumlistwhosonlinetable, .forumlistboardstatstable {
width : 760px;
border:1px solid #cccccc;
background-color : #262626;
}
.forumlistwhosonlinetd {
padding : 6px 6px 6px 6px;
}
.forumlistboardstatsheader {
font-family : verdana;
font-size : 11px;
border-width : 0;
height : 25px;
background-image : url(http://img.runboard.com/img/layouts/epikk3_2/tableheaderbg.jpg);
background-repeat : repeat-x;
color : #000000;
}
/*SETS FONT SIZE AND COLORS OF BOARD*/
span.locationboard, span.locationforum, span.locationtopic {
font-size : 11px;
font-family : verdana;
}
.forumlistforumname, .topiclisttopicname {
color : #cccccc;
font-size : 11px;
font-family : verdana;
}
span.forumlistnumtopics, span.forumlistnumposts {
font-size : 11px;
font-family : verdana;
}
span.topiclistnewswitch, span.forumlistnewswitch {
color : #cccccc;
font-size : 11px;
font-family : verdana;
}
span.forumlistheader, span.topiclistheader, span.forumlistseparator, span.topiclisttopicname, span.topicliststartedby, span.topiclistreplies, span.topiclistviews {
font-family : verdana;
font-size : 11px;
}
span.topiclistlastpost {
font-family : verdana;
font-size : 10px;
}
span.topiclisttopicclosed, span.topiclisttopicsticky, span.topiclisttopichidden {
font-size : 10px;
font-weight : normal;
font-family : verdana;
}
.ak_msg_post_master_table {
font-family : verdana;
font-size : 10px;
}
span.postlistusername a, span.postlistpostname {
color : #cccccc;
font-family : verdana;
font-size : 11px;
}
.ak_msg_post_table {
padding-left : 3px;
}
span.postlistusertitle font {
color : #cccccc;
}
blockquote {
border : 1px solid #cccccc;
background-color : #262626;
}
blockquote hr {
display : none;
}
hr {
height : 0;
width : 100%;
border : none;
border-bottom : 1px solid #cccccc;
}
.postlistpostbody pre {
font-size : 9px;
font-family : verdana;
font-weight : normal;
overflow : scroll;
width : 500px;
border : 1px solid #cccccc;
}
/*WRITE MESSAGE AREA*/
.ak_msgform_master_table {
background-color : #262626;
border : none;
font-family : verdana;
font-size : 11px;
}
.ak_msgform_master_table td {
border : none;
}
.ak_msgform_master_table input {
border : none;
}
.ak_msgform_newtopic_submit_button, .ak_msgform_newtopic_preview_button, .ak_msgform_postreply_submit_button, .ak_msgform_postreply_preview_button, .ak_msgform_editpost_submit_button, .ak_msgform_editpost_preview_button {
border : 1px solid #cccccc;
height : 25px;
background-image : url(http://img.runboard.com/img/layouts/epikk3_2/tableheaderbg.jpg);
background-repeat : repeat-x;
color : #000000;
font-family : verdana;
font-size : 11px;
}
.qcode_bar_but {
font-family : verdana;
font-size : 10px;
border : 1px solid #cccccc;
background-color : #262626;
color : #000000;
height : 25px;
background-image : url(http://img.runboard.com/img/layouts/epikk3_2/tableheaderbg.jpg);
background-repeat : repeat-x;
margin-top : 2px;
padding-left : 5px;
padding-right : 5px;
}
.ak_msgform_subject_right_td input, .ak_msgform_message_right_td textarea {
background-color : #1f1f1f;
border : 1px solid #cccccc;
color : #cccccc;
width : 340px;
font-family : verdana;
font-size : 11px;
}
.ak_msgform_poll_options_table {
border : 1px solid #cccccc;
}
.ak_msgform_poll_options_right_td input {
background-color : #cccccc;
padding-top : 2px;
padding-bottom : 2px;
margin : 2px;
font-family : verdana;
font-size : 11px;
color : #000000;
}
/*POLL TABLE AND OPTIONS*/
.ak_poll_table {
font-size : 10px;
font-family : verdana;
text-align : center;
border : 1px solid #cccccc;
background-color : #262626;
margin-bottom : 15px;
}
.ak_poll_table_header {
height : 25px;
padding : 0 25px 0 25px;
font-size : 11px;
}
.ak_poll_table_header br {
display : none;
}
.ak_poll_table_header a {
padding-left : 10px;
}
.ak_poll_table_button_cell input {
background-color : #1f1f1f;
border : 1px solid #cccccc;
height : 22px;
background-image : url(http://img.runboard.com/img/layouts/epikk3_2/tableheaderbg.jpg);
background-repeat : repeat-x;
color : #cccccc;
font-family : verdana;
font-size : 11px;
}
.ak_poll_table td {
border-width : 0;
}
.ak_poll_table_option_rcell1 input, .ak_poll_table_option_rcell2 input {
border : none;
}
.ak_poll_table_viewres_cell {
font-weight : bold;
font-size : 11px;
}
.ak_poll_table_option_gback1 {
background-color : #cccccc;
}
.ak_poll_table_option_gback2 {
background-color : #cccccc;
}
/*SETS MEMBERLIST COLORS AND FONT SIZES*/
.ak_msg_seememberlist_table td {
border:1px solid #000000;
}
.ak_msg_seememberlist_table {
font-size : 10px;
}
.ak_msg_seememberlist_head_user_td, .ak_msg_seememberlist_head_date_td, .ak_msg_seememberlist_head_im_td, .ak_msg_seememberlist_head_pm_td, .ak_msg_seememberlist_head_email_td {
color : #000000;
font-family : verdana;
font-size : 11px;
padding : 3px;
text-align : center;
}
/*POSTICON AND SMILEYS TABLES*/
.ak_subject_posticon_table {
padding : 0;
text-align : center;
color : #000000;
font-family : verdana, tahoma, arial;
font-size : 11px;
border : none;
background-color : #262626;
margin-bottom : 5px;
}
.ak_subject_posticon_head_td {
text-align : center;
font-family : verdana;
font-size : 11px;
color : #000000;
}
.msgform_clickable_smiley_box_h {
padding-left : 10px;
padding-right : 10px;
font-family : verdana;
font-size : 11px;
border : none;
background-color : #262626;
color : #000000;
}
.msgform_clickable_smiley_box_b {
margin-top : 8px;
text-align : center;
}
.msgform_clickable_smiley_box_b, .msgform_clickable_smiley_box_b_td, .msgform_clickable_smiley_box_b td {
border-width : 0;
border-style : solid;
}
If you did try to use the colors I used on this cheat sheet, you will have a very dark board lol. So I would make sure I changed every color to the color you want. I know it seems like a lot of coding, but after skinning a few times you get the hang of it, and it starts making sense. Or at least it did for me.
Again if you don't know what one of those CSS Classes are Check out Lesigner's RB CSS Tutorial.
Feel free to ask questions here as well.
|
|
7/6/2007, 8:05 pm
|
Link to this post
Send PM to Joshin Josh
Blog
|
This Hour
Registered User
Registered: 11-2007
Posts: 1
Karma: 0 (+0/-0)
|
|
Reply | Quote
|
|
Re: Runboard CSS Cheat Sheet
Thank you for this, now I can make skins easier now without having to do it from scratch.
---
Like web design or graphics? If so click my signature. |
|
11/21/2007, 4:35 pm
|
Link to this post
Send Email to This Hour
Send PM to This Hour
|
