jQuery UI tab styling – can’t override default styling for a specific ID

[s2alexan]

I’m pretty new to web design (less than a month) but the articles on CSS-Tricks have helped me a lot and although my understanding is still a bit flawed, I’m doing something that I think should work, but it doesn’t. It could be my poor understanding of CSS, or it could be some jQuery UI strangeness.

I’m trying to style my jQuery UI tabs to look like this:
https://css-tricks.com/examples/TabsNextPrev/

Instead of the default:
http://jqueryui.com/demos/tabs/

Basically, I want the “header” gone, and I want the top of the “main container” to NOT extend above the tabs.

Looking through the jQuery UI CSS, and the CSS on the CSS-Tricks demo, I’ve found what I want to do: REMOVE background and border from .ui-widget-content and .ui-widget-header, the ADD background and border (and also corner radius and some other styling I stole off the CSS-Tricks example) to “.ui-tabs .ui-tabs-panel”, which is normally not visible.

All my jQuery UI tabs are in a div like this:

So I added the following CSS:

#tabs .ui-widget-content { border: none; background: none; }

#tabs .ui-widget-header { border: none; background: none; }



#tabs .ui-tabs .ui-tabs-panel {

background: #FFF5AA; /* <

background of tab content area */

border: 1px solid #38402D; /* <

border of tab content area */

position: relative;

min-height: 200px;

height: auto !important;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px;

padding-top: 20px;

}

But it didn’t work! It didn’t take any of those styles at all. As a sanity check, I removed the #tabs part and added the following to a stylesheet that was added AFTER my auto-generated jquery-ui-1.8.7.custom.css file, and it overwrites the styles and looks great:

.ui-widget-content { border: none; background: none; }

.ui-widget-header { border: none; background: none; }



.ui-tabs .ui-tabs-panel {

background: #FFF5AA; /* <

background of tab content area */

border: 1px solid #38402D; /* <

border of tab content area */

position: relative;

min-height: 200px;

height: auto !important;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px;

padding-top: 20px;

}

But then it breaks the rest of the jQuery UI, because every component uses .ui-widget-content and .ui-widget-header, and they don’t look good when I remove them. I only want them removed for my tabs.

My (likely flawed) understanding of CSS is that since my 3 rules with the #tabs id are MORE SPECIFIC, they should overwrite the (more general) rules in the jquery-ui-1.8.7.custom.css file. Or is jQuery UI javascript doing something strange and the tabs aren’t REALLY put inside the

, and that’s why my #tabs selector isn’t doing anything?

[gno]

Change this

.ui-widget-content { border: none; background: none; }

.ui-widget-header { border: none; background: none; }

Into this:

.ui-tab .ui-widget-content { border: none; background: none; }

.ui-tab .ui-widget-header { border: none; background: none; }

Then the styling is only done to elements with the class .ui-widget-header and .ui-widget-content within elements with the class .ui-tab :-)

[gno]

By the way, if both the content and header parts should have the same styling you could do it like this:

.ui-tab .ui-widget-content, .ui-tab .ui-widget-header { border: none; background: none; }

[Author]

Posts