by welded (welded@canada.com)for the sake or others, this is how to change the default colours to whatever turns your crank. remember to keep a copy of the default template somewhere safe just incase something goes haywire and you want to restore everything. i also recommend that you makes these edits with two instances of your forum open. in one you can make the changes, and in the second you can navigate around your forum to see the effects of the changes. this is just a time-saving technique. and lastly, unless otherwise directed to, do not ever delete any semi-colons (
or braces ({ }). this could render your style sheet inoperable.
if you log into the admin section, then choose edit forum template, you'll see a textarea with html in it. you can directly edit the look and layout of your board here. specifically, you should look first for the style tag. it will look like this by default:
(btw, i'm not using the code button because the text is too darn small)
<style type="text/css">
<!--
A:link {text-decoration: none; color: #FFB903;}
A:visited {text-decoration: none; color: #FFB903;}
A:hover {text-decoration: none; color: #DDDDDD; font-style: normal; text-decoration: underline overline}}
BODY {scrollbar-face-color: #272A2F; scrollbar-shadow-color: #1B1E25; scrollbar-highlight-color: #cccccc;
scrollbar-3dlight-color: #272A2F; scrollbar-darkshadow-color: #1B1E25; scrollbar-track-color: #444444;
scrollbar-arrow-color: #ffb903; font-family: Verdana}
.nav {text-decoration: none; color: #FFFFFF;}
.nav:link {text-decoration: none; color: #FFFFFF;}
.nav:visited {text-decoration: none; color: #FFFFFF;}
.nav:hover {text-decoration: none; color: #FFB903; font-style: normal; text-decoration: underline}
.windowbg {background-color: #272A2F;}
.windowbg2 {background-color: #444444;}
.windowbg3 {background-color: #FFB903;}
.titlebg {background-color: #FFB903;}
.text1 {font-style: normal; font-weight: bold; font-size: 13px; color: #000000;}
.catbg {background-color: #40454C; color: #EEEEEE; font-weight: bold; font-size: 13px;}
.bordercolor {background-color: #000000;}
.quote {font-size: 10px; font-family: Arial; color: #FFFFFF; background-color: dimgray;}
.code {font-size: 10px; font-family: Courier New; color: #000000; background-color: #FFB920;}
TD {font-family: Verdana; color: #FFFFFF}
input {background-color: #333333; font-family: Verdana; font-size: 10pt; color: #FFFFFF;}
textarea {background-color: #333333; font-family: Verdana; font-size: 10pt; color: #FFFFFF;}
select {background-color: #333333; font-family: Verdana; font-size: 7pt; color: #FFFFFF;}
-->
</style>now i will edit this from the current default value to a colour scheme i was messing around with for another user, with a few changes to keep it simple. if you're even a little familiar with html then you shouldn't have much trouble making the changes you want. now let's start at the top.
A:link {text-decoration: none; color: #FFB903;}if you want to change the colour of (some) of the links that appear on your board to a shade of grey then you want to edit the value of
color: #FFB908 so that it reads
color: #A9A9A9. you'll also see
text-decoration: none; just before the
color definition. what this does is determines whether the link has any sort of underline, overline, or nothing at all. if you want to change the look, just replace
none with one of the other values i mentioned. if you like, just repeat this step for the value of
A:visited. this is the colour of links that you have clicked on.
A:hover {text-decoration: none; color: #DDDDDD; font-style: normal; text-decoration: underline overline}}this selector changes the colour of a link when your cursor passes over top. it's a bit more complex than the last one you looked at, but it's still relatively simple to customize. first off, you'll see
color: #DDDDDD. try changing this to a very light grey with the value
#C0C0C0. next, take a look at
font-style: normal;. this value ensures that if a link is currently italisized then it will return to it's normal state while you're cursor is over top of the link. you can change this to
oblique or
italic, or simply delete it completely. i took it out because i didn't like the effect. last, you'll recognize the
text-decoration style, but with a twist. it has not just one value, but two. this is a little trick to add both an underline and an overline to the link. personally, i dislike this and removed both of these values and replaced them with
none. now you'll see two curly brackets called braces (}}). i will not get into their purpose, but i do recommend that you delete the first one and replace it with a semi-colon (;}). this is a typo in the coding and could (but not likely) cause compatibility problems for some users.
BODY {scrollbar-face-color: #272A2F; scrollbar-shadow-color: #1B1E25; scrollbar-highlight-color: #cccccc;
scrollbar-3dlight-color: #272A2F; scrollbar-darkshadow-color: #1B1E25; scrollbar-track-color: #444444;
scrollbar-arrow-color: #ffb903; font-family: Verdana}here you can edit the colours of the scrollbar (ie 5+ only) and the default font for the page. every style beginning with
scrollbar- relates to (surprise) the colour of the scrollbar. you have already changed colour values for the links so feel free to edit these values. i chose:
scrollbar-3d-light-color: #FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-base-color: #999999;
scrollbar-dark-shadow-color: #666666;
scrollbar-face-color: #666666;
scrollbar-highlight-color: #C2C2C2;
scrollbar-shadow-color: #000066;
you can also change the default font from
Verdana to
Arial (as i did) by simply changing the font name. one thing to remember, though, is if the font you choose is more than one word you really should enclose it in quotation marks. for example, if you wanted
Comic Sans Serif as the default font you would type it in like this:
"Comic Sans Serif". finally, i added this bit of code to change the colour of the background, the colour of the text, and the size of the text:
font-size: 11px; color: #000000; background-color: #686668;. just be sure to add this after the last semi-colon and before the closing brace (}) otherwise, it will not function properly.
.nav {text-decoration: none; color: #FFFFFF;}
.nav:link {text-decoration: none; color: #FFFFFF;}
.nav:visited {text-decoration: none; color: #FFFFFF;}
.nav:hover {text-decoration: none; color: #FFB903; font-style: normal; text-decoration: underline}up to this point you have been dealing with style selectors that directly affect a specific html tag. this selector, however, is called a class and, in this case, is used to edit the look of certain links that will appear on your forum. since i have already discussed everything you need to know to edit the look of your links, just refer to an earlier portion of the tutorial. the values i chose are:
.nav { text-decoration: none; color: #A9A9A9;}
.nav:link { text-decoration: none; color: #A9A9A9;}
.nav:visited { text-decoration: none; color: #999999;}
.nav:hover { color: #999999; text-decoration: underline;}
*note that after the word
underline i added a semi-colon. this is to fix another typo that could possibly cause errors for some users.
----------------------------------------------
end of part one...
----------------------------------------------
this portion here is where having two windows open will come in handy. since the following elements affect such a wide range of areas of your board it's much easier for you to just surf around and see for yourself as opposed to me trying to explain.
.windowbg {background-color: #272A2F;}this is another class, but instead of changing the look of a link, it will change the look of certain table cells throughout your board. to change the default value is essentially the same as how you changed the colour of the links, but now you're looking for
background-color. i changed this to be a value of #003333. now i will make a small addition to help ensure that the text inside of whatever cell this affects will be legible. after the semi-colon following the colour value but before the closing brace (}) add this line of code:
color: #FFFFFF;. you can edit this value as you see fit.
.windowbg2 {background-color: #444444;}this functions in the exact same manner and the style element above. i changed this value to #444444. as above, add
color: #FFFFFF; after the semi-colon and before the closing brace.
.windowbg3 {background-color: #FFB903;}again, we have a class element that affects table cells. i made this a value of #C0C0C0 and added
color: #000000;.titlebg {background-color: #FFB903;}this operates in the same method as the previous few elements. edit this to read as follows and take a look around to see the changes in effect.
background-color: #304460; color: #FFFFFF;.text1 {font-style: normal; font-weight: bold; font-size: 13px; color: #000000;}here is another class, but it doesn't change the background colour of any tables, but instead is used to edit the look of certain sections of text. the only values you haven't come across yet are
font-weight: bold; and
font-size: 13px; as you may well have guessed, the former determines that this text will be bold, but you may change this to
normal,
bolder,
lighter or give it the value of
100,
200,
300,
400,
500,
600,
700,
800, or
900 with 100 being the lightest and 900 being the boldest. the former will change the size of the text. the bigger the number, the bigger the text, and so on. the values i have are as follows:
font-weight: bold;
font-size: 13px;
color: #FFFFFF;
.catbg {background-color: #40454C; color: #EEEEEE; font-weight: bold; font-size: 13px;}this element functions similarly to the
.windowbg elements. the values i have are:
background-color: #40454C;
color: #FFFFFF;
font-weight: bold;
font-size: 13px;
.bordercolor {background-color: #000000;}this also works like most of the other class elements in how it changes the colour of a table background. however, the difference is that you only see the edges of this table from behind all of the other tables. this is what gives the border effect. if you want this to be another colour, feel free to edit as necessary, but i left it as it was.
.quote {font-size: 10px; font-family: Arial; color: #FFFFFF; background-color: dimgray;}you are already familiar with most of the values you'll see here, with one possible exception. you can see that the value for
background-color is a name of a colour, not a collection of 6 numbers and letters (known as hexidecimal, if you were wondering) as you've previously dealt with. this is a perfectly acceptible method of defining a colour, but it is a bit limiting as there are only, like, 140 colours that have names as far as html is concerned, but there are a huge amount of colours to choose from if you use the hex method. there is actually a third method that uses separate values for red, green, and blue to create a new colour, but nobody uses it. i gave this element the following values:
font-size: 11px;
font-family: Arial;
color: #000000;
background-color: #A9A9A9;
.code {font-size: 10px; font-family: Courier New; color: #000000; background-color: #FFB920;} this is what this class affects
as you can see, the font as defined by
font-family: Courier New; is not enclosed in quotation marks. even though it works in this case, it is a bad idea to not do so and if you want to keep this font, i recommend putting the quotation marks around it so it reads
font-family: Courier New";. the values i have are:
font-size: 11px;
font-family: "Courier New";
color: #000000;
background-color: #A9A9A9;
TD {font-family: Verdana; color: #FFFFFF}just as you picked the default font in the body element earlier on, you can do so here. td is part of a table and in this case is used to ensure that the font definition will be uniform throughout the site, whether the text is in a table or not. netscape in particular has trouble, so consider this a safeguard and just make the
font-family identical to that in the body element. it's also not a bad idea to add
color: #FFFFFF; as i have to make sure the text is legible against the background colour. just be sure to add the missing semi-colon after the
font-family definition.
input {background-color: #333333; font-family: Verdana; font-size: 10pt; color: #FFFFFF;}we are now done with class selectors, and have just a few elements left. input will affect the buttons, checkboxes, and text fields on your board. i have used the following values:
color: #000000;
font-family: Arial;
font-size: 11px;
background-color: #999999;
textarea {background-color: #333333; font-family: Verdana; font-size: 10pt; color: #FFFFFF;}this works the same as input, but will affect the text areas on your board. i suggest making the two elements have matching values to keep things looking nice.
select {background-color: #333333; font-family: Verdana; font-size: 7pt; color: #FFFFFF;}and finally, just as with input and textarea, select will change the look of the select boxes (or drop down menus) on your board. again, i recommend matching it's values with that of the previous two elements.
-----------------------------------
end of part two...
-----------------------------------
sorry, we're not done yet
while still in your edit forum template screen, look for this code:
<body text="#FFFFFF" bgcolor="dimgray" bottomMargin="0" leftMargin="0" rightMargin="0" topMargin="0" MARGINWIDTH="0" MARGINHEIGHT="0">i recommend matching the values in this html tag to match that of what you have done in the style tag. it is not necessary since the values in the style tag will always take precidence over the values here, but it is good practice to do so, and helps ensure that users with older browsers see your board as you intended it. so with that said, you would change it to read:
<body text="#000000" bgcolor="#686668" bottomMargin="0" leftMargin="0" rightMargin="0" topMargin="0" MARGINWIDTH="0" MARGINHEIGHT="0">now you've only got 1 more edit to make in your template editor, and that's to make the table at the top of your forum, the one with the title and buttons in it, to match the colour scheme. look for this little hunk of code...
<tr bgcolor="#272A2F">and change it to...
<tr bgcolor="#304460">next find...
<tr align="center" valign="middle" bgcolor="#444444" >and change it to...
<tr align="center" valign="middle" bgcolor="#304460" >the only real changes made are to the
bgcolor attributes. you can use any value you like, just be sure to enclose it in quotation marks.
for the final edits to the forum template, you'll have to locate the existing
<font> tags. there are six by default. the first will be in a hunk of code that looks like this, and it surrounds the title of your forum:
<font color="#FFFFFF" size="4"><yabb boardname></font>in my example, you do not need to change the colour, and i generally leave the size as it is, but you may edit as you see fit. the common values for
size are
1 through
7, with
3 being the default on most browsers,
1 being smallest, and
7 being the largest.
you'll see the next
<font> tag immediately after the first one, it looks like this:
<FONT SIZE="1"> :: Powered by <A HREF="http://yabb.xnull.com">YaBB</A></FONT>as you now know,
size="1" is the smallest size you can make with standard html, and this line is just a link back to the official yabb web site. i tend to delete this line because there is already a full copywrite line at the bottom (we'll get to that in a minutes) and i don't like it there. the choice, as always, is yours.
the next one reads:
<FONT SIZE="2">« <YABB title> »</FONT>this line is pretty much the name of the current section you're in. surf around and you'll see that it changes as well.
a few lines down you'll find:
<FONT SIZE="2" COLOR="#ffffff">
<YABB uname> <YABB im>
<BR><YABB time>
</FONT>these few lines are where your username, instant message status, and the current time are displayed. by default they are grouped together as the same size and font, but you can change this if you're feeling creative. just remember to make a backup first, just in case.
many times i will just ignore this next line, but you should at least be aware what purpose it serves:
<FONT SIZE="2">
<YABB menu>
</FONT>be default, yabb will display the navigation buttons at the top as graphics, but in your admin settings page you can change this to be simple text links. in the event that you choose to turn the graphics off, you'll want to be able to display the links as you like, and here you can pick the font and the font size.
this next line is pretty useless, i've found, but i could just be missing something:
<FONT SIZE="1"><BR><BR>
<YABB main>
</FONT>this is where the bulk of the message board will appear. do as you wish, i don't know what purpose this tag serves here. play around with it, you may find something interesting.
and finally we have that copywrite text i spoke of earlier:
<FONT FACE="Verdana, Arial" SIZE="1"><BR><BR>
<YABB copyright>
<BR><BR>
</FONT>if you look at the bottom of your message board you'll see some typical legal stuff. by using yabb, you MUST keep this information intact and legible. other than that you may edit any attributes you like, such as the font, size, and the colour.
now were all but finished. be sure you have saved your forum template, then go into the admin settings and preferences page. scroll down the page until you see the section that deals with the forum colours. it is not necessary to edit these, but again, it is good practice and it will ensure everything matches. you will need to refer to the values you edited in the forum template and match them to the categories here. i will break it down for you:
Title BG Color = .titlebg = #304460
Title Text Color = .text1 = FFFFFF
Window BG Color = .windowbg = #003333
Window BG Color #2 = .windowbg2 = #444444
Window BG Color #3 = .windowbg3 = #C0C0C0
Category BG Color = .catbg = #40454C
Table Border Color = .bordercolor = #000000
finished!!that's it, now you're all set.
you can brush up on your css knowledge at [url=http://hotwired.lycos.com/webmonkey/reference/stylesheet_guide/css_properti
es.html]web monkey[/url] and i have a copy of a great
colour visualizer i found somewhere on the web. it deals only with the web safe colours, but it's fantastic for coming up with colour schemes on the fly.
if you have any questions or comments, just post something here or email me and i'll be happy to help out. if you spot any errors, please point them out.
Pages: [1] 
HowTo edit forum colours (Read 16449 times)
