Page Index Toggle Pages: [1] 2  Send TopicPrint
Hot Topic (More than 10 Replies) HowTo edit forum colours (Read 5224 times)
Administrator
Forum Administrator
*****
Offline


Yummm

Posts: 7
Location: Modders Rile
Joined: Oct 7th, 2014
Gender: Male
HowTo edit forum colours
Sep 19th, 2001 at 2:42am
Print Post  
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 (Wink 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;}
Code
Select All
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  Wink
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">&#171; <YABB title> &#187;</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.
  

The Administrator.
Back to top
WWW  
IP Logged
 
DemonSlayer
God Member
*****
Offline


I am the face of pure
evil!

Posts: 1398
Joined: Jul 26th, 2001
Gender: Male
Re: HowTo edit forum colours
Reply #1 - Sep 19th, 2001 at 6:57am
Print Post  
Nice job Smiley
  
Back to top
ICQAIM  
IP Logged
 
Unknown553
Senior Member
****
Offline


Linkin Park Fanatic

Posts: 298
Joined: May 30th, 2001
Gender: Male
Re: HowTo edit forum colours
Reply #2 - Sep 23rd, 2001 at 3:41am
Print Post  
thank you!!! now if only the newbies will read this before asking 100 times
  
Back to top
WWWAIM  
IP Logged
 
killa-b
Senior Member
****
Offline



Posts: 350
Joined: Aug 5th, 2001
Gender: Male
Re: HowTo edit forum colours
Reply #3 - Sep 23rd, 2001 at 8:53am
Print Post  
lol... you dont have much tolerance anymore do ya marcus? Wink
  
Back to top
WWW  
IP Logged
 
DemonSlayer
God Member
*****
Offline


I am the face of pure
evil!

Posts: 1398
Joined: Jul 26th, 2001
Gender: Male
Re: HowTo edit forum colours
Reply #4 - Sep 23rd, 2001 at 8:56am
Print Post  
After a while everyones tolerance diminishes
  
Back to top
ICQAIM  
IP Logged
 
Shoeb Omar
God Member
*****
Offline


Mod Writer

Posts: 5665
Location: San Diego
Joined: Jun 29th, 2001
Gender: Male
Re: HowTo edit forum colours
Reply #5 - Sep 23rd, 2001 at 8:58am
Print Post  
how  much does that apply to me i wonder Grin
  

YaBB SP2 BETA!
Now taking pay jobs in PHP or Perl.  Contact me for details.
Back to top
IP Logged
 
Dave Baughman
God Member
*****
Offline


I want my MTV

Posts: 2039
Location: Murfreesboro
Joined: May 18th, 2001
Gender: Male
Re: HowTo edit forum colours
Reply #6 - Sep 23rd, 2001 at 9:30am
Print Post  
Let's not post off topic, please. This thread is about a tutorial... keep it that way. No need to respond to this unless it's on topic, because it will be deleted in the interest of the newbies who want to find useful information or comments in this thread.
  

I'm not sure if it's ignorance or apathy, but I don't know and I don't care.
Back to top
WWW  
IP Logged
 
Kickboy12
Senior Member
****
Offline



Posts: 326
Joined: Nov 5th, 2001
Gender: Female
Re: HowTo edit forum colours
Reply #7 - Nov 22nd, 2001 at 1:23pm
Print Post  
some of this i knew, but it does help just in case i get stuck.

Thanks XXL!
  
Back to top
YIMAIM  
IP Logged
 
ms_ukyankee
Senior Member
****
Offline


fka whisper68

Posts: 365
Location: England
Joined: Apr 18th, 2002
Gender: Female
Re: HowTo edit forum colours
Reply #8 - Jul 2nd, 2002 at 11:36am
Print Post  
This tutorial was quite helpful, it did get me through learning how to edit the template. I saved to disk my main forum index page, and edited the code within the page so I could see how the changes were looking. I then copied the new values to the template. Loved the new look. However, once I began navigating around the board, I found where things weren't working, and I've begun to painstakingly edit the perl files to change some cell colors. I accidently found that in the language file, are many of the text color classes, and have solved most of the problems there.

I still have a couple of problems to iron out, which board is the correct place to ask?

Thanks,
Leah
  

No longer active on Boardmod, migrated to another forum system.
Back to top
ICQ  
IP Logged
 
Shoeb Omar
God Member
*****
Offline


Mod Writer

Posts: 5665
Location: San Diego
Joined: Jun 29th, 2001
Gender: Male
Re: HowTo edit forum colours
Reply #9 - Jul 2nd, 2002 at 2:05pm
Print Post  
general board or template board would be good Smiley.
  

YaBB SP2 BETA!
Now taking pay jobs in PHP or Perl.  Contact me for details.
Back to top
IP Logged
 
ms_ukyankee
Senior Member
****
Offline


fka whisper68

Posts: 365
Location: England
Joined: Apr 18th, 2002
Gender: Female
Re: HowTo edit forum colours
Reply #10 - Jul 4th, 2002 at 9:38am
Print Post  
oh duh, sorry, I thought the template board was a link to the templates themselves.  Roll Eyes
  

No longer active on Boardmod, migrated to another forum system.
Back to top
ICQ  
IP Logged
 
dischordio
New Member
*
Offline


I love YaBB 1G - SP1!

Posts: 14
Joined: Aug 24th, 2002
Re: HowTo edit forum colours
Reply #11 - Aug 24th, 2002 at 9:10am
Print Post  
Do you know if theres a way to force 3d colors to override the ones set by the users system?  In other words, cetain elements, like the edges of submit buttons and the beveled edges on drop-down boxes use the colors set in my display properties- is there any way around that?  When the colors dont mesh w/ the colors on a page, it really stands out- thx for the tutorial
« Last Edit: Aug 24th, 2002 at 11:17pm by dischordio »  
Back to top
 
IP Logged
 
Ron
Junior Member
**
Offline


I'm SquisHED ;-)

Posts: 62
Location: Grand Rapids
Joined: Feb 8th, 2004
Gender: Male
Re: HowTo edit forum colours
Reply #12 - Feb 8th, 2004 at 10:15pm
Print Post  
Thanks, but do you know where I can find the color setting for theh header bar for the  "Members list" mine are white and most of my other header titles are black.  I want to make them black. I know how just can't find them.  Just checked, all seem to be black except member list (I added Carstens mod). I can't find it in memberlist.pl



  
Back to top
WWW  
IP Logged
 
RedHed
New Member
*
Offline


I love YaBB 1G - SP1.2!

Posts: 3
Joined: Jul 18th, 2006
Re: HowTo edit forum colours
Reply #13 - Jul 18th, 2006 at 2:29pm
Print Post  
Could someone tell me why I am not seeing this "Edit forum template"

I see, on the right side, a list of things

Along with one that says Forum Layout.

None of those options have anything that looks like the original post.
  
Back to top
 
IP Logged
 
RedHed
New Member
*
Offline


I love YaBB 1G - SP1.2!

Posts: 3
Joined: Jul 18th, 2006
Re: HowTo edit forum colours
Reply #14 - Jul 18th, 2006 at 2:40pm
Print Post  
Nevermind, I figured out where to edit the template. It's not what you called it.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint