To create a new theme for NOCC, start by creating a new subdirectory beneath the NOCC 'themes' directory. The name of this directory will be the name of your theme. If you enabled user-selected themes in conf.php, your new theme will automatically become available on the "Themes" drop-down menu on your NOCC login page. I'll call this the "themename" directory.
The easiest way to fill this directory is to copy the contents of an existing theme; those contents are:
colors.php defines the colors used for various areas on the main NOCC screen. The names used for each area are sometimes unclear; the best way I have found to deal with this is to create a "test" theme, where I make each color harsh and bright -- start with primary colors (FF0000, 00FF00, 0000FF) but remember you will need to define lots of distinct colors -- the idea of the test theme is to make every definition of a color in colors.php stand out from all the others.
Now display the page. Awful, isn't it?
The object of this "test" theme is not to create a page to be used directly. Instead, you want to save it (a color printer is very helpful!) and use it as a reference. Just by looking at it you will be able to say "I want this bright red area to be blue-gray instead." Find the field that you defined as "FF0000" and redefine it as "CCCCFF". Repeat until all the ugly colors are gone, and you can read all the text fields. Congratulations, you now have a new theme! Don't forget to send yourself some mail so you see all the fields in action -- some fields come into use when you're reading a message that you don't see when you're only looking at the subjects in your Inbox display.
style.css is a Cascading Style Sheet, which assigns fonts and some text colors. Even if you don't know a lot about CSS, it shouldn't be too hard to figure out how to make your text colors different from their backgrounds, which is the most important thing to do. Remember that any fonts you request must exist on the machine with the web browser, or else the browser will have to substitute another font. It is therefore wise to stick to general descriptions ("sans-serif") rather than specific fonts ("ComicSansMS"). This is also where you fine-tune your font sizes.
One nice thing about style.css is that it sets up colored text on the login button without resorting to graphics. This saves resources and makes things work more quickly.
For more help with the style sheet, see "Dave Raggett's Introduction to CSS" at W3.org. It not only explains about CSS, but there is also a section on how to define colors in plain old HTML, which is handy if that topic is new to you.
The img subdirectory contains buttons, the 1x1-pixel spacer.gif, and theme-based variations on the NOCC logo. If you pick an existing theme that is enough like your custom theme, you may not need to make any changes here at all. NOTE: the main logo graphic does not go here; it goes in the themename directory as 'logo.gif' (see below).
For buttons with rounded corners, you need to use a graphics format that supports transparency, and put your fancy button on a transparent rectagular background.
logo.gif - Does not have to be a .gif, but that's the name the NOCC code will look for. This is the main logo that appears on the upper left of the page after you log in. When I replaced the NOCC logo, I also took out the HEIGHT and WIDTH attributes associated with logo.gif in the NOCC code. Having those attributes is slightly more efficient at display time, but removing them makes it possible to drop in alternate logos much more easily -- you don't have to resize your image to match the exact size and proportions of the original NOCC logo.
A tip on finishing up a new theme: Check your error log, and make sure that there are no missing graphics. You should have a copy of spacer.gif in the theme's img subdirectory as well as in the main NOCC directory.
I seem to have misplaced my "test.tar" which is simply the garish color scheme described above. Oh, well; I wasn't that happy with it, and it's more educational if you make your own.
black.tar is a sample Brass Cannon theme for those who like black backgrounds. Note that my logo.gif is actually a .png file, but it still works on most browsers. Here's how to install it:
% cp black.tar /var/www/html/nocc/themes # use your "themes" directory % cd /var/www/html/nocc/themes/ % tar xvf black.tar # creates themes/black
Please put back the original NOCC logo (included in the tarball as nocclogo.gif) or install your own, as the Brass Cannon logo (logo.gif) is my trademark:
% cd black % mv nocclogo.gif logo.gif % cp logo.gif img
bccthemes.tar contains two more original Brass Cannon themes; bcc, a colorful theme based around my favorite background color, "#FFDEAD"; and silk, the white-on-white theme I created for my partner's site, Silk Purse Editorial Services. (The elegant lady is her trademark, "Felicity," and the same rules of usage apply.) Install instructions:
% cp bccthemes.tar /var/www/html/nocc/themes # your "themes" directory % cd /var/www/html/nocc/themes/ # ditto % tar xvf bccthemes.tar # creates themes/bcc and themes/silk % cd bcc % mv nocclogo.gif logo.gif % cp logo.gif img % cd ../silk % mv nocclogo.gif logo.gif % cp logo.gif img
21 October 2002 - Bugtraq has a report of a "cross-site scripting" vulnerabily in NOCC. The fix only changes two lines in the functions.php file. I'm including a copy here; to apply it, save it into the same directory as functions.php and then run the command patch < nocc.patch
Get the patch (1K text file)
Kevin Martin - contact page
