The Old Joel on Software Forum: Part 3 (of 5)

Hacking & Learning CSS

Hello,

I am adapting Postnuke for a non-profit organization's web site. Postnuke has several "skins" (themes), one of which I butchered for the style of the site. In order to control the look and feel of the site, I need to modify the style sheet that comes with the theme.

My problem is severalfold:

- Learning CSS.
- Identifying and implementing a style that will be accepted and understood by the users.
- Debugging what I come up with.
- Managing the many styles that Postnuke uses, most of them undocumented.

My biggest problem with the existing style sheet is that, in true geek fashion, the default fonts used for stories are too damned small. If I could have just fixed that I would have been fine. When I tried a bulk replacement of the font size "x-small" with "small" in the .css file, I ran into the first major problem: all of the links on the home page that were unvisited stayed "x-small', and the hover effect caused them to expand. Not attractive, very distracting. This is saying that the existing anchor specifications were fragile and broken.

One issue is that the existing style sheet implements many anchor pseudo class styles for slightly differing appearance of links in different contexts.

So one thing I've been trying in order to tame the complexity is to use the macro processor 'm4' to generate the style tags from specifications. This has worked OK but I keep running into exceptions that break the macros I write.

I have Hotmetal 6.0, which has an OK CSS style previewer/editor. Since this is a freebie I don't feel like buying a $50 piece of shareware or commercial ware to manage the styles.

Ideally, I would like to enumerate all of the anchor "functional" classes (use for different types of Postnuke content) and attach to each a set of attributes for its links in each of the link states. It would also be nice to have a tool that showed which attributes of tags were inherited from which style. Also, it would be REAL nice to have a tool that essentially "debugged" the effect of CSS styles. I like what Fogcreek has done with their links on the home page, but it's been difficult to dissect and understand what's going on.

I'm quite willing to use an unrefined command line tool to manage this stuff. While all this probably sounds ridiculously simple in the context of "real languages" like C# or Delphi, it's aggravating and time consuming because there are no real tools out there besides twiddling the styles and seeing the effect when you refresh.

Bored Bystander
Saturday, November 8, 2003

Not related to css, of which I've always battled with. I would suggest not using PostNuke if you can help it. Its been plagued by developer arguments since it split from phpnuke, at leats in my watching from the perl Content Management System camp.

I would suggest Drupal, http://www.drupal.org/ . The guy that runs it has it together, and the design of the system is very good, from what I've seen.

Anyway, now that thats out of the way (as I know it was probably annoying, I'm sorry), I've never found a better way to change things in CSS other than editing the .css file and reloading. Its slow and painful yes, but it gets the job done.

I've just started using Dreamweaver though, and it has a wizardish interface for creating new CSS styles, where you can choose the font, size, color, etc etc all from an easier interface than a text file...

Andrew Hurst
Saturday, November 8, 2003

Whatever CSS you learn to hack on PostNuke can hardly be considered a good example of CSS. In fact, PostNuke is a bad example of pretty much everything- Avoid it at all costs if you can.

You're looking for something canned- what's your feature set? How much do you need?

Matthew Lee
Saturday, November 8, 2003

Is there anything to stop you simply editing the CSS files by hand? They are no harder to edit than standard HTML, although the syntax is slightly different. And doing it that way will stand you in good stead for next time.

Greenspan's comments on "middleware" come to mind here.

Stephen Jones
Saturday, November 8, 2003

I recommend reading Jeffrey Zeldman's "Designing with web standards" (ISBN: 0735712018), skipping the first 150 pages - where he tries to convince you of using standards, reading the CSS stuff, and editing all the style sheets by hand (with your favourite editor).

uncronopio
Saturday, November 8, 2003

I usually just copy a site's css sheet that I like.

Tom Vu
Saturday, November 8, 2003

Let me suggest you following blog entry from Simon's weblog.

http://simon.incutio.com/archive/2003/06/03/bookmarkletsAndCSS

[In general, if you want to get useful info about CSS, add his blog to your blogrolll.]

Maxdesign has some EXCELLENT tutorials.

Check http://css.maxdesign.com.au. They currently do not have kind of tutorials you need (font sizes/anchors etc.), but if you go through them they will HELP you a lot as far as your CSS knowledge is concerned. Their tutorials have steps which you follow in order to learn one particular trick. I highly recommend it.

JD
http://jdk.phpkid.org

JD
Saturday, November 8, 2003

Okie,

Correct URL for Maxdesign CSS tutorials is

http://css.maxdesign.com.au

JD
http://jdk.phpkid.org

JD
Saturday, November 8, 2003

Having worked on a PostNuke implementation before and successfully implemented CSS for the site, I can say that PostNuke's templates are the biggest problem.

The first thing you need to do is rip out the guts of the templates and code them properly with semi-semantic content and meaningful classes and IDs. Once you do that you can start applying CSS as you need to.

CSS isn't that complicated to start with, but it can get difficult after a while as the file grows and the number of classes and amount of nesting increases. There are usually much less complicated ways to code things in CSS than one would imagine at first go. Nesting and inheritance are concepts that can really increase the legibility of your code.

I suggest building your CSS file from the ground up and checking it as you go. That way you can identify those items which cause problems. And don't forget to make use of the Box Model Hack to make sure your design renders properly on IE/5win and IE/5.5win. Also, using font-size keywords can breed problems of their own. You may want to consider using pixels (or if you insist on having IE resizable text I suggest reading up on fonts in CSS... keywords can breed problems of their own including micro-text).

Also, stylesheets can link to other stylesheets, and pages can import more than one. Be aware.

Lou
Monday, November 10, 2003

I liked the WDG guide to CSS very much:

http://www.htmlhelp.com/reference/css/

Of course, it is pretty old and I think it covers only CSS 1, but it is a good start.

Shlomi Fish
Thursday, November 13, 2003