Frequently Asked Questions:

1. How can I make a new Theme?
2. Is there an introduction to CSS anywhere?

1. Q: How can I make a new Theme?

   A: It's quite easy if you're at all familiar with web design. First, start with the stylesheet of the Default theme--it's the best-commented. (If you don't know how to find that stylesheet in the page source, that is your first clue that theming is not for you. :P) Update the colors as desired. Then you'll need to make the following graphics match your colors:

   • bullet.gif
   • hatching.png
   • logo.jpg
   • tile.png
   • graph.gif
   graph.gif is only used by the poll results page; you can find all of the rest on the main page. bullet.gif and hatching.png need to be the same dimensions as the ones from the default style. Other than that, making it look good is up to you. :)

   Some hints:

   • You can use background-image instead of background-color anywhere you see that in the CSS. BODY, section-bg, etc. E.g. background-image: url(cb.jpg). All your images must go in the same directory so don't use different directories or external hosts.
   • Bartjan created a theme editor and host at cb.dontpanic.nl so you don't have to worry about hosting.
   • The GIMP is a free image editor rivaling PhotoShop in power. If you run linux you probably already have a copy; otherwise, there is a windows port too. Remember to install gtk+, and then the gimp itself.

   
   

2. Q: Is there an introduction to CSS anywhere?

   A: Sikorsky kindly wrote one:

   CSS files are Cascading Style Sheets. In this file you can determine the styles being used on a webpage or website such as CB. In this style sheet you create a set of classes which have their own name and properties (colours/fonts/etc.). These classes are then being called from the webpages.

   Examples: these are from the cb.css file used for the default theme.

   BODY {background-color:#FFFFFF; margin:0px;}

   This is the information which applies to the entire page, in this case a white background and a 0 pixel margin, should you want to set an image as background you can replace the background-color= by background-image: url(YourFile.jpg) this background file can be any graphic format.

   
   /* various general-purpose */
   .font {font-size:10pt; font-family:verdana,arial; color:black;}
   .white-font {font-size:10pt; font-family:verdana,arial; color:white;}
   .small-font {font-size:xx-small; font-family:verdana,arial; color:black;
   font-weight:normal;}
   .fine-print {font-size:7pt; font-family:verdana,arial; color:black;}
   .fade-font {font-size:8pt; font-family:verdana,arial; color:gray;}
   .med-font {font-size:x-small; font-family:verdana,arial; color:black;}
   
   

   These are a bunch of fonts. Each new class starts with a . followed by the name of that class. In between the {} are the properties for that class (which I hope are self-explanatory). You can change the font size/colour and type. Colours can either be determined using a small set of recognized words, but it's more common to use the hex RGB codes. Most decent image editing software has the ability to display the RGB codes for colours, otherwise see www.visibone.com/color/hexagon_800.gif for a general overview. The colour code consists of 3 pairs of digits; the first set is for the amount of red, the second set for the amount of green and the 3rd set for blue. The range goes from 00 for none of that colour to FF for max of that colour. So #000000 is pitch black and #FFFFFF is pure white.

   
   /* general purpose header, subheader & footer colors and fonts */
   .white-bg {background-color:#FFFFFF;}
   a.header-link {font-size:12pt; font-family:verdana,arial; color:#0050F0;}
   a.header-link:visited {font-size:12pt; font-family:verdana,arial;
   color:#1060C0;}
   .header-bg {background-color:#900000;}
   .subheader-bg {background-color:#F02020;}
   .section-bg {background-color:#F0F0F0;}
   .subsection-bg {background-color:#F0F0F0;}
   
   

   This block contains information for the different headers and backgrounds. Again, you can use background-image instead of -color. The classes starting with a. refer to links. as you can see the same colour codes are being used.

   So how do you find out which class is being used for which text on the CB pages?

   Open up the pagesource and search for the text you want to know the class of, Above this text you'll find a tag similiar to this one: <td class=med-font>. this specifies that the text after the tag up to </td> will follow the formatting which is assigned to .med-font in the cb.css file. The <tr class= > </tr> is also being used at certain places on the page.