Wijmo uses CSS (cascading style sheets) for styling. The wijmo.css file defines styles for all controls and must be included in all pages that use Wijmo controls.
In addition to the basic wijmo.css default theme, we provide several custom themes. Custom themes are defined in files named wijmo.theme.*.css. To use a custom theme, choose the one you want and include a reference to the appropriate CSS file right after the reference to the "wijmo.css" file.
You can use the "Theme" button in the upper right corner of the page to see what the custom Wijmo themes look like.
If you are not familiar with CSS, here is a very quick description of how it works:
Every HTML element that makes up a control has a class attribute that specifies the role played by the element. In Wijmo, the class names have a "wj-" prefix.
The application includes one or more CSS files that specify the visual properties of these classes. Each CSS file contains any number of rules that apply to specified elements. For example, the rule below specifies that elements with class "wj-header" have a light gray background and a darker gray bold font:
.wj-header { background-color: #EAEAEA; font-weight: bold; color: #444; }
The power and flexibility of CSS become apparent when you create rules based on multiple styles. For example, the rule below specifies that elements with class "wj-header" have a slightly smaller font only when they are contained in "wj-calendar-month" elements:
.wj-calendar-month .wj-header { font-size: 90%; }
The part of the rule that appears before the style definition is called the selector. CSS has a rich syntax for selectors so you can be as specific or as flexible as you want when specifying the elements to which the style applies.
In order to allow full customization of control elements, Wijmo adds classes to each part of each control. Some classes are control-specific, and some are related to state or role. This allows you to customize the appearance of a control, of states (such as selected items), or to roles (such as item headers).
If you are not familiar with CSS and would like to create your own themes, you can start by making small modifications to the ones provided. If you prefer to use LESS themes, you can find more information and links to resources in the Using LESS topic in the help.
If you are not sure about which classes to use in your CSS selectors, you can use the Inspect Element command available in most browsers. This command shows everything about any HTML element, including its classes, the computed style, and what CSS rules were used to build the style.
For example, this page includes a CSS file with the following rules:
/* apply gray gradient background and white foreground to all wijmo controls */ .wj-content { background-image: linear-gradient(to top, #444 0%, #888 100%); color: #fff; } /* show selected items in orange (grid cells, calendar dates, etc) */ .wj-state-selected { background: #ff6a00; } /* multiple selected item background - shown in FlexGrid */ .wj-state-multi-selected { background-color: #ff9f5b; } /* give all headers (grid, calendar, etc) light text on a dark background */ .wj-header { background-color: #444; color: #fff; } /* remove gridlines from non-header grid cells */ .wj-cell:not(.wj-header) { border: none; } /* FlexGrid cell background */ .wj-flexgrid .wj-cell:not(.wj-header):not(.wj-group):not(.wj-alt):not(.wj-state-selected):not(.wj-state-multi-selected) { background: #555; } .wj-flexgrid .wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) { background: #444; }
These rules are applied in addition to the ones in the base wijmo.css file. You can see in the following examples how they affect the appearance of different Wijmo controls.
These rules are great if you want to customize the appearance of every control in your application. That is a typical scenario, but what if you only want to customize the appearance of a single control?
To handle such a scenario, assign a new class to the control that you want to customize, and write CSS rules using that class as the selector. For example, the CSS below applies a blue background color to elements with the class "wj-btn-default" when they are contained in an element with the class "customInputTime."
.customInputTime .wj-btn-default { background: #328efd; } .customInputTime .wj-btn-default:hover { background: #58a2fb; }
Here is the HTML that adds the "customInputTime" class to our Customized InputTime control.
<wj-input-time class="customInputTime" [value]="departureDate" [min]="'07:00'" [max]="'22:00'" [format]="'t'">
Here is the result, along with a regular InputTime control that does not specify the customInputTime class.