roy

The current styling system is confusing and impossible to maintain. I tried to create a simple style and template, and even I got confused.

I've been thinking about how to best fix this; the new system has to appeal to both advanced users like Ree with complete stylistic control (by the way, check out her awesome template!) while catering to complete beginners who just want to change colors and add a background image.

The solution I have in mind is this:

First off, I offer an option for setting a default color palette. This palette offers you the ability to define certain options:

• Primary, secondary, and tertiary accent colors
• Primary, secondary, and tertiary background colors
• Primary and secondary fonts
• Primary and secondary font sizes - this is probably better left off now that I think about it.

From this pool of pre-defined styles, all default Tabulas templates will have commands in the CSS that will allow for these values to be called. The advantage here is that you can use differing HTML markup and different CSS stylesheets for many different default Tabulas templates, while still allowing one color scheme to carry over to another - the current implementation limits your color scheme to a particular template.

This is far more intuitive to users. This will also allow me to add in features that have been requested for the longest time, like being able to set background images.

This could also be useful for people who want to make their own templates; although it's a bit premature, I want to allow users to generate Tabulas templates that can easily be shared with other users.

So far, I've taken all the existing Tabulas templates and split the CSS files into two files: a structural file with margins/paddings/float that defines how the template is laid out; a stylistic file that has font colors, border colors, background colors, and fonts. I'm going to add in a front-end Tabulas CSS parser where users will be able to create constants in the CSS files that will repeat. (More on this in a bit)

This new system should allow:

• Users to define one color palette that applies equally to all templates; included in this color palette will be the ability to add in a background image to a template
• Still maintain full templating control for people who are capable of implementing such items
• Allow me to develop widgets that would draw from the same palette (like tagboard) instead of having to develop them separately

Today I'm going to start by converting all the existing default Tabulas templates so that this can be implemented with relative ease in the future.

Update: Preliminary work is going very well. If you're adventurous, try this out on Tabulas:

• Set your template to Aphrodite
• Create a new color scheme
• Copy and paste this:
  /*** * BEGIN CONSTANTS * accent1: #fff; * accent2: #ff0; * accent3: #8e8e8e; * font1: Verdana; * font2: Tahoma; * * END CONSTANTS */ body { background: #e6e6e6 url('http://s.tabulas.com/templates/6/black/main_bg.gif') repeat-y; font-family: font1; } dd, dl, dt { color: accent1; } #top p { color: accent1; } #top a, #top a:link, #top a:visited { color: accent1; } #top a:hover { color: accent2; } #nav a { color: accent1; border-bottom: 1px dotted #fafafa; } #nav a:link { color: accent1; } #nav a:hover { color: accent2; border-bottom: 1px solid accent2; } #nav a:visited { color: #fcfcfc; } #right { color: accent3; } #right li a:link, #right li a:visited, #right li a { color: accent3; } #right li a:hover { color: #cacaca; } .right h2 { font-family: font1; color: accent3; border-bottom: 1px dotted accent3; } #top { background: url('http://s.tabulas.com/templates/6/black/grad_top.gif') repeat-x; } #content .comments { background: url('http://s.tabulas.com/templates/6/black/bullet.gif') no-repeat center right; } #content { font-family: font2; color: #fefefe; } #content .entry { border-bottom: 1px dotted #cacaca; } #content p { color: #fefefe; } #content a, #content p a:link { color: accent2; font-weight: bold; } #content a:hover { color: #cecece; } #content p.entryMeta { color: #cacaca; } #content p.info { font-family: Arial; color: #8a8a8a; } #content p.info a, #content p.info a:link, p.info a:visited { color: #595959; } #content p.info a:hover { color: #333333; } #content h4 { font-family: Arial; color: #818181; border-bottom: 1px solid #efefef; } #content h3 { color: #a7a7a7; } #bottom { color: #aaaaaa; font-family: Arial; } #bottom a { color: #aaaaaa; border-bottom: 1px solid #cacaca; } #bottom a:link, #bottom a:visited { color: #aaaaaa; } #bottom a:hover { color: #003471; border-bottom: 1px solid #003471; } .commentBody{ border: 1px solid #cacaca; background-color: #000000; } .owner { background-color: #3a3a3a; }
  (You can see the output of this CSS here)
• Go look at your site - the non-standard CSS that you pasted above will render! (See below for why this works)

You'll notice that that there is non-standard CSS constants in there (for example, #top a:hover { color: accent2; }). Basically you'll notice that at the beginning of the CSS file, there are a series of commands; the commands define what values to replace the constants with. So let's say I have at the beginning of my CSS file:

accent1: #fff

Anytime the CSS parser finds the 'accent1' code in the CSS file, it will replace accent1 with #fff. For now, this isn't that useful because you don't have a method of setting your own userstyles, but once that's set you will be able to apply one color scheme to all default Tabulas templates.

Part of this also involved me updating all the default Tabulas templates - all templates have been updated by splitting the CSS files into structural and stylistic (sorta funny I have to do this with CSS) files. Luckily custom templates have their own CSS, so doing this was backwards-compatible with everything on Tabulas.

I've also installed Mint on the Tabulas control panel so I can see what resolutions/browsers/features are the most popular. Mint is quite nice, and I will probably use this to track usage for most of my projects in the near future.