jquery ui tabs major style change

Question

I am using jquery UI tabs and I need to majorly change the styling on it. I need to rempve the background image, the borders, almost everything. I need it to look minimal, and not like it's self contained.

What's the best way to do this? I need to use the default UI styling for the calendar widget however, which is on the same page. I've done a lot of research and everyone seems to point to the theme-roller. However, i do not just want to change the colors and border radii. I need to delete crap. theme-roller seems to be just change things like colors (not really useful for the real world). How do I adapt the css for the tabs without changing the styles of the other UI widgets on the same page (I want the calendar to stay as it is)?

Is it even worth using jquery UI for my tabs?

Answer 1

It should be fairly straightforward with CSS. Your elements have IDs and classes on them and you can touch them with CSS. Themeroller is just a quick go-to thing.

If I recall, you could also adjust the tabs js and adjust the lines that add images (if this is the same plugin) or just remove that line altogether to your liking.

Answer 2

I chose to write my own simple tabs functionality when, I realized that I didn't need most of its built-in features, such as loading AJAX content and dynamic adding/removing of tabs. If I needed those features, it would be easy to implement them myself. What pushed me to ditch jQuery UI Tabs is that I had to structure my DOM elements differently. I also needed to style my tabs to look minimal, and I thought that building from scratch would be less effort than trying to strip away a lot.

The feature I miss the most is how jQuery UI Tabs automatically selects the tab indicated by the # in the URL (I know I can just copy it -- just haven't gotten to it yet).

---

UPDATE: But, yeah, if you're sticking with it, you can override the CSS using any IDs you have:

#my-tabs .ui-state-default {
    background-image: none; /* remove default bg image */
}

and so on..

Answer 3

Try the following in your css assuming your class is .mytabs for the overriding css. It should get you started on

.mytabs li {
        background :  white !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important; 

    }
    .mytabs li.ui-state-active {
        background :  white !important;
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important; 
        margin: 0;


    }

.mytabs li a 
    {
        color:          Black !important;
        font-size:      1.4em !important;
        font-weight:    bolder;
        padding:        4px 1.5ex 3px !important;
    }

Answer 4

It's easy with some CSS you can easily override the standard CSS delivered with jQuery UI. You may not need !important if your modified CSS appears after the jQuery UI CSS.

You can also remove/add classes to each element with jQuery on load, but that seems a bit unnecessary.

Answer 5

I wonder if the !important attributes should be in the default jquery ui templates in the first place. For example, if you change the tabs to be on the left or right side instead of top, the 'border-bottom' shouldn't have a !important, since this is commonly overwritten.