Runboard.com
Слава Україні!
Welcome: You have reached Pastor Rick's Design Elements message board... Enjoy your stay and please tell others about this board...

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

 
Pastor Rick Profile
Live feed
Blog
Friends
Miscellaneous info

Head Administrator

Registered: 07-2005
Location: Texas
Posts: 560
Karma: 11 (+12/-1)
Reply ● Quote
Blue Sky 2.0 skin with sidebar and header


Hi,

This is a very basic theme based on Smackdown5's Blue Sky theme (matter of fact most of the coding for the forums is his).
What I did is put into place a sidebar and a header area then changed the html color codes to web friendly ones. The goal was to provide
new board owners with a basic foundation to work with since none of the existing pre-defined themes provide for this style of
layout.

Image
Blue Sky 2.0


To implement the skin you start by changing your boards theme to the Blue Sky theme. Then you delete the existing CSS and HTML for that theme and replace them with the following:

The CSS Code
body {font-family:verdana;font-size:14px}

/* Pastor Rick's Blue Sky 2.0 Skin */
/* SETS THE PAGES MARGINS AND LEAVES A SMALL MARGIN AT THE TOP AND BOTTOM */

body {margin:5px;margin-top:6px;margin-bottom:6px}

/* HEADER=BANNER AREA */

div#header {height:90px;width:100%;border-style:solid;border-width:1px;border-color:#09f;} /* same as #0099ff */

div#header h1 {margin:0px;margin-top:5px;margin-bottom:5px;}


/* SIDEBAR AND BORDER DEFINITIONS */

