Solution for changing colors of forum module in Karate theme

Regular Joined: Oct 13, 2007 Posts: 61

Hi,
I am using the Karate theme and I spent ages trying to change the colors of the forum, and couldn't find the right info through searching but I managed to work it out, so thought I'd give the solution here to help others if they have the same problem.

Its the overall_header.tpl that needs to be changed.

Find this code in overall_header.tpl - replace it with all the code that is in the subSilver.css file. Some code in the overall_header.tpl needs to remain which is basically at the top and bottom end of the code shown below.

/* General page style. The scroll bar colours only visible in IE5.5+ */
body {
background-color: {T_BODY_BGCOLOR};
scrollbar-face-color: {T_TR_COLOR2};
scrollbar-highlight-color: {T_TD_COLOR2};
scrollbar-shadow-color: {T_TR_COLOR2};
scrollbar-3dlight-color: {T_TR_COLOR3};
scrollbar-arrow-color: {T_BODY_LINK};
scrollbar-track-color: {T_TR_COLOR1};
scrollbar-darkshadow-color: {T_TH_COLOR1};
}

/* General font families for common tags */
font,th,td,p { font-family: {T_FONTFACE1} }
a:link,a:active,a:visited { color : {T_BODY_LINK}; }
a:hover { text-decoration: underline; color : {T_BODY_HLINK}; }
hr { height: 0px; border: solid {T_TR_COLOR3} 0px; border-top-width: 1px;}

/* This is the border line & background colour round the entire page */
.bodyline { background-color: {T_TD_COLOR2}; border: 1px {T_TH_COLOR1} solid; }

/* This is the outline round the main forum tables */
.forumline { background-color: {T_TD_COLOR2}; border: 2px {T_TH_COLOR2} solid; }

/* Main table cell colours and backgrounds */
td.row1 { background-color: {T_TR_COLOR1}; }
td.row2 { background-color: {T_TR_COLOR2}; }
td.row3 { background-color: {T_TR_COLOR3}; }

/*
This is for the table cell above the Topics, Post & Last posts on the index.php page
By default this is the fading out gradiated silver background.
However, you could replace this with a bitmap specific for each forum
*/
td.rowpic {
background-color: {T_TD_COLOR2};
background-image: url(modules/Forums/templates/subSilver/images/{T_TH_CLASS3});
background-repeat: repeat-y;
}

/* Header cells - the blue and silver gradient backgrounds */
th {
color: {T_FONTCOLOR3}; font-size: {T_FONTSIZE2}px; font-weight : bold;
background-color: {T_BODY_LINK}; height: 25px;
background-image: url(modules/Forums/templates/subSilver/images/{T_TH_CLASS2});
}

td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-image: url(modules/Forums/templates/subSilver/images/{T_TH_CLASS1});
background-color:{T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid; height: 28px;
}

/*
Setting additional nice inner borders for the main table cells.
The names indicate which sides the border will be on.
Don't worry if you don't understand this, just ignore it Smile

*/
td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold; border: {T_TD_COLOR2}; border-style: solid; height: 28px;
}
td.row3Right,td.spaceRow {
background-color: {T_TR_COLOR3}; border: {T_TH_COLOR3}; border-style: solid;
}

th.thHead,td.catHead { font-size: {T_FONTSIZE3}px; border-width: 1px 1px 0px 1px; }
th.thSides,td.catSides,td.spaceRow { border-width: 0px 1px 0px 1px; }
th.thRight,td.catRight,td.row3Right { border-width: 0px 1px 0px 0px; }
th.thLeft,td.catLeft { border-width: 0px 0px 0px 1px; }
th.thBottom,td.catBottom { border-width: 0px 1px 1px 1px; }
th.thTop { border-width: 1px 0px 0px 0px; }
th.thCornerL { border-width: 1px 0px 0px 1px; }
th.thCornerR { border-width: 1px 1px 0px 0px; }

/* The largest text used in the index page title and toptic title etc. */
.maintitle {
font-weight: bold; font-size: 22px; font-family: "{T_FONTFACE2}",{T_FONTFACE1};
text-decoration: none; line-height : 120%; color : {T_BODY_TEXT};
}

/* General text */
.gen { font-size : {T_FONTSIZE3}px; }
.genmed { font-size : {T_FONTSIZE2}px; }
.gensmall { font-size : {T_FONTSIZE1}px; }
.gen,.genmed,.gensmall { color : {T_BODY_TEXT}; }
a.gen,a.genmed,a.gensmall { color: {T_BODY_LINK}; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: {T_BODY_HLINK}; text-decoration: underline; }

