Trace:
Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
visionx:style_invoice_application [2020/06/08 11:38] cduncan [Apply user-defined styles to individual controls] |
visionx:style_invoice_application [2020/06/10 10:38] (current) cduncan |
||
---|---|---|---|
Line 1: | Line 1: | ||
~~NOTRANS~~ | ~~NOTRANS~~ | ||
- | ~~Title: Style Invoice application~~ | + | ~~Title: Style Invoice Application~~ |
Version: 1.1 / 2019-07-01 | Version: 1.1 / 2019-07-01 | ||
====== Introduction ====== | ====== 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 ====== | ====== Start Live Preview ====== | ||
Line 281: | Line 281: | ||
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}} | {{: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 ===== | ===== 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]]. |