YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: StyleSheet Utility: Using StyleSheet to create a page theme

# StyleSheet Utility: Using StyleSheet to create a page theme

In this example, we'll change some colors in this page's color theme. Enter any valid CSS color value into the inputs and submit the cahnges to see them applied to the page.

View example in new window.

Example values: #123456 or #123 or rgb(0,10,30) or red

Headings and labels

    h1,h2,h3,h4,h5,h6,
    #demo label {
        color: #e76300;
    }

Demo background

    .example .promo {
        background-color: #89d;
    }

Left nav highlight

    #toc ul li.active,
    #toc ul li a:hover {
        background-color: #f82;
    }

## Starting from scratch

For the sake of illustration, we'll leave the form in our demo unstyled, then apply a skin to it when we create our working `YAHOO.util.StyleSheet` instance.

<div id="demo"> <form id="demo_form" action="#" method="get"> <fieldset> <p>Example values: #123456 or #123 or rgb(0,10,30) or red</p> <label for="demo_headings">Headings and labels</label> <input type="text" size="7" id="demo_headings" value="#e76300"> <pre><code>h1,h2,h3,h4,h5,h6, #demo label { color: <em id="demo_heading_value">#e76300</em>; }</code></pre> <label for="demo_bg">Demo background</label> <input type="text" size="7" id="demo_bg" value="#89d"> <pre><code>.example .promo { background-color: <em id="demo_background_value">#89d</em>; }</code></pre> <label for="demo_highlight">Left nav highlight</label> <input type="text" size="7" id="demo_highlight" value="#f82"> <pre><code>#toc ul li.active, #toc ul li a:hover { background-color: <em id="demo_highlight_value">#f82</em>; }</code></pre> </fieldset> <p> <input type="submit" id="update" value="Update theme"> </p> </form> </div>

## Add some style to the form

We'll put our code in a `YAHOO.demo.PageTheme` namespace. In this namespace, we'll add an `init()` method that we'll schedule to execute when the DOM is ready. We'll seed the `init()` method by creating an instance of `YAHOO.util.StyleSheet` and passing the constructor all the CSS to skin the form.