/* The register, login, search etc links at the top of the page */
.mainmenu { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT} }
a.mainmenu { text-decoration: none; color : {T_BODY_LINK}; }
a.mainmenu:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Forum category titles */
.cattitle { font-weight: bold; font-size: {T_FONTSIZE3}px ; letter-spacing: 1px; color : {T_BODY_LINK}}
a.cattitle { text-decoration: none; color : {T_BODY_LINK}; }
a.cattitle:hover{ text-decoration: underline; }

/* Forum title: Text and link to the forums used in: index.php */
.forumlink { font-weight: bold; font-size: {T_FONTSIZE3}px; color : {T_BODY_LINK}; }
a.forumlink { text-decoration: none; color : {T_BODY_LINK}; }
a.forumlink:hover{ text-decoration: underline; color : {T_BODY_HLINK}; }

/* Used for the navigation text, (Page 1,2,3 etc) and the navigation bar when in a forum */
.nav { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT};}
a.nav { text-decoration: none; color : {T_BODY_LINK}; }
a.nav:hover { text-decoration: underline; }

/* titles for the topics: could specify viewed link colour too */
.topictitle,h1,h2 { font-weight: bold; font-size: {T_FONTSIZE2}px; color : {T_BODY_TEXT}; }
a.topictitle:link { text-decoration: none; color : {T_BODY_LINK}; }
a.topictitle:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.topictitle:hover { text-decoration: underline; color : {T_BODY_HLINK}; }

/* Name of poster in viewmsg.php and viewtopic.php and other places */
.name { font-size : {T_FONTSIZE2}px; color : {T_BODY_TEXT};}

/* Location, number of posts, post date etc */
.postdetails { font-size : {T_FONTSIZE1}px; color : {T_BODY_TEXT}; }

/* The content of the posts (body of text) */
.postbody { font-size : {T_FONTSIZE3}px; line-height: 18px}
a.postlink:link { text-decoration: none; color : {T_BODY_LINK} }
a.postlink:visited { text-decoration: none; color : {T_BODY_VLINK}; }
a.postlink:hover { text-decoration: underline; color : {T_BODY_HLINK}}

/* Quote & Code blocks */
.code {
font-family: {T_FONTFACE3}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR2};
background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
font-family: {T_FONTFACE1}; font-size: {T_FONTSIZE2}px; color: {T_FONTCOLOR1}; line-height: 125%;
background-color: {T_TD_COLOR1}; border: {T_TR_COLOR3}; border-style: solid;
border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

/* Copyright and bottom info */
.copyright { font-size: {T_FONTSIZE1}px; font-family: {T_FONTFACE1}; color: {T_FONTCOLOR1}; letter-spacing: -1px;}
a.copyright { color: {T_FONTCOLOR1}; text-decoration: none;}
a.copyright:hover { color: {T_BODY_TEXT}; text-decoration: underline;}

/* Form elements */
input,textarea, select {
color : {T_BODY_TEXT};
font: normal {T_FONTSIZE2}px {T_FONTFACE1};
border-color : {T_BODY_TEXT};
}

/* The text input fields background colour */
input.post, textarea.post, select {
background-color : {T_TD_COLOR2};
}

input { text-indent : 2px; }

/* The buttons used for bbCode styling in message post */
input.button {
background-color : {T_TR_COLOR1};
color : {T_BODY_TEXT};
font-size: {T_FONTSIZE2}px; font-family: {T_FONTFACE1};
}

/* The main submit button option */
input.mainoption {
background-color : {T_TD_COLOR1};
font-weight : bold;
}

/* None-bold submit button */
input.liteoption {
background-color : {T_TD_COLOR1};
font-weight : normal;
}

/* This is the line in the posting page which shows the rollover
help line. This is actually a text box, but if set to be the same
colour as the background no one will know Wink

*/
.helpline { background-color: {T_TR_COLOR2}; border-style: none; }

/* Import the fancy styles for IE only (NS4.x doesn't use the @import function) */
@import url("modules/Forums/templates/subSilver/formIE.css");

To include the image cellpic3.gif, which is the thick line at the top of the forum box, you will need to alter code in your overall_header.tpl after you have replaced the code.

CHANGE THIS
/* Header cells - the blue and silver gradient backgrounds */
th {
color: #000055; font-size: 11px; font-weight : bold;
background-color: #FFFFFF; height: 25px;
background-image: url(images/cellpic3.gif);
}

