CSS Switch v0.2 – CSS Style Switcher with PHP

I took a look around and decided that I am going to make a tiny free PHP Script – a CSS style switcher for designers. I am releasing this script for a free download, and later on I will make a few PHP Tutorials for beginners based on this sript I made. I am actually thinking of making some screencasts as well. Okay, but for now – lets stick to the script.

Functionality:

  • No PHP Knowledge required at all, No installing, just drop the file in your CSS Folder, and make sure the server supports PHP.
  • Ideal to showcase your work in multiple stylesheets but one HTML File.
  • Faster than JavaScript method and works with browsers who don’t have JS enabled
  • Automatically sets a default CSS File in this order:
    1. Look for style.css to set as default
    2. If not found, look for default.css
    3. If not found scan the directory for CSS files and use the first one found (ordered alphabetically)
  • Use Links to change styles. So <a href=”css/switch.php?style=another.css”>Another Style</a> is going to switch the style, set a cookie for 1 hour and then redirect back to last page. If last page visited can’t be found (HTTP_REFERER) PHP script will redirect back to index of the site.

Setup

  1. Download the script
  2. Insert switch.php to your CSS Folder (In best scenario, you have a seperate folder with CSS files, if not, it’s okay, the script filters CSS files when listing them)
  3. In the site <head> insert something like this:

Bugs & Bugfixes

v0.2 – Added a feature to reload back to site domain if HTTP_REFERER Not found
v0.2 – Fixed Stylesheet file format. Now works with all HTML Versions. (php header content type changed to text/css )

Future Features

  • GZipped output (faster load times)
  • Optimization if needed
  • Support for multiple CSS files at once (so multiple CSS files would be included with a single request, just in case someone needs that 🙂 )

I hope you enjoy the script!

4 thoughts on “CSS Switch v0.2 – CSS Style Switcher with PHP”

  1. Really nice, I’m using a jquery method but this is nice too, good features!

    Just to know, the test page it doesn’t work on Chrome 8.0.552.237, but yes in Firefox 3.6.13

    In IE8 it’s rare. If I click on a link (for example, “orange”), it’s doesn’t change at all… If I reaload the page (F5), the page shows the last clicked style (in this case “orange” because was the last clicked link).

    Hope my testing help you
    thanks for share your knowledge

    adeux!

    1. Thanks for the testing. I will try to fix the bugs soon for a new version 🙂 . It probably has something to do with the headers and file extension. Maybe I should add a mod_rewrite ?

Leave a Reply

Your email address will not be published. Required fields are marked *