CODEWITHSUNDEEP
jquerycssjquery-uithemes
Dave M.
Dave M.

Reputation: 1537

Applying alternate CSS to jQueryUI Dialog?

Is there a straightforward way to apply a whole set of CSS to a portion of a DOM tree? For example, I have a document that uses jQuery and jQueryUI to display dialogs. The dialog content is loaded via AJAX, so it comes in as a new / separate tree of HTML elements, which I insert into the <div> of the dialog.

What I'd like to do, essentially, is apply a different jQueryUI theme to the dialog content. So, for example, the dialog title bar and buttons would be styled according to one theme, but the dialog content (buttons, input fields, scroll bars, text, etc.) would be styled according to a different theme.

I guess I could apply a prefix to all the classes in the dialog content, and the same prefix to the alternate CSS selectors. Is there an easier way to accomplish this?

Upvotes: 0

Views: 596

Answers (1)

Ohgodwhy
Ohgodwhy

Reputation: 50787

http://jqueryui.com/download

On the right hand side, there is a list menu, within that menu is an option

Advanced Theme Settings

Drill into this, you'll get a drop down with two inputs. The first one allows you to append a 'css scope' which is actually what you want. Name it as you please.

Also

If you click on the question mark to the right of the input field, it will more or less describe exactly what you're saying.

This field allows you to specify a CSS scope to limit your theme to a particular portion of a page. This is helpful when using multiple themes on a page. If you don't provide a CSS scope, your theme will apply to all UI elements on a page.

Going on...

In most situations, you won't need to specify a CSS scope. Please Note: If you provide a CSS scope, you will not get an example page included in your download.

Upvotes: 1

Related Questions