Please note that you may have been redirected (you might like to make a note of the URL in the address bar of your browser and update accordingly) This is a permanent archvie but is no longer actively maintained. Please visit http://joshuaink.com for the latest updates.
Rebuild Day 5 point 5
Wednesday October 27, 2004
I have put a basic style sheet in place, just to bring a little order to the site but I also want to get a style sheet switcher up and running. I found a neat little plug-in over at Flap Design which will allow me to provide some style options a little further down the line, for now I just have two options "Default" or "Off".
This plug-in comes in two parts, fla_style_switcher and fla_altlist_link. Let's start with the fla_style_switcher:
Back at Rebuild Day 3 point 6(code list line 5) I commented out the textpattern tag for outputting the style sheet link, having installed the fla_style_switcher plug-in I have now replaced this entirely with the new TXP tag:
- <txp:fla_style_switcher />
Now when the page renders the <head> section contains the following:
- <link rel ="stylesheet" href ="/textpattern/css.php?n=default" type ="text/css" media ="screen" />
What this tells me is that the switcher plug-in is looking for the "default" CSS file. Open up the textpattern interface and head over to Presentation > Style and here you will find the CSS editor and look top left you will see the words "You are editing CSS default". So that's how that works, well almost.
If you are in the habit of producing one big CSS file for your site styles there is no need to go any further with this bit, cut and paste the CSS code directly into the textpattern editor, hit save, job done. I like to break my CSS into individual files though and, as far as possible, keep them logical; so one for typography, one for layout, so on and so forth. To do this normally I would have a "main.css" file from where I would import style sheets. To externalize my style sheets with this system I will remove all the CSS that is currently found in the textpattern "Default" CSS template and import styles instead; as an example:
- @import url(/css/layout.css);
- @import url(/css/typography.css);
- @import ulr(/css/graphics.css);
This pops off to the root of the server, looks for a folder called "css" and loads in the CSS files found therein.
I really like this way of organizing CSS, though it does take some practice. An example of how this could be useful would be come Christmas; if I decide to add some festive eye candy, I can simply replace the graphics.css file with a christmasgraphics.css and bingo, job done. Come January I simply put the graphics.css back in place.
Okay that's the fla_style_switcher bit sorted, next comes the fla_altlist_link and this generates the URLs needed to make the "switch". Before I do that though I need to create an alternate style sheet to switch to. In this example I just want to switch styles "off" so in Presentation > Style I hit the "Create or load new CSS " link and save it as "off". Just one note here before we continue I did actually add the following to the "off" sheet before I hit save:
- body{
- margin:1%;
- }
I did this because I have read somewhere (and I am damned if can remember where) that some older browser will stall or crash if they are presented with an empty style sheet (can anyone verify this?), the above seemed like the least harmful way to solve this.
Now back at Presentation > Pages I added the following TXP tags to my "default" page template:
- <txp:fla_altstyle_link style="default">default</txp:fla_altstyle_link>
- <txp:fla_altstyle_link style="off">off</txp:fla_altstyle_link>
and when I do a View > Source in my browser I find the following:
- <a href="?css=default">default</a>
- <a href="?css=off">off</a>
That's pretty self explanatory I think. I can create a list of options site wide if I like, or even goes as far as creating a separate "Style Options" section, hell I could even start my own little Garden right here. I like this plug-in a lot!
Angad
1963 days ago
John Oxton
1963 days ago