All that and a bag of chips

DAMN I ROCK!

I do the victory jig of computer-joy! For I have finally got around to making the "StyleBar" Trying to get the StyleBar to work is what killed my old webpage, but now I have it.

So this document answers a question you may have. why do these wepages look so plain? But that's not what you actually want to know just yet. What you want to know is

How do I make these webpages not look so plain?

Look in the upper right-hand corner of this webpage.. you should see a button labeled "Use Style Bar" Click this button and this webpage should suddenly spring to life. Note: you need javascript enabled. You will also need a browser that supports stylesheets. It also stores information in Cookies. If you don't know what any of that means: don't worry about it: either you see a button in the upper-right corner you can click on or you don't. either it works or it doesn't.

Now this is why I love my webpage: if you don't have javascript, or don't have stylesheets, or don't have cookies enabled, you aren't missing anything. I have tried to make it work for everybody - if it doesn't: I'm sorry.

How do I use the StyleBar?

Ok, #1: Hopefully you can click the button at any time and the stylebar should disappear. Below the button you have two combo boxes: if left on "Default" each page should have it's own preferences, but if you want you can change either box.

It's probably easiest if you just experiment with the two combo boxes. The nice thing is: since stylesheets support varies widely between browsers if a page is totally screwed up looking you can try changing the stylesheets. And if all else fails, kill the stylebar, all you're missing is a few colors and fonts. No biggie.

For me, it also means I can stop caring about various levels of webbrowser compliance. I am not going to bother figuring out what stylesheets look nice with what browsers with what versions on what platforms for what operating systems BLAH BLAH BLAH. Bottom line: If it doesn't look nice for you, change the style. And hey, now everybody's happy =]

How does it all work?

[if you don't care how the stylebar works from a technical point of view: go back to my website and start having fun or skip to the next section]

I've got a piece of javascript that most of my html files include. It expects each html page to define two variables called DocTheme and DocSub. These variables define what theme and sub-style a page would prefer to have. Then I look for a theme and sub cookie - allowing the user to override the page's choice.

Then I include a stylesheet by the name of <website>/styles/<theme_name>/main.css, and (if a sub-style is specified) a stylesheet by the name of <website>/styles/<theme_name>/<sub_style>.css. This could be a problem if the theme_name directory is missing, or if the .css file isn't found, but fortunately browsers just ignore this problem.

I then have a list of all the publically known styles (there may be other customization .css files that aren't publically listed, but that an html file might still reference) - and the rest boils down to the mechanics of creating the stylebar form and setting/getting results out of it. (note: this was my very first attempt at doing anything in javascript. I found it analogous to programming inside a wet paper bag)

Now, I also have a custom utility that I wrote that selectively goes through my html pages (on my harddrive), and adds the <script ... > references into the html files, as well as adds a <div class="body"> tag (which I need to be present for some of the ways I do my stylesheets). Also, if either the DocTheme or DocSub is missing, it will add it in according to a default I have specified. This means that even though what you'll if you look through my webpage is every html file referencing the "tealish" style, using this utility I wrote I can easily change that to some different style on a whim.

This custom utility looks for a file called convert.prefs.txt to tell it what html files to include, and what files to exclude, etc.. and as it copies from my <site> directory to my <siteXfer> directory, it converts as appropriate. This means I can still have files that are custom html/no stylebar things and it doesn't degenerate into a maintenance headache.

I also had to write this utility because the webeditor I use, FrontPage Express, is really really dumb about things. If I try and put a <script> in the <head> section it totally messes up and moves the <script> into the body. And if I try defining my <div class="body"> tag it will freekin remove it on me. Unfortunately, FrontPage Express is also still one of the nicer to use/least hassle/simple html editors around there. And it's less work to hack my how little util to work around it's flaws than grep about trying to find something better.

So this is all skipping over stuff, sure... but hey, I'm just happy I did it.

If you're plan to steal all my code and my ideas.. hey that's find with me. But I'd appreciate it if you tell me so that I can take a look at your webpage when your done =]

Why these webpages look so plain?

<dogma>

So now I'll address the first question. These webpages are my attempt to follow some of the later-day thinking about webdesign. My webpages contain the content. Something called a "stylesheet" tells your browser how to display that content.

If you've successfully played with the StyleBar I wrote, you have probably already discovered the power of stylesheets. Although making the funky dropdown boxes and sheet was troublesome, I'm really not doing doing anything more complicated than making my html page point to a different style sheet.

Stylesheets are also waaaay more powerful than just adding markup tags to your html. You get to re-use your stylesheets, and only define things in one place. For instance, to make all my table data elements (<TD>) aligned to the top rather than center, I'll just write "TD { vertical-align: top }" in my stylesheet, instead of adding a "VALIGN=TOP" to every single TD element everywhere. Just take my word for it that stylesheets are really cool, and they are getting better. You can learn about them technically by searching around on the web. I go to W3C's webpage (www.w3.org/style), but most people will find that way to intimidating. So go to yahoo or something and look for stylesheets, you'll run across some tutorials and in the end it will severely simplify your life as a webmaster.

Because this is my own webpage I get to do whatever I want, so I'm aiming for strict HTML4.0 compliance - meaning my HTML contains no presentation markups. I do this because I'm really a believer in the increased accessability it can bring. It also lets me focus on the reason I like to think I'm doing this webpage: content. There are lots of people out there who have a lot of graphical style, and they do it well. But I'm not one of them.

I find it preferable to give you, the web-viewer, a bit of flair. But I don't want it to interfer with the goals I'm actually trying to accomplish.

</dogma>