You can style widgets either using the theme editor, the style element on the page, or the style attribute on a widget element. Using the attribute overrides the element style, which overrides the theme.
You can style widgets either using the theme editor, the style element on the page, or the style attribute on a widget element. Using the attribute overrides the element style, which overrides the theme.
The x indicates that the style property applies to the widget. For details of mcs-effect-style and mcs-effect-duration values see About transitions.
| Property | AJAX Table | Autocompleter | Carousel | Clock | Date Picker | Deck | Dynamic Menu | Field Expander | Folding Item | Forms Validators | Forms Wizard | Gallery | Stopwatch | Tabs | Ticker Tape | Timer |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| mcs-auto-play | x | |||||||||||||||
| mcs-break-after | x | |||||||||||||||
| mcs-button-style | x | x | x | x | x | x | x | |||||||||
| mcs-cancelable | x | |||||||||||||||
| mcs-count-mode | x | |||||||||||||||
| mcs-datetime-format | x | x | x | |||||||||||||
| mcs-deck-mode | x | |||||||||||||||
| mcs-delay | x | |||||||||||||||
| mcs-duration | x | |||||||||||||||
| mcs-frame-rate | x | x | x | x | ||||||||||||
| mcs-initial-state | x | x | ||||||||||||||
| mcs-input-format | x | |||||||||||||||
| mcs-item-limit | x | |||||||||||||||
| mcs-items-order | x | |||||||||||||||
| mcs-marquee-direction | x | |||||||||||||||
| mcs-marquee-repetition | x | |||||||||||||||
| mcs-marquee-style | x | |||||||||||||||
| mcs-marquee-speed | x | |||||||||||||||
| mcs-menu-orientation | x | |||||||||||||||
| mcs-menu-style | x | |||||||||||||||
| mcs-repetitions | x | |||||||||||||||
| mcs-slideshow-launch-delay | x | |||||||||||||||
| mcs-table-rows-per-page | x | |||||||||||||||
| mcs-toggle-event | x | x | x | x | ||||||||||||
| mcs-transition-interval | x | |||||||||||||||
| mcs-validation-error-action | x | |||||||||||||||
| :focus | x | x | x | |||||||||||||
| :mcs-disabled | x | |||||||||||||||
| :mcs-invalid | x | |||||||||||||||
| :mcs-unfolded | x | x | x | |||||||||||||
| ::before, ::after | x | |||||||||||||||
| ::marker | x | x | x | |||||||||||||
| ::mcs-label | x |
The table list the style properties, pseudo-classes, and pseudo-elements used bu the Client Framework 1 widgets.
| Property | Description | CSS |
|---|---|---|
| mcs-auto-play | Specifies if a slideshow should be automatically started when the XDIME page is loaded. The possible values are: 'yes', 'no' (default). | gallery|slideshow {mcs-auto-play: yes;} |
| mcs-break-after | Whether fragmentation occurs or not, and where it occurs. If set to 'always' then the wizard step ends a form fragment, and another fragment begins immediately. | widget|wizard {mcs-break-after: always;} |
| mcs-button-style | Controls how the button is rendered. In native mode, the button is rendered by the device, using its native styling. In custom mode the page author has full control over the styling. The possible values are: 'native' (default) and 'custom'. | <widget:next style="content: mcs-component-url('next.mimg'); mcs-button-style: custom"/> |
| mcs-cancelable | Each wizard step may optionally include this 'Cancel' action. a value of 'always' means the wizard can be canceled; 'never' means the opposite. | widget|wizard {mcs-cancelable: always;} |
| mcs-count-mode | Sets the Stopwatch widget mode. The possible values are: 'split' (default) or 'lap'. | widget|stopwatch {mcs-count-mode: split} |
| mcs-datetime-format | Sets the format for time and date | widget|digital-clock {mcs-datetime-format='%D %d %F %Y %h:%i:%s';} |
| mcs-deck-mode | Specifies the Deck widget mode. When it is set to 'switch', deck will display a single page. When it is set to 'unfold', the consecutive pages will be displayed after those already visible. | widget|deck {mcs-deck-mode: switch} |
| mcs-delay | Defines the time delay between the last character being typed, and the AJAX request being sent to the server that provides the list of matching items. The possible values are: 'auto' - set to 1s for all devices, time - a fixed delay time in seconds. | widget|autocomplete {mcs-delay: 2;} |
| mcs-duration | Defines the time for which a single gallery item will be displayed by the Slideshow widget. The default value is 5s. | gallery|slideshow {mcs-duration: 4;} |
| mcs-frame-rate | Specifies the frequency in Hz or kHz that is required when displaying visual effects such as transitions, or scrolling. | widget|ticker-tape {mcs-frame-rate:3khz;} |
| mcs-initial-state | Specifies whether the initial state of the widget is 'folded' or 'unfolded' | widget|folding-item {mcs-initial-state: inactive;} |
| mcs-input-format | Specifies the pattern to use in field validation | xforms|input {mcs-input-format: 'M:M*M';} |
| mcs-item-limit | Specifies the maximum number of matching items to be displayed in the drop-down list of the Autocompleter widget. The possible values are: 'auto' - set to 5 for all devices, 'infinite' - there is no limit on the number of displayed items, integer - a maximum number of displayed items. | widget|autocomplete {mcs-item-limit: 6;} |
| mcs-items-order | Defines the order of the items in the slideshow. The possible values are: 'normal' (default), 'reverse' and 'random'. | gallery|slideshow {mcs-slideshow-items-order: reverse;} |
| mcs-marquee-direction | The initial direction in which the marquee content will move | widget|ticker-tape {mcs-marquee-direction: left;} |
| mcs-marquee-repetitionn | Number of times that the content will move across the screen. The default value is 1. | widget|ticker-tape {mcs-marquee-repetition: infinite;} |
| mcs-marquee-style | The effect that will be used for the marquee | widget|ticker-tape {mcs-marquee-style: scroll;} |
| mcs-marquee-speed | Specifies how fast a marquee content will move across the screen. A negative value will reverse the direction of movement. | widget|ticker-tape {mcs-marquee-speed: 6 em;} |
| mcs-menu-orientation | Controls the orientation of the menu and submenu. Orientation can be horizontal or vertical. | nl {mcs-menu-orientation: vertical;} |
| mcs-menu-style | If set to 'dynamic' then nl is rendered as dynamic menu otherwise as normal unordered list. This style is inherited. | nl {mcs-menu-style: dynamic;} |
| mcs-repetitions | Specifies the number of slideshow repetitions. The possible values are: 'infinite' (default) or an integer. | gallery|slideshow {mcs-slideshow-repetitions: infinite;} |
| mcs-slideshow-launch-delay | Time after which the slideshow will be automatically launched if there is no activity in the Gallery widget. The possible values are: 'none' (default) or time in seconds. | gallery|gallery {mcs-slideshow-launch-delay: 10;} |
| mcs-table-rows-per-page | Specifies the number of rows displayed on a single page of the table. Only rows from the table body are taken into account, header and footer are omitted. When it is set to 'infinite', all rows will be shown. | widget|table {mcs-table-rows-per-page: 5} |
| mcs-toggle-event | Describes on which event widget or submenu will be unfolded. Possible values: 'focus' - unfold on focus, 'click' - unfold on click. | widget|field-expander {mcs-toggle-event: click;} |
| mcs-transition-interval | The duration of the content replacement | widget|carousel {mcs-transition-interval: 2;} |
| mcs-validation-error-action | Actions that will occur after validation failure. The possible values are: 'none', 'focus' - field receives the focus, 'message' - message is shown. | xforms|input {mcs-validation-error-action: message;} |
| Pseudo-class | Description | CSS |
|---|---|---|
| :focus | Specifies whether or not the widget is focusable, allowing the user to select it even if it contains no link content | widget|carousel:focus {mcs-effect-style: highlight;} |
| :mcs-disabled | Allows styling on the elements in the disable state, such as widget:next, widget:play, etc. For example, widget:next is disabled if the end of gallery was reached. | widget|play:mcs-disabled {display:none;} |
| :mcs-invalid | Style applied after validation has failed | xforms|input:mcs-invalid {color:red;} |
| :mcs-unfolded | Specifies whether the label remains visible when the item is unfolded | label:mcs-unfolded::marker {content: url('unfolded.gif');} |
| Pseudo-element | Description | CSS |
|---|---|---|
| ::before, ::after | Controls how the gap between paragraphs, or at the end of a ticker is displayed. The default is to display four space characters. | p::after {content: " | "} |
| ::marker | Allows styling on the marker of li elements of a list, so the style of the list item content can be separated from the style of the marker | li::marker {color: red;}> |
| ::mcs-label | Represents the tab label in the Tabs widget | widget|tab::mcs-label:active {font-weight: bold;} |