How can I use themeroller'ed styles in "regular" parts of a page?

Question

I have a web app that I've recently applied a jQuery ThemeRoller theme to. Now I want to have a simple <h2> element have the same rounded-rectangular look as the dialog titlebar or datepicker title. How can I best apply these to my elements that aren't part of larger jQuery UI constructs?

I started down the path of just setting css class values manually based on what I could see inside Chrome's inspector tool, and I got part of the way there before I got nervous that this wasn't going to necessarily be the best way since I'm bypassing any css class assignment logic that might occur inside jQuery UI.

So, is there an easier way of applying those styles, or should I just go down the road of explicitly setting css styles on my headers?

Answer 1

There isn't any magic to the jQuery ThemeRoller CSS styles, if you look through the CSS files that is generates, you will find that they are generally clear and concise and easy enough to read.

The rounded corners in the ThemeRoller CSS will not work in IE, so you might not want to depend on them too much, but if you do, just apply the CSS using style='blah'.

Answer 2

stevedbrown's answer is quite correct.

You can apply rounded corners to any containing element by using the ui-corner- prefix. For example, to apply rounded corners to all four corners of a div element, you'd use ui-corner-all.

To only style the top corners of that same element, you'd apply ui-corner-tr ui-corner-tl for the TopLeft and TopRight corners.

Answer 3

Another possibility to the above is, if you know the CSS attributes you want to copy, you can do it programmatically like:

var defaultColor = $(".ui-state-default").css("color");
var defaultMargin = $(".ui-state-default").css("margin");

and apply these to your elements

$(".your-css-class").css("color",color);
$(".another-css-class").css("margin",margin);

etc

Kind of clunky, but it does allow your CSS developers to update the themerolled themes and you don't have to worry about updating any of your code anymore.