Trace:
Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision Next revision Both sides next revision | ||
visionx:style_invoice_application [2018/04/12 13:02] robot |
visionx:style_invoice_application [2020/06/08 11:35] cduncan [Color buttons with VisionX] |
||
---|---|---|---|
Line 2: | Line 2: | ||
~~Title: Style Invoice application~~ | ~~Title: Style Invoice application~~ | ||
- | Version: 1.1 / 2018-04-12 | + | Version: 1.1 / 2019-07-01 |
====== Introduction ====== | ====== Introduction ====== | ||
Line 10: | Line 10: | ||
====== Start Live Preview ====== | ====== Start Live Preview ====== | ||
- | VisionX has some comfortable features that enables you to easily adapt the style and appearance of your application in the web. One of these features is the Live Preview: All changes made in the visual designer are immediately displayed in the browser window. To start the Live Preview press the "Preview" Button (1). | + | VisionX has some comfortable features that enable you to easily adapt the style and appearance of your application in the web. One of these features is the Live Preview: all changes made in the visual designer are immediately displayed in the browser window. To start the Live Preview, press the "Preview" button (1). |
{{:visionx:style_invoice_application:start-live-preview.png?nolink|Start Live Preview}} | {{:visionx:style_invoice_application:start-live-preview.png?nolink|Start Live Preview}} | ||
- | ====== Open the style sheet from within VisionX ====== | + | ====== Open the Style Sheet From Within VisionX ====== |
- | The appearance of your web-application is mainly controlled by Cascading Style Sheets (.css-files). We can override existing styles and create new ones by editing an external Style Sheet, which resides as ''%%/WebContent/application.css%%'' per default. | + | The appearance of your web application is mainly controlled by cascading style sheets (.css-files). We can override existing styles and create new ones by editing an external style sheet, which resides as ''%%/WebContent/application.css%%'' per default. |
- | You can open the Style Sheet from within VisionX by pressing the arrow beside the "Settings" Button (1) an selecting "Web". | + | You can open the style sheet from within VisionX by pressing the arrow beside the "Settings" button (1) and selecting "Web". |
- | In the following wizard select the Tab Page "Styles" (2). | + | In the following wizard, select the tab page "Styles" (2). |
{{:visionx:style_invoice_application:open-web-application-settings-styles.png?nolink|Open Style Sheet from within VisionX}} | {{:visionx:style_invoice_application:open-web-application-settings-styles.png?nolink|Open Style Sheet from within VisionX}} | ||
- | ====== Style the Header of your web application ====== | + | ====== Style the Header of Your Web Application ====== |
- | Let's start with the header. We want the look and feel to match our VisionX corporate design: It shall look light, modern and with an orange touch. | + | Let's start with the header. We want the look and feel to match our VisionX corporate design: it should look light, modern, and with an orange touch. |
- | Let's specify the color-scheme we want to use: | + | Let's specify the color scheme we want to use: |
* ''%%#FFFFFF%%'' "white" for the background | * ''%%#FFFFFF%%'' "white" for the background | ||
Line 36: | Line 36: | ||
* ''%%#FFD199%%'' a light orange for current selections | * ''%%#FFD199%%'' a light orange for current selections | ||
- | To achieve that, we simply override some of the default styles of our Valo Theme in VisionX. | + | To achieve that, we simply override some of the default styles of our Valo theme in VisionX. |
- | ===== Color the background ===== | + | ===== Color the Background ===== |
- | Our first step is to color the background of the Top-Area and its Menu Bar. We also move the border from the top of the Menu Bar to its bottom. Copy the following styles into your "Web Application Settings / Styles" window: | + | Our first step is to color the background of the top area and its menu bar. We also move the border from the top of the menu bar to the bottom. Copy the following styles into your "Web Application Settings / Styles" window: |
<code css> | <code css> | ||
Line 61: | Line 61: | ||
{{:visionx:style_invoice_application:header-code-completion.png?nolink|Code completion}} | {{:visionx:style_invoice_application:header-code-completion.png?nolink|Code completion}} | ||
- | Press the "Apply" Button to review the result in the live preview window: | + | Press the "Apply" button to review the result in the live preview window: |
{{:visionx:style_invoice_application:header-step1.png?nolink|Color the background}} | {{:visionx:style_invoice_application:header-step1.png?nolink|Color the background}} | ||
Line 67: | Line 67: | ||
===== Color the Menu Items and Buttons ===== | ===== Color the Menu Items and Buttons ===== | ||
- | As the background is light now, we have to darken the items and buttons. By the way we want them to change color on mouse hover: | + | As the background is light now, we have to darken the items and buttons. We want them to change color on mouse hover: |
<code css> | <code css> | ||
Line 95: | Line 95: | ||
} | } | ||
</code> | </code> | ||
- | To review the result of that modification press the "Apply" Button again: | + | To review the result of that modification, press the "Apply" button again: |
{{:visionx:style_invoice_application:header-step2.png?nolink|Color the menu items and buttons}} | {{:visionx:style_invoice_application:header-step2.png?nolink|Color the menu items and buttons}} | ||
- | ===== Change the logo ===== | + | ===== Change the Logo ===== |
- | To change the logo in the header's top left corner, we have to create a folder ''%%/WebContent/images%%'' and copy the new logo into it. We append the name of the logo and its position as a small addition to the style sheet: | + | To change the logo in the header's top left corner, we have to create a folder ''%%/WebContent/images%%'' and copy the [[https://doc.sibvisions.com/_media/visionx/style_invoice_application/logo.png|new logo]] into it. We append the name of the logo and its position as a small addition to the style sheet: |
<code css> | <code css> | ||
Line 114: | Line 114: | ||
{{:visionx:style_invoice_application:header-step3.png?nolink|Change the logo}} | {{:visionx:style_invoice_application:header-step3.png?nolink|Change the logo}} | ||
- | ===== Color the menu pop-ups ===== | + | ===== Color the Menu Pop-Ups ===== |
- | Looks good so far, but what if we click on a menu item? We have to change that color too according to our scheme: | + | Looks good so far, but what if we click on a menu item? We have to change that color, too, according to our scheme: |
<code css> | <code css> | ||
Line 151: | Line 151: | ||
} | } | ||
</code> | </code> | ||
- | Press "Apply" to update the Live Preview in your Browser window: | + | Press "Apply" to update the Live Preview in your browser window: |
{{:visionx:style_invoice_application:header-step4.png?nolink|Color the menu popups}} | {{:visionx:style_invoice_application:header-step4.png?nolink|Color the menu popups}} | ||
- | ====== Styling the Invoice WorkScreen ====== | + | ====== Styling the Invoice Workscreen ====== |
- | Unfortunately the original styling of the Invoice WorkScreen does not match our new requirements. Let's improve the layout and apply our color scheme using the built-in VisionX tools. | + | Unfortunately, the original styling of the invoice workscreen does not match our new requirements. Let's improve the layout and apply our color scheme using the built-in VisionX tools. |
- | ===== Compact the list of invoice items ===== | + | ===== Compact the List of Invoice Items ===== |
- | First we will reduce the margins of the invoice items in the component table to give it a more compact look: Open the WorkScreen "Invoice" in Design-Mode and right-click on any of the editors in the component table, such as the "Article" combobox (1). Reduce the surrounding margins in the properties-popup to "Left=0, Top=3, Right=0, Bottom=3" (2). | + | First, we will reduce the margins of the invoice items in the component table to give it a more compact look: open the workscreen "Invoice" in design mode and right click on any of the editors in the component table, such as the "Article" combobox (1). Reduce the surrounding margins in the properties-popup to "Left=0, Top=3, Right=0, Bottom=3" (2). |
{{:visionx:style_invoice_application:invoice-margins.png?nolink|Reduce margins}} | {{:visionx:style_invoice_application:invoice-margins.png?nolink|Reduce margins}} | ||
- | ===== Color buttons with VisionX ===== | + | ===== Color Buttons With VisionX ===== |
- | Let's change the button's colors next. Right-click the "Export Invoice" Button (1) and click on "Background..." (2) to open the color picker. Enter the RGB-Code ''%%#464646%%'' (dark grey) of and press the "Finish" Button (3) to apply the new color of the button. | + | Let's change the button's colors next. Right click the "Export Invoice" button (1) and click on "Background..." (2) to open the color picker. Enter the RGB code ''%%#464646%%'' (dark grey) of and press the "Finish" button (3) to apply the new color of the button. |
{{:visionx:style_invoice_application:invoice-step1-howto.png?nolink|Color buttons}} | {{:visionx:style_invoice_application:invoice-step1-howto.png?nolink|Color buttons}} | ||
- | Now apply the same steps for the "Add" Buttons. Set the background color of the "Delete" Button to ''%%#FF8C00%%'' (dark orange). Finally change the foreground color of the "Add new item" and the "Delete Item" buttons to ''%%#FF8C00%%'' (dark orange). | + | Now apply the same steps for the "Add" buttons. Set the background color of the "Delete" button to ''%%#FF8C00%%'' (dark orange). Finally, change the foreground color of the "Add new item" and the "Delete Item" buttons to ''%%#FF8C00%%'' (dark orange). |
- | All changes are immediately displayed in your Live Preview Browser Window: | + | All changes are immediately displayed in your Live Preview browser window: |
{{:visionx:style_invoice_application:invoice-step1.png?nolink|Color buttons}} | {{:visionx:style_invoice_application:invoice-step1.png?nolink|Color buttons}} | ||
Line 256: | Line 256: | ||
To identify the .css selectors you need to overwrite, inspect the underlying style sheet using your browsers developer tools. Press ''%%[F12]%%'' in your browser window to open the developer tools. You can find more detailed information here: | To identify the .css selectors you need to overwrite, inspect the underlying style sheet using your browsers developer tools. Press ''%%[F12]%%'' in your browser window to open the developer tools. You can find more detailed information here: | ||
- | * [[https://developers.google.com/web/tools/chrome_devtools/css/|Chrome]] | + | * [[https://developers.google.com/web/tools/chrome-devtools/css/|Chrome]] |
- | * [[https://developer.mozilla.org/en_US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS|Mozilla Firefox]] | + | * [[https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS|Mozilla Firefox]] |
- | * [[https://docs.microsoft.com/de_de/microsoft_edge/devtools_guide/elements|Microsoft Edge]] | + | * [[https://docs.microsoft.com/de-de/microsoft-edge/devtools-guide/elements|Microsoft Edge]] |
====== Apply user-defined styles to individual controls ====== | ====== Apply user-defined styles to individual controls ====== |