YUI Library Home

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 changes to see them applied to the page.

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

h1,h2,h3,h4,h5,h6,
#demo label {
    color: #e76300;
}
.example .promo {
    background-color: #89d;
}
#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.

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.

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().

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.

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: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

More StyleSheet Utility Resources:

Copyright © 2010 Yahoo! Inc. All rights reserved.

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