0

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!!

Bazley
  • 2,699
  • 5
  • 36
  • 61

1 Answers1

1
.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).

tinifni
  • 2,372
  • 18
  • 15