(function () { // Some shortcuts var Dom = YAHOO.util.Dom, trim = YAHOO.lang.trim, Demo; Demo = YAHOO.namespace('demo').PageTheme = { theme : null, init : function () { // Create a new StyleSheet instance for us to override some current // page styles. For illustration, seed it with the CSS to style the // demo form Demo.theme = YAHOO.util.StyleSheet("\ #demo form,\ #demo fieldset {\ border: none; padding: 0; margin: 0;\ }\ #demo fieldset p {\ background: #fff;\ border: 1px solid #ccc;\ padding: 1em 1ex;\ }\ #demo pre code {\ background: #fff;\ border: 1px solid #ccc;\ color: #555;\ display: block;\ font-weight: normal;\ margin: 1ex 0 1em;\ padding: 1ex;\ }\ #demo label {\ font-weight: bold;\ color: #e76300;\ }\ #demo pre code em {\ color: #000;\ font-weight: bold;\ }\ "); } }; YAHOO.util.Event.onDOMReady(Demo.init); })();

This is enough to create a new StyleSheet instance, hosting a `<style>` element with our form's skin. Note that this is done for illustration only. In general, this approach should be avoided in production environments unless there's a compelling reason. Static CSS should be served as `.css` files linked from `<link>` elements.

## Set some rule styles from the form inputs

Now we'll add the important stuff. Listening for the form submission to change the style rules. We'll cache the inputs in the `init()` method and set up the submit listener to call a new method `update()`.

Demo = YAHOO.namespace('demo').PageTheme = { theme : null, headings : null, background : null, highlight : null, isValidColor : function (v) {...}, init : function () { Demo.theme = YAHOO.util.StyleSheet(...); // Store the input fields for value retrieval Demo.headings = Dom.get('demo_headings'); Demo.background = Dom.get('demo_bg'); Demo.highlight = Dom.get('demo_highlight'); // Set up the submit handler to update the page styles YAHOO.util.Event.on('demo_form','submit', function (e) { YAHOO.util.Event.stopEvent(e); Demo.update(); }); }, update : function () { var v = trim(Demo.headings.value); if (Demo.isValidColor(v)) { // multiple selectors are delimited by commas Demo.theme.set('h1,h2,h3,h4,h5,h6, #demo label', { color : v }); Dom.get('demo_heading_value').innerHTML = v; } v = trim(Demo.background.value); if (Demo.isValidColor(v)) { // use camelCase for style property names Demo.theme.set('.example .promo', { backgroundColor : v }); Dom.get('demo_background_value').innerHTML = v; } v = trim(Demo.highlight.value); if (Demo.isValidColor(v)) { Demo.theme.set( '#toc ul li.selected,'+ '#toc ul li a:hover', { backgroundColor : v }); Dom.get('demo_highlight_value').innerHTML = v; } } };

And that's it! If you have an interactive console such as FireBug, you can play around with the StyleSheet instance at `YAHOO.demo.PageTheme.theme`.

## Full code listing

The full code listing for this example is below, including the source for `isValidColor`. The full markup was included above.

(function () { // Some shortcuts var Dom = YAHOO.util.Dom, trim = YAHOO.lang.trim, Demo; Demo = YAHOO.namespace('demo').PageTheme = { theme : null, headings : null, background : null, highlight : null, isValidColor : function (v) { return /^#[0-9a-f]{3}(?:[0-9a-f]{3})?$/i.test(v) || /^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/.test(v) || /^[a-z]+$/i.test(v); }, init : function () { // Create a new StyleSheet instance for us to override some current // page styles. For illustration, seed it with the CSS to style the // demo form Demo.theme = YAHOO.util.StyleSheet("\ #demo form,\ #demo fieldset { border: none; padding: 0; margin: 0; }\ #demo fieldset p {\ background: #fff;\ border: 1px solid #ccc;\ padding: 1em 1ex;\ }\ #demo pre code {\ background: #fff;\ border: 1px solid #ccc;\ color: #555;\ display: block;\ font-weight: normal;\ margin: 1ex 0 1em;\ padding: 1ex;\ }\ #demo label {\ font-weight: bold;\ color: #e76300;\ }\ #demo pre code em {\ color: #000;\ font-weight: bold;\ }\ "); // Store the input fields for value retrieval Demo.headings = Dom.get('demo_headings'); Demo.background = Dom.get('demo_bg'); Demo.highlight = Dom.get('demo_highlight'); // Set up the submit handler to update the page styles YAHOO.util.Event.on('demo_form','submit', function (e) { YAHOO.util.Event.stopEvent(e); Demo.update(); }); }, update : function () { var v = trim(Demo.headings.value); if (Demo.isValidColor(v)) { // multiple selectors are delimited by commas Demo.theme.set('h1,h2,h3,h4,h5,h6, #demo label', { color : v }); Dom.get('demo_heading_value').innerHTML = v; } v = trim(Demo.background.value); if (Demo.isValidColor(v)) { // use camelCase for style property names Demo.theme.set('.example .promo', { backgroundColor : v }); Dom.get('demo_background_value').innerHTML = v; } v = trim(Demo.highlight.value); if (Demo.isValidColor(v)) { Demo.theme.set( '#toc ul li.selected,'+ '#toc ul li a:hover', { backgroundColor : v }); Dom.get('demo_highlight_value').innerHTML = v; } } }; // Initialize the interface when the DOM is ready YAHOO.util.Event.onDOMReady(Demo.init); })();

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### StyleSheet Utility Examples:

- Using StyleSheet to create a page theme
- Animating multiple elements with StyleSheet

### More StyleSheet Utility Resources:

- User's Guide (external)
- API Documentation

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings