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}} |