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

You should check out Keith Wood's detailed blog post on styling JQuery UI Tabs.

The answer to your specific question

I need to rempve the background image, the borders, almost everything. I need it to look minimal

is in this section "Remove most of the formatting" of Keith Wood's post.

In addition to this, there are 10 more style changes, complete with the CSS required to achieve the desired effect.

JQuery UI Tabs Styling - Keith Wood Blog Post

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

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 6

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.

Answer 7

Almost everything is covered here, but I was looking around and found a way to toss things you really don't need quite easily with a single class, while then editing the remaining attributes.

*[class*="ui-"] {
     border-radius:0;
     background-image: none;
     .
     .
     .
}

This way you select every class that starts with "ui-" and remove whatever you want to remove from jQuery UI.

Answer 8

 #my-tabs * {
    background-image: transparent;
}