Using jQuery UI css styles for my own HTML elements

Question

Using jQuery UI gives me these nice stylesheets. These apply to the widgets, ... of jQuery UI. But how could I apply these styles to my own HTML elements to have the same look and feel?

When I change the jQuery UI theme I want my pages to change accordingly. I am aware there are similar questions such as " jQuery UI Themeroller Question ". There it is said I can only open the CSS and manually apply a CSS class to my elements.

Is there no better / official way to do it? Especially with the Theme Switcher I could easily have a customizable UI.

-- Add on to original question --

OK, all of you explain me, that I have to manually apply the css class to my element. I appreciate the information and you certainly have more CSS experience than I do. However, when I later want to change the style, I have to change this (jQuery UI) class in many places - e.g. all td elements. So in my CSS files I prefer to apply styles via selectors.

Q: Can I re-apply a class (of the jQuery UI css) with a selector, something like "apply class XYZ to all of my table headers in div "ABC"?

I could do this via jQuery selection, but can I do it within "my css"?

why not simply adding the jquery-UI css classes to your element? maybe i don't understand your question — Fender
– Fender, Commented Aug 4, 2011 at 14:14
You do understand my question. Yes I could go thru the CSS, find the best CSS class and manually add it to my elements. But this would mean to add this class e.g. to all td elements, wouldn't it? Does not look so nice and also makes it difficult to change, or am I wrong? — Horst Walter
– Horst Walter, Commented Aug 4, 2011 at 14:17
just have to change the css class and not the elements by applying other css classes... just change your stylesheet and everything will be styled new — Fender
– Fender, Commented Aug 4, 2011 at 14:33
@Fender: I should not change the jQuery UI css, so when I write "td class="SomeJQueryClass", how would I do this? — Horst Walter
– Horst Walter, Commented Aug 4, 2011 at 14:47

Lance · Accepted Answer · 2011-08-04 14:16:42Z

6

To answer your question, that is the official way of theming your own elements not constructed by a jQuery UI widget. You must apply the specific classes to your elements, and they will end up looking like other widgets from jQuery UI.

answered Aug 4, 2011 at 14:16

Lance

1,89714 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Horst Walter Over a year ago

Thanks for your help, bottom line is - as you said - there seems to be no other way.

normanthesquid · Accepted Answer · 2011-08-04 14:34:34Z

4

In firefox/chrome

Right click the element whose style you want to copy, and select inpsect element. Note which classes it belongs to.

Add those classes to your elements

to answer your td question above:

you could create a td class in your css, and copy the styles from the jquery ui csss file to it:

td{
 //Styles go here
}

also, you asked "apply class XYZ to all of my table headers in div "ABC"?" add this to your css file

if the divs ID is ABC

div#ABC th{
   //Styles Go Here
}

if the divs class is ABC

div.ABC th{
   //Styles Go Here
}

edited Aug 4, 2011 at 14:34

answered Aug 4, 2011 at 14:16

normanthesquid

7001 gold badge6 silver badges21 bronze badges

3 Comments

Horst Walter Over a year ago

Thanks, basically you have said it above, "you could copy the styles from the jQuery" (td example). And what I wanted is not to copy but to refer, something like: td{jQueryStyleX}. So a) when I change the theme I do not need to copy again, b) with fixes of jQuery UI I automatically get the updates and c) when I want to change to jQueryStyleX it is in a single place. Or can I write "td someClass" in the css, never have seen this.

normanthesquid Over a year ago

What you are asking about is css class inheritance, which doesn't exist. You'll have to do that through jquery

Horst Walter Over a year ago

I'd say I rather want to use an existing class and apply it by a selector. IMHO I would not call this inheritance, which for me in CSS context is more that an inner tags inherit the style of the outer (e.g. the "tr" the font of the "table" if not overriden). Anyway, thanks a lot for your helpful comments and feeback.

Collectives™ on Stack Overflow

Using jQuery UI css styles for my own HTML elements

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related