Downloads » Resources » CssSwitcher » CssSwitcher | 0.4.1

CssSwitcher 0.4.1

  • Currently 4.5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
2 vote(s).

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

Works with MODx Version(s): All
Submitted: Jul 26th 2006 | License: None Specified | Downloads: 2120
download
Tags:
css, display, personalization, snippet, style

Description

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

Features:

  • Display a dropdown list with css you want
  • 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 .txt file in the textarea

    • Configuration:
  • $csspath : path from the site root to the css directory
  • $cssprintpath : path from the site root to the css directory for printing
  • $cssdef : name of the default css file, without ".css"
  • [i][b]$cssign : list of files which will be ignored for dropdown list ; separated by ','
  • $hlist : create a html list instead of a dropdown menu [0]
  • $cssprintprefixe : prefixe of stylesheets for "print" ; automatically ignore into the list of stylesheet


    • Parameters: [default]
  • &defaultcss : name of the default css file, without ".css" ; overwrite $cssdef
  • &display : 0 to create the link to the sheet, 1 to display the dropdown menu [0]
  • &chunk : name of the chunk wich contains the dropdown menu
  • &parsefolder : parse folder to create automatically list of css [0]
  • &ccsreverse : sort css file reversed alphabetically instead of alpha [0]
  • &ccsignored : list of files which will be ignored for dropdown list ; separated by ','
  • &cssname : to display ccs filename, possibility to use 'ucfirst', 'ucwords', 'strtoupper', 'strtolower' [none]
  • &htmllist : create a html list instead of a dropdown menu [0] ; run only if &parsefolder=1
  • &csw_cul : class name of the html ul tag [csw_cul]
  • &csw_cli : class name of the html li tag [csw_cli]
  • &csw_ca : class name of the html a tag (link) [csw_ca]
  • &csw_cac : class name of the html a tag for the selected style [csw_cac]
  • &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]
  • &cssprintpre : prefixe of stylesheets for "print" ; automatically ignore into the list of stylesheet ; it has priority on $cssprint ; overwrite $cssprintprefixe


    • Tags in chunk for dropdown menu:
  • [-selectoptions-] : replaced by html tag "<option value="...">...</option>"
  • [-name of a sheet-] : replaced by selected="selected"


    • Tags in chunk for html list:
  • [-selectoptions-] : replaced by "<ul><li><a ...>Name of style sheet</a></li>...</ul>"


    • Examples:
    [!CssSwitcher? &defaultcss=`site` &display=`0`!]
  • use site.css as default style sheet
  • create a link to the sheet : <link rel="stylesheet" type="text/css" media="screen" href="/path/to/sheet/site.css" />

    • [!CssSwitcher? &defaultcss=`site` &display=`1` &chunk=`CssSwitcher`!]
  • use site.css as default style sheet
  • display the list of the style sheets
  • use CssSwitcher as template

    • [!CssSwitcher? &parsefolder=`1` &cssreverse=`1` &cssignored=`print`!]
  • create dropdown list automatically
  • sort css file reversed alphabetically
  • ignore print.css file

    • [!CssSwitcher? &parsefolder=`1` &htmllist=`1`!]
  • create a html list with links

    • [!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


    • ( back to top )