YUI recommends YUI3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

This documentation is no longer maintained.

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.

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

StyleSheet Utility Examples:

More StyleSheet Utility Resources:

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings