Differences

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

--- visionx:style_invoice_application [2020/06/08 11:36]
cduncan [Continue styling the Application]
+++ visionx:style_invoice_application [2020/06/10 10:38] (current)
cduncan
@@ Line 1: / Line 1: @@
 ~~NOTRANS~~
-~~Title: Style Invoice application~~
+~~Title: Style Invoice Application~~
 Version: 1.1 / 2019-07-01
 ====== Introduction ======
-The objective of this tutorial is changing the look and feel of the invoice web application (from a former example) with VisionX. You can download the example from the VisionX Solution Store. Refer to [[:visionx:invoice_application|the VisionX documentation "Create an Invoice application"]] where the example and its purpose are described in detail.
+The objective of this tutorial is changing the look and feel of the invoice web application (from a former example) with VisionX. You can download the example from the VisionX Solution Store. Refer to [[:visionx:invoice_application|the VisionX documentation "Create an Invoice Application"]] where the example and its purpose are described in detail.
 ====== Start Live Preview ======
@@ Line 260: / Line 260: @@
   * [[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 ======
-Moreover, VisionX also offers you the possibility to define you own styles and apply them to individual controls. Let's give an example: We want the "Export Invoice" Button to blink twice when we hover over it with the mouse. To achieve that, copy the following Style information to your "Web Application Settings / Styles" window:
+Moreover, VisionX also offers you the possibility to define you own styles and apply them to individual controls. Let's give an example: we want the "Export Invoice" button to blink twice when we hover over it with the mouse. To achieve that, copy the following style information to your "Web Application Settings / Styles" window:
 <code css>
@@ Line 275: / Line 275: @@
 }
 </code>
-We use VisionX to apply the new Style "blinker" on our button. Open the WorkScreen "Invoice" in Design Mode, right-click the "Export Invoice" Button (1) and enter the class name "blinker" in the "Style" textbox (2). You can also add multiple style classes separated by a blank.
+We use VisionX to apply the new style "blinker" on our button. Open the workscreen "Invoice" in design mode, right click the "Export Invoice" button (1), and enter the class name "blinker" in the "Style" textbox (2). You can also add multiple style classes separated by a blank.
 {{:visionx:style_invoice_application:style-howto.png?nolink|Style editors}}
-The change is immediately visible in the Live Preview, just move your mouse over the button to see the animation.
+The change is immediately visible in the Live Preview; just move your mouse over the button to see the animation.
-====== The styled application ======
+====== The Styled Application ======
-With just a view clicks and some Style Sheet additions we gave our Invoice Application a new look and feel. Let's see the result of our effort:
+With just a view clicks and some style sheet additions, we gave our invoice application a new look and feel. Let's see the result of our effort:
 {{:visionx:style_invoice_application:result.png?nolink|Result}}
-You may not like the grey & orange color scheme nor blinking buttons, but you will definitely like the straight-forward styling features of VisionX.
+You may not like the grey and orange color scheme nor blinking buttons, but you will definitely like the straightforward styling features of VisionX.
 ===== Download =====
-You can download the entire example application from the VisionX Solution Store. The Style Sheet we created during this tutorial is available in the [[https://doc.sibvisions.com/_media/visionx/style_invoice_application/application.css|application.css]].
+You can download the entire example application from the VisionX Solution Store. The style sheet we created during this tutorial is available in the [[https://doc.sibvisions.com/_media/visionx/style_invoice_application/application.css|application.css]].