How to apply jQuery UI theme to my regular html?

Question

I use jQuery UI for the various widgets like dialogs, buttons, etc. I want to continue using the theme for my other webpage elements like error/alert notices and highlight styles. So I went to the themeroller page to view what they use for the css around, for example, an alert notice:

<div class="ui-widget">
    <div style="padding: 0 .7em;" class="ui-state-error ui-corner-all"> 
        <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span> 
        <strong>Alert:</strong> Sample ui-state-error style.</p>
    </div>
</div>

There's a wrapper div, span with background icon, etc. Do I just copy these or does the jQuery UI javascript create some for me? What's the proper way to apply themes to non-widget html?

Anecdotage

Answer 1

Simply apply that to your own HTML. No Javascript needed (except for hover state).

When you're using jQueryUI's widget, the Javascript creates all of that HTML with those classes.

If you need the hover state, you'll have to toggle the ui-state-hover class. For that you'll need Javascript:

$('.ui-state-error').hover(function(){
    $(this).toggleClass('ui-state-hover');
});

Protohistory

apply what to my own html? the wrapper div with class ui-widget and classes ui-state-error and ui-corner-all? – Anecdotage

@Anecdotage - Correct. Just copy that piece of HTML, and use it as is. – Protohistory

Answer 2

You can by default only use the themeroller pre-defined-elements on your site: buttons, icons, title bars etc. and all the jquery widgets like datepicker, dialogs, highlight/error - pretty much all the elemenst you see at http://jqueryui.com/themeroller/#themeGallery .

to archive this you have to copy the html and the appropriate classes for the html tags, and the browser will apply the styles from your included themeroller.css to it.

however, this also means that you are a bit limited with your layout. You can still include other, non-themeroller elements as long as you apply the right css classes (.ui-state-default, .ui-state-hover, .ui-state-disabled, icons etc.) to your html to be able to use the themeswitcher - see http://jqueryui.com/docs/Theming/API for the complete list of applicable classes.

Myrnamyrobalan