Works with MODx Version(s): 0.9.6
Submitted: Mar 25th 2008 | License: None Specified | Downloads: 480

Description

A small snippet for users to switch between different style sheets, from the frontend.

Features:

Generate dropwdown list or html list from a folder if you want

Sort css file for the list

Ignore files from a list

Write the link to the stylesheet in the header for "screen"

Write the link to the stylesheet in the header for "print"

Possibility to specify one sheet for "print" or a group of sheets with a prefix (1)

Can use a different directory to store sheets for "print"

Style sheets for "print" are automatically ignore to generate the list of css

User preference is saved with a cookie

(1) If a sheet exists with the same name of the sheet selected for the screen, this sheet will used. Else, if the sheet defined by &cssprint exists, it will be used.
Otherwise, the sheet selected for the screen will be used.

Instructions

Installation:

Create a new snippet

Copy and past the content of the snippet.cssSwitcher.php file in the textarea

Configuration:

$csspath : path from the site root to the css directory

should be initialised first in the includes/snippet.cssSwitcher.inc.php file


Parameters: [default]

&language : snippet language [manager_language]

&defaultcss : name of the default css file, without ".css" [site]

&display : create a html list or a drop down menu (with or without button) [select | selectb | htmllist]

&print : 1 to create the link to the sheet for "print" [0]

&cssprint : name of the css file for "print", without ".css" ; automatically ignore into the list of stylesheet [current stylesheet for screen]

&cssprintpath : path from the site root to the css directory for printing [$csspath]

&cssprintprefixe : prefixe of stylesheets for "print" ; automatically ignore into the list of stylesheet

&tplcsslink : name of chunk for the css header link (screen & print)

General display parameters (select or htmllist):

&parsefolder : parse folder to create automatically list of css [0]

&ccsreverse : sort css file reversed alphabetically instead of alpha [0]

&ccsignored : Comma separated list of files which will be ignored for dropdown list

&cssname : to display ccs filename, possibility to use 'ucfirst', 'ucwords', 'strtoupper', 'strtolower' [none]

Select and selectb display parameters:

&tplselect : name of chunk for the select drop down menu

&formid : id of the html form [csFormId]

&spanclass : name of the html span [csSpanClass]

&selectclass : class name of the select tag [csSelectClass]

&inputid : id of the input tag [csInputId]

Htmllist display parameters:

&tplhtmllist : name of chunk for the html list

&ulclass : class name of ul tag [csUlClass]

&liclass : class name of li tag [csLiClass]

&aclass : class name of a tag [csAClass]

Examples:

[!CssSwitcher? &defaultcss=`relative`!]

use relative.css as default style sheet

create a link to the sheet : <link rel="stylesheet" type="text/css" media="screen" href="/path/to/sheet/relative.css" />

[!CssSwitcher? &parsefolder=`1` &display=`select` &defaultcss=`relative`!]

create a dropdown menu without button from the css folder

use relative.css as default style sheet

[!CssSwitcher? &defaultcss=`site` &parsefolder=`1` &display=`htmllist` &tplhtmllist=`myhtmllist`!]

create an html list from the css folder

use site.css as default style sheet

use myhtmllist as template

[!CssSwitcher? &parsefolder=`1` &display=`selectb` &cssreverse=`1` &cssignored=`print`!]

create a dropdown menu with a button from the css folder

sort css file reversed alphabetically

ignore print.css file

[!CssSwitcher? &print=`1` &cssprint=`print`!]

create a link to the sheet for "print" : <link rel="stylesheet" type="text/css" media="print" href="/path/to/sheet/print.css" />

use print.css

[!CssSwitcher? &print=`1` &cssprintpre=`print_`!]

create a link to the sheet for "print" : <link rel="stylesheet" type="text/css" media="print" href="/path/to/sheet/print_xxx.css" />

use print_xxxx.css

Updates

This version adds more flexible templating usages based on the chunckie class and a correction to the redeclare getchunck error of 0.4 version.

Better templating for the htmllist and the dropdown menus

Drop down menu without button added

All the styles of the forms are now customisable

This snippet is built under three re-usable classes :

- switcher class, to switch any string between two pages
- select class, to build a select drop down menu (with or without submit button)
- htmllist class, to build a html list (with or without background image)

demo: used on http://www.modx.wangba.fr/ajaxsearch.html/