views:

3561

answers:

2

i know that you can use themeroller to customize your UI theme but is it possible to do it by hand. if yes then is there any specific css that you have to follow. thank you

A: 

ya there are in the 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 is .ui-tabs .ui-tabs-hide { display: none; } from http://jqueryui.com/demos/tabs/

dassouki
+1  A: 

Sure it's possible (since ultimately a theme is just CSS, images and possibly Javascript) but it's not very practical. You could take an existing theme and modify it. Thing is there are lot of image files and the like you'd need to change. Also, a lot of those files have a name corresponding to the colour or other relevant variable.

That's actually extremely smart because it means you can put a far future Expires header on the CSS and images and if you change theme it'll still update correctly.

So you could leave the filenames the same but then you'd have a problem if you used a far futures Expires header (which you should) plus it'd be confusing to someone else who came along and saw it. Or you'd have to update all those files and all the references.

Themeroller is just way way easier.

cletus