Search code examples
jquerycheckboxthemeroller

JQuery ThemeRoller custom theme further customisation

I have created a custom theme with ThemeRoller. I would now like to customise the checkboxes so that their active state is a different colour to the 'clickable: active state' which was chosen in the ThemeRoller. Despite trawling the various css files provided by the custom theme, I cannot for the life of me work out how to do this. I can't even find where the custom colours are stored. Please can some kind soul tell me how to do this? Thanks!!

Solution 
  • .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  border: 1px solid #aaaaaa/*{borderColorActive}*/;
  background: #cccccc/*{bgColorActive}*/ url(images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/;
  font-weight: normal/*{fwDefault}*/;
  color: #212121/*{fcActive}*/;
}

    This is found in:

    • development-bundle/themes/base/jquery.ui.theme.css

    or

    • development-bundle/themes/custom-theme/jquery-ui-1.8.5.custom.css
    • development-bundle/themes/custom-theme/jquery.ui.theme.css

    When you use ThemeRoller to create your custom theme, it generates the image development-bundle/themes/custom-theme/images/ui-bg_glass_65_ffffff_1x400.png, where ffffff is replaced with your custom "Clickable: active state" color. The problem you may encounter is that since this image is generated on the fly (to provide the texture), you must change the background color and also either:

    • remove the background image (gives you no texture and solid color)
    • make your own background image
    • regenerate an image in a new theme and add it to the image directory

    According to the website, Checkbox will be implemented as part of jQuery UI 1.9. http://jqueryui.com/development

    ThemeRoller likely uses the most recent stable version (jQuery UI 1.8.5).