Blosxcss Plugin
What is Blosxcss?
Blosxcss ( pronounced “Blah - six” ) is a framework to create intercompatible Blosxom web sites. By intercompatible, I mean that you could take the CSS stylesheet from any Blosxcss-Compliant website, and use it for another website, without any changes.
As an example, I have created multiple stylesheets for my site, and you can try them by using the “Choose a Style” options in my navigation panel on the left ( or maybe on the right, depending on which style you are using :)
Each style uses the same XHTML code, it simply applies different CSS rules to change the appearance. In fact, you will notice that the page does not reload when you change styles.
The key to this system is to define a standard system for naming and nesting (X)HTML structural items and the corresponding CSS rules. This allows you to create widely varying layouts by altering ONLY the CSS. It also means that you can easily change the look of your site by adding a new CSS file. You will NOT have to alter your carefully personalized theme (or flavour) files, AS LONG AS they are Blosxcss-Compliant.
The blosxcss download contains example pages of both compliant and compatible XHTML, as well as a couple of example styles. It also includes a theme file that replicates my personal layout, so you can see what I use. It included a blue background image for the blosxom and blosxom (right-handed) styles. The demonstration style is the same as the blosxom style, but it draws a border around each div to help demonstrate what is happening.
Right now, I am using XHTML 1.0 Transitional for my site, and that is what all the source files for blosxcss use. Once the standard is “fixed”, it will be easy to adjust these to provde HTML 4.0 Transitional, as well as XHTML 1.1 themes, as well as the corresponding flavour files ( though I believe you really should be using themes… ;)
How do Install Blosxcss?
To install, you need to do a couple of things:
Create a blosxcss folder at the root of your site ( ie the folder corresponding to
http://your.domain/) If your blosxom install requires thebloxsom.cgi/bit, then you will have to adjust the instructions accordingly, as well as manually alter the CSS files and the blosxcss plugin configuration to point to the right place.In this blosxcss folder, go all of your blosxcss CSS stylesheets, the styleswitcher.js file, as well as a folder for images. The images are stored in subfolders, based on the filename of the corresponding css sheet ( e.g. the images for the demonstration.css file go in /blosxom/images/demonstration/ )
Add the blosxcss plugin to your plugin directory, and set the configurable variables as desired. Be sure to enter a name for the default css file.
Be sure that your default theme/flavour is Blosxcss compatible. You can use the included html/page file as an example, but you will have to adjust it to suit your preferences. Once the standard is set, there will be a collection of these to choose from.
Check out your site using a CSS-Compliant Browser!
What about styleswitcher.js?
Additionally, by using the styleswitcher.js script by Paul Snowden, visitors are able to choose their favorite style, and that will be the default whenever they visit a blosxcss enabled site. This also enables multiple stylesheets for browsers that don’t support them on their own. Mozilla offers you a menu to allow visitors to use any available stylesheet, but Safari does not. With this plugin, any CSS compliant browser should be able to do make use of the setup ( as long as it supports Javascript.)
One thing you may notice is that if you use a browser that does not properly handle CSS (such as Mozilla earlier than 1.6), you will see a warning at the top asking you to manually choose a stylesheet. Once you do this, it should work from then on as the cookie sets the default style.)
Follow me on twitter
Subscribe to atom feed