TO THIS
/* Header cells - the blue and silver gradient backgrounds */
th {
color: {T_FONTCOLOR3}; font-size: {T_FONTSIZE2}px; font-weight : bold;
background-color: {T_BODY_LINK}; height: 25px;
background-image: url(modules/Forums/templates/subSilver/images/{T_TH_CLASS2});
}

Note - The T_TH_CLASS2 and all similar code can be found in /theme_info.cfg file.

Thats it as far as I am aware, you should be able to alter the colors as you want them now! Smile

registered · Posted: Wed Oct 31, 2007 7:54 pm

Actually it would be better to put your css in the themes/Karate/style.css file and delete all the css (and extra head tag) out of overall_header.tpl. (But what you have will work for most browsers...it just won't be compliant).

We've fixed this for fisubice and it will be in the next release as an example compliant XHTML forum theme.

Posted: Thu Nov 01, 2007 9:35 am

LOL, you must really have wanted to change that color. I'm blessed to be color blind.

More seriously, Karate is one of the themes that we did not make compliant in RN 2.10.

Only registered users can see links on this board! Get registered or login!

You are of course free to use it but why? It also doesn't come with a corresponding Forum template so you default back to using Subsilver. Gremmie has been into this stuff more than I have but it seems to me that the changes you are making will affect your whole site for anyone who is using a theme that doesn't have a corresponding forum template ... which as the link above shows are fisubice, deepblue and sunset.

I could be wrong and if so, please correct me.

Posted: Thu Nov 01, 2007 9:43 am

Thanks! I just changed it and it works great! Smile

Posted: Fri Nov 02, 2007 7:25 am

Hi fkelly,
I was reproducing a website that I already had on the web and Karate was the theme that had a layout that seemed to suit the replication of the original site. But now u have alerted me to something I never even thought about, the w3c compliance, I checked it out and I now have one error for the W3c compliance left, that I don't understand how to correct.....but I have 150 errors for the html compliance, and I started working on the errors, but found that some of my text from the content module has changed color, where it was blue it has become white and also some block text has changed to white too. With my limited knowledge on html and css, would ur recommendation be to start all over with a theme that is compliant, or could I keep working on it to sort it out somehow?

Thanks
Jane Smile

Posted: Fri Nov 02, 2007 7:36 am

My recommendation would be to start with a theme that was compliant. You might also want to use one that has an accompanying Forum template. And be aware that Gremmie has made changes for the upcoming RN2.20 release that will make even the Forum side of the fisubice theme be compliant, so look at that one first.

Last Winter I did compliance changes for perhaps a half dozen themes in RN2.10. Even when you get familiar with how themes work and get used to making the changes you are still talking about a week of work per theme and it is invaluable to have someone like Susann testing independently from yourself as coder. There's just a ton of details to be attended to. Tables, trs and tds don't nest properly in most of the pre RN2.10 themes and figuring out where to make the changes can be absolutely maddening ... as you can probably tell from my subsequent posts.

Posted: Tue Nov 27, 2007 5:27 pm

I'd just like to add to this post, since I switched to RN2.10 and now using the Anagram theme and Subsilver Theme in forums, I have found that when I did what Gremmie suggested - add the subsilver css to the theme css etc., I found that my site wouldnt validate as W3C css compliant, it seemed to have a thing about the scroll bars part of the css so as I wasn't sure whether I could just delete it, I decided to try what I originally suggested here, and everything seems to be ok now, it has validated.

Posted: Tue Nov 27, 2007 7:02 pm

Also, in the forums after making these changes, I noticed the body of my site was slightly out of alignment with the header, but when I removed these 3 lines of code from overall_header.php, it corrected the alignment plus also, the forums then reverted to using the font, sizes, colors etc in the theme css for menu text links, so the whole site looks the same.

Also PLEASE NOTE - The actual Subsilver forum theme in the Anagram theme is not W3C Compliant, what I'm showing here, is that I had a problem validating my main domain url and a couple of others on my site, when I tried to make the change that Gremmie posted and this is what I did to get them validating. The forum itself is a separate w3c issue and its better to have the main part of the site compliant than none at all Smile

Heres the code to remove

Look for this line /* General font families for common tags */
Then underneath DELETE these 4 lines(save a copy before deleting!)

font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
a:link,a:visited { color : #993366; }
a:active { color : #215DC6; }
a:hover { text-decoration: underline; color : #000000; }