Geek Notes » CSS

Cascading Style Sheet Switcher

Maurizio Petrone — Tue, 23 May 2006 11:30:55 +0000

This code snippet will allow your users to choose between different styles to apply to your website.
Yes, it’s a PHP skin selector for websites!

~~You can view a live example of it in this weblog itself: it’s the switch style icon on the top right corner (Click it right now!).~~
Due to an heavy layout restyling, this function is no longer available on my blog. Sorry for the inconvenience

Here is a little presentation of the features that this little code provides:

Have a default style (in absence of previous choices)
Unlimited choices (depending on your fantasy and ability)
Style choose take effect immediately, and site-wide
Switcher link brings you back to the page you were seeing, but restyled
The preference is saved for each user, for successive visits

And now, let’s explain the technique.

Before diving directly into the code, I like to spend some words on the idea behind the switcher.

The main thing we do is printing links to different CSS files into our page HTML section, depending on what we read from a cookie.

Why CSS files?

There are several advantages with having your site presentation and style informations stored into a separate CSS file, instead of having them embedded directly into the markup.

Without listing all of them, I just say that you can vary the look & feel of a whole site by changing only a single line of code – that one that tells us the name and the path of CSS file.

What I need?

An (X)HTML output for your website (ok, you already got it); two or more CSS files applicable to that markup output; a server that can run PHP; and a client that can save cookies!

For multiple pages, it would be useful to have a template-driven output, so you don’t have to change every single page section, but only the template one.

Please note: the more standard, well-formed and separated from presentation your markup code is, the more effective and powerful this technique will be.
(XHTML Strict, without any embedded style information, is the best.)

How it works?

Ok, do you have at least two CSS files for your markup? Let’s switch ‘em!

First of all, change the line that display the link to your CSS with something like this:

.css” rel=”stylesheet” type=”text/css” />

Substantially, you have to change the CSS filename (without its extension) with the echo of $style variable on PHP.

To fill this variable with a valid value (that is an existing CSS file name in the specified path), put this code immediately before the previous line:

if(isset($_COOKIE['style'])){
$style=$_COOKIE['style'];
} else {
$style=’default’; //the name of default style file
}
?>

With these lines, we control if there’s a cookie named STYLE, then assign its value to $style, else we assign a default value to that variable.
I guess that you already know what comes next…

The last thing to do is to write a script that will write a custom value (that is CSS name) in our cookie, and then send the client back to the page it was on before calling that script.

Create an empty file called switch.php and fill it with the following:

header(”Location:”.$HTTP_SERVER_VARS["HTTP_REFERER"]);
?>

You can call it from any page with a link like this:

View page with Default style!
View page with Alternate style!

When you click the link, the page reloads: the cookie will be read and the new style link will be shown, and the page from where you clicked on the switcher link will be styled accordingly!

Bookmark:These icons link to social bookmarking sites where readers can share and discover new web pages.

Design & Layout remake for Geek notes

Maurizio Petrone — Mon, 22 May 2006 01:00:24 +0000

Welcome to my completely re-fashioned weblog!
I’ve worked a lot on it, and this second-version design is supposed to:

make the page look cleaner and text more readable,
put a strong focus on contents,
reduce the number of used colours and put things in order.

Okay, but what about the first-version design? I’d liked it…

Don’t worry: just click on the style-switch image in the top-right corner: the page will reload, and from that moment on you’ll have the whole site styled as you want, every time you come back!

And now, it’s poll time: do you like this work or not? I’d like to know your opinion: you can just vote the poll, or leave a comment to send detailed feedback.

Some notes on this work:

New design is all made out by Cascading Style Sheets (which are valid, of course): when you click on the switcher, the XHTML source code of the page remains the same; the only thing that vary are the links to CSS files.

That’s the truly power of CSS: by separating structure and presentation, you can vary the presentation with just a line of code in the markup, and the new stylesheet will be applied site-wide.

Last, but not least, the new LIGHT cascading style sheet was tested (as well as the GEEK one) on: Firefox, Internet Explorer (both 6 and 7-beta), and Opera 8.
Safari users, do you see errors?

P.s. Do you want to know how the style switcher works?
Let’s check out the explanation of this PHP Cascading Style Sheet Switcher!

Bookmark:These icons link to social bookmarking sites where readers can share and discover new web pages.

IE ‘three pixel bug’ hacked with float

Maurizio Petrone — Wed, 03 May 2006 16:00:41 +0000

Internet Explorer has a rendering bug called “Three pixel gap”.
Substantially, any box, also ones nested into another, that is next to a floated box gets a shrink of three pixel in the same direction of the float.

I’ve prepared an example to show this. The example document has a valid code for style and markup, then it works well with standard-compliant browser like Firefox. But try to open this page with Internet Explorer to see the bug in action.

This bug is known, and there’s already an hack for it. Here is a detailed description of both the bug and the hack.
The known hack consists into assign height:1% to the buggy box.
But this hack did not seem working to me, as you can see from the example source code: height:1% has no effect (I suppose it’s due to the fact that buggy boxes are contained into another, non-floated one – which the blue-bordered one in the example above).

So, I’ve prepared a different hack.

The trick is to declare floated the box containing the buggy boxes, and to fix its margin using !important flag.
Here you can see an example of the same page, hacked for Internet Explorer.
Please note: this hack works only with Internet Explorer (tested on v. 5.01 and above). It messes up things other browsers.

The code is really simple. Focusing on example shown above, div#container is the box with blue border. It’s not buggy itself, but it nests the buggy boxes. Here is its CSS code:

#container { float:left; margin-left:18px!important; margin-right:28px!important }

Of course, if you want to have a document that fits both IE and other browsers, you must have this code interpreted by I.E. only.

Via CSS, you can use “the star”. A CSS paragraph that follows * html runs only on IE.
Better, you can use conditional comments to put a link to your hacked stylesheet (as I do).

Bookmark:These icons link to social bookmarking sites where readers can share and discover new web pages.

Geek Notes » CSS

Cascading Style Sheet Switcher

Why CSS files?

What I need?

How it works?

Design & Layout remake for Geek notes

Which layout do you prefer?

Some notes on this work:

IE ‘three pixel bug’ hacked with float

So, I’ve prepared a different hack.