CODEWITHSUNDEEP
cssjquery-uijquery-ui-theme
mmaceachran
mmaceachran

Reputation: 3348

How to override jQuery-ui.css styles

I've implemented the jQuery-ui tabs widget and it works great. However, it does some style things I don't like. Specifically the .ui-corner-all is rounded, and I don't want that.

What is the "correct" way to override this. Should I use a theme?

Does someone have a good beginner tutorial on how to use/create ui themes?

Upvotes: 8

Views: 13959

Answers (3)

Tom McGee
Tom McGee

Reputation: 76

Do you have a stylesheet that controls the parent element, or the entire page? I had some success with something like:

.[element, class, id, whatever] { border: inherit }

Upvotes: 0

Joseph Woodward
Joseph Woodward

Reputation: 9281

I would recommend against trying to override JQuery UI's styling manually, and instead opt to use JQuery UI's ThemeRoller page.

Modifying the theme using the ThemeRoller will ensure maximum compatibility for future upgrades, rather than overriding certain styles just to have them changed or conflict next time you try to upgrade to a newer version of JQuery UI.

Upvotes: 2

Anobik
Anobik

Reputation: 4899

try using important

.ui-corner-all{
border: 0px !important;
}

in custom style sheet or head of the doc.

Upvotes: 11

Related Questions