...
For the full set of information on Theme Designer, refer the following pages:
Designing Themes for Apps (Widgets)
The App tab paves the way for you to design the themes for widget (app), its header and footer. To modify the themes of Apps, perform the following steps:
...
Designing Themes for Forms
The Forms tab allows you to modify the themes of form items and even for the miscellaneous fields like Upload Component, Slider Pointer and Slider, the background colors can be modified. To modify the themes of Forms, perform the following steps:
...
Designing Themes for Grids
The Grids tab allows you to modify the themes of rows and table headers in grids. Table Type, Table Border and Table Spacing can be chosen from the available set of options. To modify the themes of Grids, perform the following steps:
...
Designing Themes for Modal
The Modal tab allows you to modify the themes of modals. To modify the themes of Modals, perform the following steps:
- Click Modal tab. Click
icon of the respective fields, for which you wish to modify the themes. You can modify the background colors of Message Modal, Modal, Modal Header and Modal Overlay.
| Note | ||
|---|---|---|
| ||
To design themes for customized layouts, type the essential coding requirements in the field of Custom css/scss. For variables and mixins, the essential coding requirements can be entered in the respective fields of Variables and Mixins. |
Creating Themes using Variables
For creating customized themes, users must have a great deal of knowledge on CSS and SASS. Variables serve as an integral part of SASS. To create themes using Variables, perform the following steps.
...
| Code Block |
|---|
$btnGradColor1: #5316b1;
$btnGradColor2: #951313;
$btnFontSize: 1.5rem; |
...
Creating Themes using Mixins
Mixins serve the purpose of component reusability in SASS. Mixins can be effectively used to create customized themes in Theme Designer. To create themes using Mixins, perform the following steps:
...
| Code Block |
|---|
@mixin btnGradientTwo($btnGradColor1, $btnGradColor2) {
background: $btnGradColor1;
background: -webkit-linear-gradient(left top, $btnGradColor1, $btnGradColor2);
background: linear-gradient(to bottom right, $btnGradColor1, $btnGradColor2);
} |
...
Creating Themes using Custom SASS
Customized themes can be created by developers, with an acute set of SASS programming codes. To create themes using Custom SASS, perform the following steps:
...
| Code Block |
|---|
.PAY_SUBMIT.ct_btn{
@include btnGradientTwo($btnGradColor1 0%, $btnGradColor2 100%);
font-size: 1.5rem;
border: 0;
} |
...
Editing Themes
To edit an existing theme in Theme Designer, perform the following steps in Canvas Studio.
...
Canvas Themes for Web and Mobile Applications
...