Question

i’ve made a little button widget which is styled with some gfx.
my css class for that button is like:

div.tButton
{
    height:20px;
    cursor:pointer;
    background-repeat:no-repeat;
    background-image:url(/button/button.png);
}
...

that .css also has classes for hover, click and disabled button-state.

what i wanna do is create different button themes (color,size ..) which use one universal .css file and just additions for height and background-image – so i don’t have to create a whole css file for each theme.

how could this be done?

eg. for the html markup i’ve tried something like

<div class=tButton btn40>mybutton</div>

where btn40 whould be a .css class with different height + background-image, but doesn’t work.

any idea if this is possible?

thanks

Answer 1

Basically the !important at the end of the style attribute will force this class’s style attribute to override all others. This will allow you to define the following as the default:

<div class="tButton">mybutton</div> 

and will allow you to define customizations like this

<div class="tButton btn40">mybutton</div>
<div class="tButton btn30">mybutton</div>

Here is how you would set up the style.

div.tButton
{
    height:20px;
    cursor:pointer;
    background-repeat:no-repeat;
    background-image:url(/button/button.png);
}

.btn40
{
   height:30px !important;
   background-image:url('/button/btn40.png') !important
}


.btn30
{
   height:50px !important;
   background-image:url('/button/btn30.png') !important;
}