CSS Themes can be defined for styling your application.. \\ The visual appearance of your Adichatz application can be style via CSS files as for HTML site. * Each CSS file corresponds to a theme. * Theme can be chosen thru preferences menu. * Mainly colors and fonts are defined. {{gallery>css?160x160&lightbox&showtitle}} ==== Default theme declaration ==== Default css setting is managed thru **org.adichatz.css.theme** plugin. ... \\ By default 3 CSS Stylesheets are defined: blue, dark or red. All default values for css are stored in file described by basestylesheeturi items.\\ \\ ==== Override Theme declaration in plugin.xml file ==== Developers can declare new theme by declaring a new css stylesheet for a new **theme id**. \\ They can also, either override default values or add values by declaring new stylesheet with same **theme id** than those defined in **org.adichatz.css.theme** plugin.\\ Themes are declared in the **plugin.xml** file as shown below. \\ Remarks:\\ Definitive css styles will be the result of merging of stylesheets defined in **org.adichatz.css.theme** plugin and the new stylesheets defined above. |< 100% 10em - >| ^ Lines 16-18:|@#eff5fb:For each style, an **Id**, a **URI** and a **Label** must be define. The **Label** is defined in plugin://org.adichatz.css.theme/plugin.properties file for localization cases (see line 11).| \\ ==== CSS File example ==== **CSS** (Cascade StyleSheet)is a language that describes styles, originally for HTML document whose usage is extended to other softwares.\\ Syntax is presented [[https://www.w3schools.com/css/|here]]. /* ##################################### Adichatz Styles ##################################### */ #adichatz-table-stripe-even { background-color: #FAFAFA; } #adichatz-table-stripe-odd { background-color: #C0DEFC; } #adichatz-emphasize { background-color: #A0A0A0; color: #EEEEEE; font-family: "Times New Roman", Times, serif; font-size: 12px; font-style: oblique; font-weight: bold; font-variant: small-caps; } ... \\ Remarks:\\ |< 100% 10em - >| ^ Lines 40:|@#eff5fb:Sets first alternative background color for a row of a table or a grid.| ^ Lines 44:|@#eff5fb:Sets second alternative background color for a row of a table or a grid.| ^ Lines 49-55:|@#eff5fb:Defines Background and foreground colors and font for a specific **selector** which can be used in programs.| \\ ==== CSS usage in axml file ==== See below an example which uses properties of #adichatz-emphasize selector to change style of a description field.                                     \\ Remarks:\\ |< 100% 10em - >| ^ Lines 13:|@#eff5fb:Background color of field 'description' is the color defined by background-color property of the '#adichatz-emphasize' selector.| ^ Lines 14:|@#eff5fb:Foreground color of field 'description' is the color defined by color property of the '#adichatz-emphasize' selector.| ^ Lines 15:|@#eff5fb:Font of field 'description' is the font defined in the '#adichatz-emphasize' selector.| \\ == Result == {{:tutorial:css:filmdi_css.jpg?550 |Visualization of **css** effect on the **description** field.}} Aspect of **description** field changed * Background color is dark gray. * Foreground color is light gray. * Font is "Times New Roman", Times, serif, 12px, Oblique, bold, small-caps.