jquery themeroller how do I use for elements that aren't touched by a plugin?

I want to use themeroller for my project.  I can see that you can easily apply an accordion, button, modal, etc plugin to a dom element and it will apply the themeroller classes which is great.

What if I want a div to have a background and border that matches a modal popup?  For instance, I have a custom dropdown that appears under a button.  If I use themeroller for the buttons and everything else, I would want my new div to match everything else.  If I manually add style to my div, then change the theme, my new style would not be updated.  How can I add these themes with other dom objects that I don't apply a plugin to?
Who is Participating?
ProculopsisConnect With a Mentor Commented:
A jQuery dialog generates the following html so you can pick any of the style classes and use them in your own content which will change according to the selected theme:

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<DIV style="Z-INDEX: 1001; POSITION: absolute; OUTLINE-STYLE: none; OUTLINE-COLOR: invert; OUTLINE-WIDTH: 0px; WIDTH: 300px; DISPLAY: block; HEIGHT: auto; TOP: 147px; LEFT: 62px" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable" role=dialog tabIndex=-1 aria-labelledby=ui-dialog-title-dialog sizset="0" sizcache008750245918520949="0">
<DIV class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" sizset="0" sizcache008750245918520949="0"><SPAN id=ui-dialog-title-dialog class=ui-dialog-title>Dialog Title</SPAN><A class="ui-dialog-titlebar-close ui-corner-all" role=button href="#"><SPAN class="ui-icon ui-icon-closethick">close</SPAN></A></DIV>
<DIV style="MIN-HEIGHT: 94px; WIDTH: auto; HEIGHT: auto" id=dialog class="ui-dialog-content ui-widget-content" scrolltop="0" scrollleft="0">Dialog Content</DIV>
<DIV class="ui-resizable-handle ui-resizable-n"></DIV>
<DIV class="ui-resizable-handle ui-resizable-e"></DIV>
<DIV class="ui-resizable-handle ui-resizable-s"></DIV>
<DIV class="ui-resizable-handle ui-resizable-w"></DIV>
<DIV style="Z-INDEX: 1001" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-se"></DIV>
<DIV style="Z-INDEX: 1002" class="ui-resizable-handle ui-resizable-sw"></DIV>
<DIV style="Z-INDEX: 1003" class="ui-resizable-handle ui-resizable-ne"></DIV>
<DIV style="Z-INDEX: 1004" class="ui-resizable-handle ui-resizable-nw"></DIV></DIV>

Open in new window

jackjohnson44Author Commented:
Instead of defining them like this, isn't there more of a generic way?  Something like $('#maindiv').themerollerStandard();

I'd rather not have to set everything, or make a widget for all divs.  I would think that most web pages have large areas that you don't need to decorate with some sort of dialogue, button, accordion.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.