Question

I am coding a quiz module, which contains a radio button set, using jQuery UI. How do I change the color or the image of the button?

Answer 1

Ideally, you will want to use Themeroller if you can get away with it. However, if you want something completely custom, for example with custom imaged backgrounds and custom icons, while still retaining the functionality of the jQuery UI button, you still can. It will just take more work in overriding the default jQuery UI CSS styles and creating some new ones.

For example:

The button on the right is a jQuery UI button styled with Themeroller, while the button on the left is still a jQuery UI button but with a custom icon and background. Here is what you need to do to accomplish a custom button:

Start with backgrounds and your icon images:

Here is the css you will need to create:

.house{
    background-image: url("./yourIconImage.png") !important;
    width: 45px !important;
    height: 45px !important;
    margin-left: -22px !important;
    margin-top: -22px !important;
}

#houseLabel.ui-state-active
{
    background-repeat: no-repeat;
    background-position: 0px -120px;
}  


.background
{
    width: 60px !important;
    height: 60px !important;
    background-image:  url("./yourBackgroundImage.png") !important;
    border: 0px solid black !important;
    background-position: 0px 0px;
}

.background:active
{
    background-repeat: no-repeat;
    background-position: 0px -120px !important;
}
.background:hover
{
    background-repeat: no-repeat;
    background-position: 0px -60px;
}

Then in your javascript when you create your button:

   $("#button").button({
        text: false,
        icons: {
            primary: "house"
        }
    });
    $("#button").next(".ui-button").addClass("background").attr('id', 'houseLabel');

With this, your #button will look like the custom styled button the left. Of course you will have to adapt this code to fit your resources by specifying the correct images and dimensions.