.sidebar, .main, .bgfoot { vertical-align: top; border: 1px solid #09f; }
.sidebar { width: 15%; }

/* THE BACKGROUND COLOR SHOWN WHILST IMAGE IS LOADING */
body {background-color: #CEF}

/* SETS THE OUTER TABLES WIDTH TO KEEP NON-TABLE CONTENT WITHIN A MAX WIDTH*/

.ak_msg_master_table {border:none;width:98%;font-family:verdana;font-size:14px}

/* SETS THE WIDTH AND BORDERS OF THE FORUM/TOPIC/POST/MEMBER LIST TABLES */

.forum_list_table, .topic_list_table {width:98%;border-style:solid;border-width:1px;border-color:#09f;}

.ak_msg_post_master_table, .ak_msg_seememberlist_table, .forumlistboardstatstable, .forumlistwhosonlinetable {width:98%;border-style:solid;border-width:1px;border-color:#09f;background-color:#CEF}
.ak_tl_topicrow_mouseover_on, .ak_tl_topicrow_mouseover_off {padding:5px}

/* SETS THE HEADER CELLS OF MOST TABLES */

.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, .forumlistboardstatsheader, .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:14px;height:22px;padding-top:0px; padding-bottom:0px;color:#000;background-color:#9CF}

/* CHANGES AND ADJUSTS THE WHO IS ONLINE TABLE */

.forumlistwhosonlinetable {background-color: #9CF;}
.forumlistwhosonlinetd {padding: 6px 6px 6px 6px;}

/* SETTINGS FONT TYPE, COLOR AND SIZE TO REMAINING ELEMENTS */

span.locationboard, span.locationforum, span.locationtopic {font-size:14px;font-family:verdana}
.forumlistforumname, .topiclisttopicname {color:#000;font-size:14px;font-family:verdana}
span.forumlistnumtopics, span.forumlistnumposts {font-size:10px;font-family:verdana;font-weight:normal;}
span.topiclistnewswitch, span.forumlistnewswitch {color:#000;font-size:14px;font-family:verdana}
.forumlistboardstatsheader {font-family:verdana;font-size:14px;border-width:0px;color:#000}
span.forumlistheader, span.topiclistheader, span.forumlistseparator, span.topiclisttopicname, span.topiclistreplies, span.topiclistviews, span.topicliststartedby{color:#000;font-family:verdana;font-size:14px;}
span.topiclistlastpost {font-family:verdana;font-size:14px}
span.forumlistdescription {color:#404040}
span.topiclisttopicclosed, span.topiclisttopicsticky,span.topiclisttopichidden {font-size:14px;font-weight:normal;font-family:verdana;}

/* WRITE MESSAGE */

.ak_msgform_master_table {background-color:#CEF;border:1px solid #09F;font-family:verdana;font-size:14px}
.ak_msgform_master_table td {border:1px solid #09F}
.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 {font-family:verdana;font-size:10px;border: 1px solid #09F;background-color:#9CF}
.ak_msgform_subject_right_td input, .ak_msgform_message_right_td textarea, textarea {background-color:#FF9F11;border-style:solid;border-width:1px;border-color:#09F;color:#000;width:400px;font-family:verdana;font-size:14px;}
.ak_msgform_poll_options_table {border-style:solid;border-width:1px;border-color:#09F}
.ak_msgform_poll_options_table td{border:1px solid #09F}
.ak_msgform_poll_options_right_td input {background-color:#9CF; padding-top:2px;padding-bottom:2px;margin:2px;font-family:verdana;font-size:14px;color:#09F;}

.qcode_bar_but {font-size:10px;background-color:#9CF;border-color:#09f;border-style:solid;border-width:1px;margin-top:1px}

/* HORIZONTAL RULE FOR CROSS COMPATIBILITY REASONS WE USE THE BORDER TO GIVE THE LINE EFFECT */

hr {height:0px;width:100%;border:none;border-bottom: 1px solid #09f}

/* DEFAULT 'FORUM READY' MSGS ARE MADE SCROLL INSTEAD OF DISTORTING TABLES */

.postlistpostbody pre {font-size:14px;font-family:verdana;font-weight:normal;overflow:scroll;width:500px;border:1px solid #09f}

/* POST TABLE */

.ak_msg_post_master_table {font-family:verdana;font-size:14px}
.ak_msg_post_master_table td {border:1px solid #09F}
span.postlistusername, span.postlistpostname, span.postlistpostbody {color:#000;font-family:verdana;font-size:14px}
span.postlistusertitle font {color:#09f;font-family:verdana;font-size:14px}
blockquote {border-width:1px;border-style:solid;border-color:#09f;background-color:#9CF;font-family:verdana;font-size:14px;color:#000}
blockquote hr {display:none}

.ak_msgform_subject_right_td input, .ak_msgform_message_right_td textarea, textarea {background-color:#9CF;border-style:solid;border-width:1px;border-color:#09f;color:#000;width:400px;font-family:verdana;font-size:14px;}
.ak_msgform_poll_options_table {border-style:solid;border-width:1px;border-color:#09f}
.ak_msgform_poll_options_right_td input {background-color:#9CF; padding-top:2px;padding-bottom:2px;margin:2px;font-family:verdana;font-size:14px;color:#000;}

/* POLL TABLE AND ITS PARTS */

.ak_poll_table {font-size:12px;font-family:verdana;text-align:center;border-width:1px;border-style:solid;border-color:#09f;background-color:#CEF;margin-bottom:15px}
.ak_poll_table_header {height:22px;padding:0px 25px 0px 25px;font-size:14px}
.ak_poll_table_button_cell input {background-color:#9CF;border-width:1px;border-style:solid;border-color:#09f;height:22px;font-family:verdana;font-size:14px;}
.ak_poll_table td {border-width:0px}
.ak_poll_table_header br {display:none}
.ak_poll_table_header a {padding-left:10px}
.ak_poll_table_option_rcell1 input, .ak_poll_table_option_rcell2 input {border:none}
.ak_poll_table_viewres_cell {font-weight:bold;font-size:14px}
.ak_poll_table_option_gback1 {background-color:#9CF}
.ak_poll_table_option_gback2 {background-color:#9CF}
.ak_msgform_poll_options_right_td input {border-style:solid;border-color:#09f;border-width:1px;}

/* MEMBERSHIP LIST */

.ak_msg_seememberlist_table td {border-width:0px;text-align:center}
.ak_msg_seememberlist_table {font-size:14px}
.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:#000;font-family:verdana;font-size:14px;padding:1px;text-align:center}
.ak_msg_seememberlist_showing {font-size:14px;font-family:verdana;color:#000}

/* NEW TOPIC & ADD REPLY BUTTONS */

.topiclistpostnewtopic a, .postlistaddareply a {color:#000;font-size:14px;font-family:verdana;}

/* POSTICONS & SMILIE TABLES */

.ak_subject_posticon_table {padding:0px;text-align:center;color:#000; font-family:verdana,tahoma,arial; font-size:14px;border:1px;background-color:#cef; margin-bottom:5px; width: 100%; }
.ak_subject_posticon_icons_td{border:1px solid #9cf;}
.ak_subject_posticon_head_td, .msgform_clickable_smiley_box_h {padding:0px;text-align:center;color:#000; font-family:verdana,tahoma,arial; font-size:14px;border:1px;background-color:#9cf; margin-bottom:5px; width: 100%; }

.msgform_clickable_smiley_box_b, .msgform_clickable_smiley_box_b td, .msgform_clickable_smiley_box_b_td, .msgform_clickable_smiley_box_b_td td {width:100%;border:1px solid #9cf;background-color:#cef;text-align:center;}

/* MOUSEOVER FORUM/TOPIC ROW (TURNED OFF BY DEFAULT) */

.ak_tl_topicrow_mouseover_on, .ak_fl_forumrow_mouseover_on {background-color:#9CF}
.ak_tl_topicrow_mouseover_off, .ak_fl_forumrow_mouseover_off {}

/* BOARD STATS TABLE */

.forumlistboardstatsheader{border-style: solid; border-width: 0px 0px 1px 0px; background-color: #9CF; border-color: #09F;border-style: solid}

/* IMAGES NEVER HAVE BORDERS! */

img {border:0px}


The Custom Header HTML Code
<div id="header"><h1>banners and other stuff in the header goes here</h1></div><br />


<table border="0" width="100%"...>

<tr>

<td class="sidebar">

....sidebar contents...

</td>

<!-- Stuff for Main forum area goes after this -->
<td class="main">


The Custom HTML Footer Code
</td></tr></table>


</div><div style="text-align:center"><div class="bgfoot">footer</div></div>


Next you goto: The: Control Panel :: Board management :: Edit colors and theme settings: and change the following items:

Miscellaneous options

Background color: #CCEEFF

Forum list layout options

Forum list master table border color : #0099FF
Forum list table header background color : #99CCFF
Forum list table header border color : #0099FF
Forum list table first alternate background color : #CCEEFF
Forum list table second alternate background color : #CCEEFF
Forum list table separator background color : #99CCFF

Topic list layout options

Topic list master table border color : #0099FF
Topic list table header background color : #99CCFF
Topic list table header border color : #0099FF
Topic list table first alternate background color : #CCEEFF
Topic list table second alternate background color : #CCEEFF

Post list layout options

Post list master table border color : #0099FF
Post list table first alternate background color : #CCEEFF
Post list table second alternate background color : #CCEEFF

FINAL NOTE: Make sure you have the clickable smilies grid feature: in the Board Miscellaneous Options checked to enable the grid effect emoticon.

Last edited by Pastor Rick, 9/28/2012, 7:55 am


---

Advertise Boards On TRDConceptsDE
4/29/2007, 8:03 pm Link to this post Send Email to Pastor Rick   Send PM to Pastor Rick Blog
 


Add a reply





You are not logged in (login)