Trace:
Differences
This shows you the differences between two versions of the page.
| Next revision | Previous revision | ||
|
visionx:valo_style_templates [2021/11/08 10:11] admin created |
visionx:valo_style_templates [2024/12/18 06:45] (current) admin |
||
|---|---|---|---|
| Line 14: | Line 14: | ||
| If you want to use our style templates, do following: | If you want to use our style templates, do following: | ||
| - | - Download the {{:visionx:visionx_css_templates_v1.0.zip|template archive}} | + | - Download the {{:visionx:visionx_style_templates_v1.8.zip|template archive}} |
| - Extract the archive into the **WebContent** folder of your application, e.g. //<VisionX_dir>/rad/apps/vxdemo/WebContent// \\ (be careful because the existing application.css will be replaced) | - Extract the archive into the **WebContent** folder of your application, e.g. //<VisionX_dir>/rad/apps/vxdemo/WebContent// \\ (be careful because the existing application.css will be replaced) | ||
| - Choose the right application style | - Choose the right application style | ||
| Line 30: | Line 30: | ||
| <file css application.css> | <file css application.css> | ||
| - | @import url('theme-orange.css'); | + | @import url('./theme-orange.css'); |
| - | /* @import url('theme-red.css'); */ | + | /* @import url('./theme-red.css'); */ |
| - | /* @import url('theme-black.css'); */ | + | /* @import url('./theme-black.css'); */ |
| - | /* @import url('theme-blue.css'); */ | + | /* @import url('./theme-blue.css'); */ |
| :root { | :root { | ||
| Line 57: | Line 57: | ||
| /* Image Company Logo */ | /* Image Company Logo */ | ||
| - | /* --theme-background-image: url("./images/logo_white.png"); */ | + | /* --theme-background-image: url("./images/theme-logo_white.png"); */ |
| /* Background Color Toparea */ | /* Background Color Toparea */ | ||
| Line 194: | Line 194: | ||
| } | } | ||
| </file> | </file> | ||
| + | |||
| + | The orange coloring is used in this file. The result will look like following: | ||
| + | |||
| + | The standard view:\\ | ||
| + | {{:visionx:standard_web_orange.png?nolink|Standard menu}} | ||
| + | |||
| + | The corporation view: \\ | ||
| + | {{:visionx:corporation_web_orange.png?nolink|Corporation menu}} | ||
| + | |||
| + | If you want different colors, simply use another theme file | ||
| + | |||
| + | <code css> | ||
| + | /* @import url('./theme-orange.css'); */ | ||
| + | /* @import url('./theme-red.css'); */ | ||
| + | /* @import url('./theme-black.css'); */ | ||
| + | @import url('./theme-blue.css'); | ||
| + | </code> | ||
| + | |||
| + | or change one of the documented variables, e.g. | ||
| + | |||
| + | <code css> | ||
| + | /* --theme-primary-color: #f78500; */ | ||
| + | --theme-primary-color: #00AA00; | ||
| + | </code> | ||
| + | |||
| + | And here's the result:\\ | ||
| + | {{:visionx:standard_web_green.png?nolink|Standard menu}} | ||