A while ago, I wrote a post on how to create a JavaScript Style Switcher, but recently I found the need to create a PHP based one. There are many ways to do this in PHP using sessions, arrays, cookies, etc. I created one that only takes a few lines of code and is super easy to implement.
This PHP Style Switcher can be done in two easy steps.
Step One: Setting styles
The first step is to create a new file on your server named switcher.php and paste the following code into it:
<?php
/* expire in 1 year */
setcookie("sitestyle", $_GET['set'], time()+31536000);
header("Location: $HTTP_REFERER");
?>When it’s queried, this file will write a cookie for the user detailing which site style to use. The cookie is set to expire in one year, and then the script sends the user back to the referring page. All of this happens behind the scenes, so the user will never really “see” switcher.php in action.
Telling switcher.php which site style to use is an equally simple matter. You can query it using conventional HREF links in text, images, or even flash
<a href="switcher.php?set=red">change to RED style!</a>
Step Two: Detecting styles
<link rel="stylesheet" type="text/css" media="screen"
title="User Defined Style"' href="<?php echo
(!$_COOKIE["sitestyle"])
?'default':$_COOKIE["sitestyle"]
?>.css" />
This tiny script detects which style is in the user’s cookies and prints out the result. If the user doesn’t have cookies enabled, or just hasn’t chosen a site style for themselves yet, the script will default to “default.css”.
So there you have it. A cross-browser, backwards-compatible, forwards-compatible, standards-compliant style sheet switcher in just five lines of code. It’s fast, straightforward, and universally accessible because there’s no processing done on the client side.
Here is the code (.zip) as well for you to review.
Last month, Sitepoint.com was giving away its great CSS book: The Art & Science of CSS in PDF format. It covers topics such as headings, images, backgrounds, navigation, forms, rounded corners, and tables.
Here is a copy (.pdf) if you didn’t get yours.
A great reference book (.pdf) on everything you would ever need to know about CSS.
Note: For short reference checkout out the Core CSS RefCardz:
Part 1 and Part 2 (.pdf) by Molly Holzschalg.
All modern browsers support the most common media attributes, which are supplied within the link element to target specific style sheets in a specific situation. For example, to ensure only visitors viewing the web site on a monitor, you add media = “screen” to the link element to call your default style sheet. Underneath that a second link element can be used with media = “print” added to call a print style sheet with only basic styling, such as black text on a plain white background, and all graphics removed.
read more…
I admit it. I use tables when I need to layout a form. It is just so quick and easy to do. Though as we all know (or should know), tables were only intended to be used for layout of tabular data. So with all the buzz about semantic markup and accessiblity, I thought I’d look into learning how to layout a simple form the right way. After a few hours of head scratching, I finally came up with a form that uses CSS that looks practically the same as one using tables.
read more…
The visibilty of an element is a powerful tool that can be used in JavaScript to create everything from animations and effects to fast templating. More importantly, however, it can also be used to quickly hide an element from view, providing users with some basic user interaction capabilities.
Within CSS there are two different ways of effectively hiding an element from view; both have their benefits but can provide unintented consquences, depending on how you use them:
read more…
Every element in a document is an object. Every one of these objects has a whole collection of properties as we have discussed in previous meetings. There’s one property called style which every element node has. It contains information about the styles attached to the element. Querying this property doesn’t return a simple string, it returns an object. Style information is stored as properties of this style object:
element.style.property
read more…
Have you ever seen a web site that has clickable blocks of text?
Ever wondered how they were done?
Well, I found out how from Christian Watson.
Here is a simple example and the code (.zip).
I know the basics of CSS (Cascading Style Sheets), but beyond that I sometimes need to bumble and fumble around looking for answers in books or online. One aspect of CSS that gives me some occasional problems (and I’m sure others as well) are floats.
When you float an element, it becomes a block-level element that can then be shifted to the left or right on the current line. A floated box is laid out according to the normal flow of elements, but it’s then taken out of the flow and shifted to the left or right as far as the containing element will allow. Floats are a must for placing images in context, creating columns and other neat design ideas.
read more…
One way to enhance a table style is to introduce a hover effect on the table rows: when the user is moving across the table with their mouse, the current row they are on will change color. This is something that you frequently see in interface design in internal web applications which help users view a particlar row of data.
read more…
