Theme Support

The MonthPicker plugin uses the jQuery UI CSS Framework to style its look and feel, including the colors of buttons and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

##Version 3.x

Version 3.x uses em instead of px units. This means that the menu determines it's size according to the body element's font-size, instead of having a fixed width of 200px.

If you need to resize the menu, add this rule to your CSS:

/* Makes the Month Picker menu 20% bigger. */
.month-picker {
  font-size: 1.2em;
}

Version 3.x removes:

.month-year-input {
    width: 60px;
}

##Widget Specific Classes If a deeper level of customization is needed, there are widget-specific classes referenced within the MonthPicker.css stylesheet that can be modified. These classes are highlighted below.

.month-picker-disabled

Customize the disabled look of the MonthPicker text box. .month-picker-invalid-message

Customize the look of validation message.

##Additional Decoration Classes Here are some additional classes that you can experiment with which are also in use on the Demo Site. These classes are not widget specific and are not included by default. However, these classes still show how standard CSS can be used to help the Month Picker fit into your design.

.icon {
    vertical-align: bottom;
    margin-top: 2px;
    margin-bottom: 3px;
    cursor: pointer;
}

.icon:active {
    opacity: .5;
}

.ui-button-text {
    padding: .4em .6em;
    line-height: 0.8;
}

.month-year-input {
  width: 60px;
  margin-right: 2px;
}