CODEWITHSUNDEEP
jquerycssjquery-ui
Brian Mains
Brian Mains

Reputation: 50728

JQuery UI Styles For Main Web SIte

I am planning on incorporating JQuery UI into my application; has anyone had success in reusing the JQuery UI stylesheet for their own custom styles? What I mean is, JQuery UI looks good with rounded corners and gradients, etc. What I would like to do say use the gradient header of an accordion to the header for some of my panels that I don't use JQuery for (because it's static HTML). Essentially, I don't want to have to create my own custom stylesheet.

Has anybody tried to reuse existing styles for their site and do you have any guidance?

Thanks.

Upvotes: 2

Views: 2153

Answers (2)

RonnyKnoxville
RonnyKnoxville

Reputation: 6394

I would just set the class to match that of the jquery panel or header that I am using, then on my own style sheet, or in the jQuery style sheet, just add extra classes to override the bits that I need.

So if jQuery CSS was:

.content-header{
    background: url("/../..");
    width: 100px;
    overflow:hidden;
}

I would just insert underneath (adding !important so that this style definitely overrides the previous one):

.my-content-header{
    width: 200px !important
}

Then have the html as:

<div id="header" class="content-header my-content-header">

Upvotes: 0

Tasnim Reza
Tasnim Reza

Reputation: 6060

It is quite easy. suppose you have a jqueryui css file named jquery.ui.theme.css and you would like to use header background image

<div style="height: 100px;" class="content-head ui-widget-header">
    <h1>This is a header</h1>
</div>

For more details about jqueryui css class http://jqueryui.com/docs/Theming/API

Upvotes: 3

Related Questions