How to customize jquery theme UI tabs (not using themeroller)

I know you can use themeroller to customize your UI theme, but is it possible to do it manually. if yes, then there is some specific css you should follow. thanks

+1


a source to share


3 answers


ya is in jquery-ui css file

: http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/ui-lightness/jquery-ui.css



>     /* Tabs ----------------------------------*/
>     .ui-tabs { padding: .2em; zoom: 1; }
>     .ui-tabs .ui-tabs-nav { list-style: none; position: relative;
> padding: .2em .2em 0; }
>     .ui-tabs .ui-tabs-nav li { position: relative; float: left;
> border-bottom-width: 0 !important;
> margin: 0 .2em -1px 0; padding: 0; }
>     .ui-tabs .ui-tabs-nav li a { float: left; text-decoration: none;
> padding: .5em 1em; }
>     .ui-tabs .ui-tabs-nav li.ui-tabs-selected { padding-bottom:
> 1px; border-bottom-width: 0; }
>     .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs
> .ui-tabs-nav li.ui-state-disabled a,
> .ui-tabs .ui-tabs-nav
> li.ui-state-processing a { cursor:
> text; }
>     .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible
> .ui-tabs-nav li.ui-tabs-selected a {
> cursor: pointer; } /* first selector
> in group seems obsolete, but required
> to overcome bug in Opera applying
> cursor: text overall if defined
> elsewhere... */
>     .ui-tabs .ui-tabs-panel { padding: 1em 1.4em; display: block;
> border-width: 0; background: none; }
>     .ui-tabs .ui-tabs-hide { display: none !important; }

      

however the required value is .ui-tabs.ui-tabs-hide {display: none; } from http://jqueryui.com/demos/tabs/

+2


a source


I was looking for the same answer when I came across the Kieth Wood site: http://keith-wood.name/uiTabs.html#tabs-min



You will find that he documented several options, but the Minimalist tabs were a good place to start.

+4


a source


I'm sure this is possible (since the theme is ultimately just CSS, images, and possibly Javascript), but it's not very practical. You can use an existing theme and modify it. The point is that there are many image files and the like that you will need to modify. In addition, many of these files are named according to a color or other appropriate variable.

This is actually very clever, because it means you can put the Expires of the future in your CSS and images, and if you change the theme, it will update correctly.

This way you can leave the filenames the same, but then you have a problem if you use the long Expires futures header (which is what you need), plus it will be confused with someone else who came in and saw it. Or you will need to update all these files and all links.

Themeroller is just simpler.

+2


a source







All Articles