Forums

Hi Patrick,

You can start here:
http://developer.yahoo.com/yui/articles/skinning/

Most of the widgets have their own skinning articles as well that break down the specific selectors you will need to extend or override to customize. Go to the widget landing page (e.g. http://developer.yahoo.com/yui/datatable/) and look for the skinning example (e.g. http://developer.yahoo.com/yui/examples ... nning.html).

-Matt

It really depends on your experience with CSS. It should be pretty straightforward.

Using the style view in Firebug can help to speed up the process by showing you exactly which styles are applied to which elements.

Hello Matt

I've read through those docs and I think I'm starting to understand. For simple presentational changes the UI is modified with standard CSS styles. Using color, font, and background graphic/colors. I've done hundreds of custom XHTML/CSS apps from the ground up so this will be typical.



Beyond that level of applying presentation changes would it be considered an extension of the component? For instance if I wanted to add more DOM elements or change how the HTML/DOM is represented in the component.

The level of markup customization depends on the widget. Most should have enough containers and hooks to support your design, and should also support adding extra elements. Replacing elements is possible, but will require extra CSS/JS customization, again, depending on the component.

Hello patrick,

I normally style the widgets as I go. I try the keep the style sheet separated into sections for different widgets. But sometimes there's overlap like styling a Tool Bar -- Button on a Rich Text Editor where I keep the button style in the RTE section.

I just added an auto complete for the first time and adding in the new styles was a snap. I basically just copied the colors from the other widgets, and plugged them in. (thanks to the sam skin)