Background:

Talking with my Geekzone colleagues recently on the subject of the Geekzone CSS its pretty clear that the technology (language?) isn't that popular. I'm not a designer, I have no taste in art or design (my wife will be happy to confirm this) - but I wanted a nice Geekzone Blog page and I needed to use CSS to do it.

NOTE: Not every Geekzone member has a geekzone blog - there are some restrictions and qualifications, contact the site administrator Mauricio Freitas for details.

My Geekzone web log (see below) uses the standard-issue Geekzone CSS file. And it's fine for what it does, but it's just like almost everyone else's. To see what could be done to make my web log page a bit different I went out looking for the better blogs within the Geekzone community and found a few unique home-grown pages with the help of the head honcho over there, Mauricio Freitas (who also has his own distinctive Blog page):

www.geekzone.co.nz/freitasm

www.geekzone.co.nz/redjungle

www.geekzone.co.nz/epicbeer

www.geekzone.co.nz/sbiddle

www.geekzone.co.nz/juha

 

My CSS trail of tears

I can chart my learning curve on CSS back to 2003 when I purchased the Sitepoint book "HTML Utopia: Designing Without Tables Using CSS" (by Dan Shafer, SitePoint Pty. Ltd.) It was a good effort but it didn't give me a conceptual handle on the subject, nor did it provide practical step-by-step forward.

The book went on the shelf with a few others that followed and they joined company with several "CSS Editors", hundreds of "Learn CSS" links from the Internet, and - remember PC magazines? lots of them too. I wasn't surprised to learn that many of my techie friends went through similar experiences. As a "last ditch" effort I reverse engineered a good CSS file from DreamWeaver back down to it's simplest elements - stripping out everything I didn't need and making the code look tidy and in the process found that there really isn't much too it - certainly not much to accomplish the projects I was after.

Today we're going to use that approach to jump right into the CSS coding for the Geekzone Blog pages, but if you'd like a bit more grounding in the theory or whatever, please look at the previous articles (14 - CSS 1 and 15 - CSS 2).

 

Step 1: Get a CSS file

(Please note: If you are in a hurry and want to cut straight to the editing of the CSS file you can jump to the final step here )

For those of you still here (thanks) these intervening steps are designed to provide you with a working CSS file from a poorly formatted source.

Getting a CSS file to start with is easy for us Geekzone members (or "geeks" as we like to be called [1]). The CSS file for the Geekzone Blogs is readily available at: http://www.geekzone.co.nz/blogconfig.asp in your Geekzone control panel.

There are no warning signs posted, but here's what that file looks like in the wild:

 

Best not to stare at it directly -- an experienced web designer might be able to cope with this format, but for us mere mortals, it's just too dense.

If you need a CSS for a project outside of the safety and comfort of the Geekzone forums there are probably thousands of sites dedicated to "Free CSS _1ncludes" as Goggle will confirm.

 

Step 2: Code Tidy

Once you have a web page (your blog) and its associated CSS file in hand Step 2 is to "clean it up".

The goal of the cleanup is to format and organise your CSS file into something you can understand and work with. Of course, if your CSS file is already clear and tidy, you can omit this step.

We will want to make some changes to the CSS code (otherwise why bother with all this) and in order to do this we need to have some grasp of the technology. But don't start sweating just yet - this is a lot easier than it sounds.

Step 2 - Subsection A:

For starters you can simply take an intelligent (and free) text editor like Notepad++ (available for download here) and make a couple of passes over the text to add some white space and tab indents that make the code much more readable.

You'll see from that very dense text block above that each CSS command begins on a new line and is followed by the left squiggley bracket (I should find out the real name of that thing shouldn't I...) followed by a series of "sub-commands", the line terminating with a "right" one of those. It's simpler if I just show you.

Even dummies like me can figure out what's going on here, and this holds true for most of the rest of this exercise. CSS looks hard, sounds hard, but once you strip away all the jazz it's really pretty simple.

Now do the same sort of "find and replace" for the semi-colons and the right brackets, and you should have a whole CSS file that looks like the above. Alternately, you are welcome to use my modified Geekzone CSS file.

 

Putting an ID on the colour

It's useful to know what colours you are working with, so even if you don't know what the code does, you might be able to identify what it does based on its color.

Most of the time, however, the colors in a CSS file are expressed in hex code and intelligible by mortals.

A handy tool that identifies these colors is a "colour picker". There are lots of them around and most of them are free. The one we will use here is ColorPic from Iconico. I've thrown in a download link below. Just hover the colour you want to identify to see the code. In the example below I've added a fake pointer to show that I want the hex code for the background colour used in the header box.

 

or you can use the table below which shows the items being colored, the code, and a picture.

You'll no doubt notice that, apart from white - there are only 4 colours you need to worry about - not that hard.

Bear in mind that our goal in all of this is to match the commands in the CSS file to sections that appear on our blogs so that when we want to make a change to or blog we can quickly find the governing section and (hopefull) make the change that will do the trick[2].

 

Step 2 - Subsection B:

One more "sub-command" (optional) is to re-organise these commands into groups that will make it easier for you to find them as you are applying them to your CSS sheet in an editor.

It's not always clear as to what the CSS command is about - some are obviously focused on fonts and will have a lot of font-related lines in them. This one makes the first letter of a paragraph fancy:

.blogpost:first-letter {
color:bgcolor="#94A598;
font-family:georgia,"times new roman";
font-size:large;
font-weight:bold;
}

others are clearly "box" or "page space" related commands as they have mostly width and margin lines in them

img {
margin:0 auto;
border-width:0px;
padding:3px;
vertical-align:middle;
}

But some will have a mixture of both, and you could put them in their own group if you'd like. I suspect that the position of the command in the CSS doesn't matter, but the position of the commands in the HTML page does.

For clarity, you might put the "box-oriented" commands at the top of the page in some kind of hierarchical order (the command at the top is usually the "body" and sets the rules for the whole page) and the "text oriented" commands at the bottom.

CSS is very flexible in this regard which is both a strength (if you know what you are doing) and a pain in the butt (if you don't).

 

Step 3: Who's Zoomin' Who?

Step 3 in this process is to identify the elements we want to add, modify, or delete. The problem is that we have elements (stuff we can see on the screen) and we have the CSS instruction set - but we can only guess which commands will change which elements.

What the heck is a "wrap" for example from the CSS file and what's included in the "maintable" ? and what can or should I change?

 

Enter the DOM Inspector

A FireFox plug-in that is ideally designed for this purpose. Created by Mozilla the DOM Inspector allows you to inspect, browse, and edit the Web Page Document Object Model. Details on the DOM Inspector can be found here.

Fire it up and enter the URL for the page you want to inspect. You will see a browser window at the bottom and two text windows on top. Set the top left window to "Document Accessible Tree" and the top right windows to "Object - DOM Node" you will probably see a little triangle at the top left of the Document pane. Click the triangle and it will open a section below - continue to click on these triangles to reveal the "subsidiary" structures beneath.

As you click on each section, details are revealed in the top right window and in the screen shot, the highlighted section is listed as "mainTable". What you can't see is that when I clicked on that "section" a red outline box started flashing around the area of the screen that enclosed the top header info and all of the visible post area. You may recall that we have a "maintable" tag in our CSS sheet, and I'll wager my virginity that the area of the web page defined by that red outline will match the directives of the "mainTable" in our CSS sheet.

( Perhaps next Christmas I can provide a set of screen shots that highlight each area defined in the CSS file. )

You can also use the investigator to identify elements on the page such that you can find those elements in your CSS sheet. You can then change the element, save the CSS file and view the web page.

<RANT:> It's unclear to me why the good folks over at Mozilla didn't simply provide a button that says "expand all" and perhaps another button that says "list all" so with one or two quick operations you could have the entire structure sused (or at least printed out). </RANT>

Let's Review:

• Start with an existing CSS file and make a copy.
• Clean it up with re-formatting and re-organizing
• Associate the CSS commands with the elements on the page

Test your page and make a copy.
You can then begin making incremental changes:

• Identify the element you want to change
• Beware of inheritance and target your changes to the lowest element in the hierarchy
• Save the CSS file and check the results
• Rinse and repeat

The professionals will tell you that it's best to design up the whole look and feel of your site, from top to bottom and in that way to can best determine the "balance" of the page(s), the "compatibilities" of the fonts and colours.

"Yeah, whatever. I just want that box over there to be blue instead of green"

 

Final Step: Let's get into it:

Step 1. Find your Geekzone control panel

It should be located at http://www.geekzone.co.nz/blogconfig.asp

On that page you'll see two style sheets - top and bottom - Custom CSS and Staged Custom CSS -- they are probably identical.

Editing and then "publishing" your style sheet is a two-step process.

Start by ticking the "Use Staged Custom CSS" box. This will let you make and save changes to the default CSS turning it into a "custom CSS".

You are now working in a test environment - only you can see the changes created here after you hit the "update" button at the bottom of the page. (Thus it is a "Staged" Custom CSS).

When you've got what you like, copy your edits from the bottom window up to the top window

Remove the tick from the "Use staged custom CSS" box and put a tick in the "Use custom CSS" box. This will make your changes visible to all who now view your blog.

Your first test might be to make a small change in the "Staged Custom CSS" window (like change the header window background colour to light blue) save your changes with the "update" button.

and then check the results.

NOTE: There are some hidden factors at play in this process, changing your CSS on Geekzone isn't the same as making those changes on your own server. For one thing, the "Investigator" used in the session above turned up three additional style sheets in use on my web log. For another, I read in a message from a member (can't recall where or who, sorry) that some heading tags are not allowed on Geekzone - and then Mauricio cleared a lot of that up by reporting:

We strip down most HTML from blogs and forums. Here's the regex with the allowed HTML: "<\/*?(?![^>]*?\b(?:a|center|ol|blockquote|strong|strike |br|b|i|em|li|ul|img|object|param|embed)\b)[^>]*?>"

I thought he was joking, but taking a second look it appears that the allowed html tags are:

(definitions for the above provided by web-source.net and w3schools.com)

The above being correct, it would explain why my efforts to add headers (h1 - h6) to my Geekzone posts disappeared when I copied them from my web server. It also suggests that if you want to modify your CSS, you will need to restrict yourself to the list above and perhaps substitute image files for html headers in order to break up your text.

Having said that, its clear from the examples above that we can develop attractive and distinctive Blogs with the tools we have at hand.

 

Ignorance is bliss

Happy CSS hacking. If any of this is unclear please hesitate to drop me a note, I am in no way an expert. My skills are limited to creating and modifying fairly simple CSS files and their HTML counterpart pages. I will, of course, answer all messages and help if I can.

 

 

 

Download Notepad++     Download ColorPic