Page Index Toggle Pages: 1 Print
2.1 Template CSS, Color & Font Reference (Read 5380 times)
Captain John
Ex Member


2.1 Template CSS, Color & Font Reference
Sep 26th, 2007 at 7:11pm
Print Post  
   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:

Code
Select All
<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.

Code
Select All
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.

Code
Select All
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.

Code
Select All
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:
Code
Select All
     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:
Code
Select All
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.

Code
Select All
.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:
Code
Select All
.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.

Code
Select All
.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.

Code
Select All
.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.

Code
Select All
.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;

Code
Select All
.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;

Code
Select All
.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:
Code
Select All
     font-weight: bold;
     font-size: 13px;
     color: #FFFFFF; 



Code
Select All
.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:
Code
Select All
     background-color: #40454C;
     color: #FFFFFF;
     font-weight: bold;
     font-size: 13px; 



Code
Select All
.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.

Code
Select All
	 {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:
Code
Select All
     font-size: 11px;
     font-family: Arial;
     color: #000000;
     background-color: #A9A9A9; 



Code
Select All
	  {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:
Code
Select All
     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         
Code
Select All
{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:
Code
Select All
     color: #000000;
     font-family: Arial;
     font-size: 11px;
     background-color: #999999; 



textarea      
Code
Select All
{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       
Code
Select All
{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:
Code
Select All
<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:
Code
Select All
<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...
 
Code
Select All
<tr bgcolor="#272A2F"> 


and change it to...
 
Code
Select All
<tr bgcolor="#304460"> 



next find...
Code
Select All
<tr align="center" valign="middle" bgcolor="#444444" > 


and change it to...
Code
Select All
<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:
Code
Select All
<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:
Code
Select All
<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:
Code
Select All
<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:
Code
Select All
<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:
Code
Select All
<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:
Code
Select All
<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:
Code
Select All
<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 we're 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:

Code
Select All
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 




Credits: Wekder (welder@canada.com)
http://www.boardmod.org/yabb/YaBB.pl?board=tutorials;action=display;num=10008421...
  
Back to top
 
IP Logged
 
Captain John
Ex Member


CSS Selectors
Reply #1 - May 15th, 2010 at 12:11am
Print Post  
Note: CSS structure

There are basically 3 types of selectors:

HTML Selectors with no leading character, applied simply by the HTML tag name - example: input {...}

Class Selectors with a leading dot (.), applied by the 'class' attribute - example: .button {...}

ID Selectors with a leading hash character (#), applied by the 'id' attribute - example: #maincontainer {...}

I don't recall having seen a '.input' selector and it would not really make sense as 'input' is a HTML tag. The 'input, .button' selector is a strange construction and should just be '.button' and applied to the 'input' tag by a class="button" attribute (and it is) as 'button' is not a tag name but a type of 'input'.
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Print
 
  « Board Index ‹ Board  ^Top