Documentation

Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
visionx:valo_style_templates [2021/11/08 10:11]
admin created
visionx:valo_style_templates [2022/06/27 10:23] (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.4.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}}
This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information