Compact Styles v0.2.1

Okay, whatever -- but you know you can override CSS, right?

Check out my new Mountains theme for an example of this, compare it to my version of Lithium:
http://www.cactuz.nu/forum/viewtopic.php?id=58

Actually, I don't think it will make it harder, I think it will make it easier.

By encapsulating the CSS it helps protect younger CSS authors from themselves. After all, if they add something to their template, it's a conscious decision -- they can't wonder where they went wrong, or why half the forums have suddenly shifted off screen, changed colour, or disappeared, because they can't accidentally edit the framework code.

If they make a mistake, it's much easier to experiment by erasing parts of your new stylesheet and let the previous inherited versions fill in what's missing. It's also easier to focus on what you have to change or edit now, when it's all you can see.

If you want to change the colours of a forum, which is easier to start customizing?

@import url("Common_Light.css");

TABLE.punmain {background:#00176A}
TR.punhead {background:#AFBCEA}
TD.punhead,TD.punheadcent {color:#423F84}

A:link,A:visited {color:#002195}
A:hover {color:#4C51B5}

A:link.punhot,A:visited.punhot {color:#8730D2}
A:hover.punhot {color:#2049E2}

TR.puncon1,TD.puncon1,TD.puncon1cent,TD.puncon1right,TEXTAREA {background:#E3E8FB}
TR.puncon2,TD.puncon2,TD.puncon2cent,INPUT,SELECT {background:#EDF0FC}
TD.puncon3 {color:#000;background:#D1DAF9}
TD,INPUT,SELECT,TEXTAREA {color:#122B84}

BODY { background-color: #FFFFFF }

TD {
    font: 10px Verdana, Arial, Helvetica, sans-serif;
    color: #333333
}

INPUT, SELECT {
    font: 10px Verdana, Arial, Helvetica, sans-serif;
    color: #333333
}

TEXTAREA {
    font: 10px Verdana, Arial, Helvetica, sans-serif;
    color: #333333
}

FORM { margin: 0 }

PRE {
    font-size: 11px;
    margin: 0
}

TABLE.punmain {
    border: none;
    width: 100%;
    background-color: #606060
}
TABLE.punplain {
    border: none;
    width: 100%
}
TABLE.punspacer {
    border: none;
    width: 100%
}

TR.punhead { background-color: #9AC55A }
TR.puncon1 { background-color: #DEDFDF }
TR.puncon2 { background-color: #EEEEEE }
TR.puncon3 { background-color: #C0C0C0 }
TR.puntopic { height: 1.5em }

TD.punhead { color: #FFFFFF }
TD.punheadcent {
    color: #FFFFFF;
    text-align: center
}
TD.puncon1 { background-color: #DEDFDF }
TD.puncon1cent {
    background-color: #DEDFDF;
    text-align: center
}
TD.puncon1right {
    background-color: #DEDFDF;
    text-align: right
}
TD.puncon2 { background-color: #EEEEEE }
TD.puncon2cent {
    background-color: #EEEEEE;
    text-align: center
}
TD.puncon3 { background-color: #C8C8C8 }
TD.puncent { text-align: center }
TD.punright { text-align: right }
TD.puntop { vertical-align: top }
TD.puntopright {
    text-align: right;
    vertical-align: top
}
TD.punquote {
    background-color: #F6F6F6;
    border: #606060;
    border-style: dashed;
    border-width: 1px
}

A:link, A:visited {
    text-decoration: none;
    color: #415720
}
A:link.punhot, A:visited.punhot { color: #C03000 }
A:link.punclosed, A:visited.punclosed { color: #888888 }
A:hover {
    text-decoration: none;
    color: #709735
}
A:hover.punhot { color: #F43E00 }
A:hover.punclosed { color: #AAAAAA }

IMG.punavatar {
    margin-top: 3px;
    margin-bottom: 3px
}

.puntext { font-size: 11px }
.punedited {
    font-size: 10px;
    font-style: italic;
}
.punsignature { font-size: 10px }
.punheadline {
    font-size: 12px;
    font-weight: bold;
}
.puntitle {
    font-size: 14px;
    font-weight: bold
}
.punhot { color: #C03000 }

I'm back.

At the moment I have it set up as one css file which makes it easier for testing. Given the option I would use two, one structural and one cosmetic which would make it easy for people who just want to change color schemes, fonts etc and insulate the uninitiated from making a mess of things.

However, I see no reason why the structural stylesheet has to be common to all themes. I would prefer each theme to consist of two css files with links to both inserted by php. The stylesheets would be called something like oxygen_main and oxygen_theme. If somebody wants to alter something structural then they can do it directly in the _main stylesheet rather than using the cascade to override it. It also makes it easier to distribute complete skins and/or make an online skin generator. If you use a common stylesheet and rely on the cascade then making wholesale changes to structure will involve overriding large parts of the common stylesheet. The end result could be a cosmetic stylesheet which is as big and complicated as the common stylesheet.

Of course you could make things really interesting by making both the structural and cosmetic stylesheets selectable by the user. This means you could have say four structural stylesheets and 6 colour schemes each of which work with all of the structural stylesheets. This gives you a total of 24 possible themes from 10 files. A bit more complicated I know but the real advantage is it would make it easy to produce specialist/accessability skins e.g. large fonts, fixed width etc.

Now all I have to do is try to remember what I was doing before I left; three weeks in the sun has fried my brain.

Louis: Contact Paul and I'm sure he'll demonstrate the changes he has done so far.