...
- Click Basic tab. Enter the Theme Id and Theme Name in the respective text fields. Without assigning the Theme Id, Theme Name, Layout Type and Mobile Layout Type, you cannot proceed further. Provide unique names to Theme Name and Theme Id, and then click Layout Type and Mobile Type drop-down lists to choose the layout types.
You can choose the layout of your choice for Mobile Layout Type. - To modify the colors of Primary, Message, Error, Success and Warning, click icon. Different shades of colors appear and you can select the color or key in the color code in the respective boxes.
- Logo Type can either be in the form of an Image or Text. To upload light colored logos, Logo-Light Version should be used, whereas to upload dark-colored logos, Logo-Dark Version must be employed. Both light and dark versions of the logo can be uploaded. Based on the background color of the Application Header, the contrasting logo is selected automatically.
...
- Click Layout tab to modify the themes of the layouts.
- You can change the background colors of the layout's body, header and footer. To modify the themes, click icon. For the different layouts of Card, App, Table Top, Ex Card, Menu and Tab, the themes can be modified in a simple way. The colors of the icons can be modified too.
- Since the chosen layout was Menu Layout, click icon of Menu BG to modify the background color. Different shades of colors appear and you can select the color of your choice.
...
Click Custom SASS tab and proceed to type the essential coding requirements in Custom css/scss field. The following code snippet and screen shot serve as good references.
Code Block .PAY_SUBMIT.ct_btn{ @include btnGradientTwo($btnGradColor1 0%, $btnGradColor2 100%); font-size: 1.5rem; border: 0; }
- Click Submit to save the changes. A successful save message appears.
...
- On the home page of Canvas Studio, click Theme Designer on the left pane.
- The existing themes appear. Right-click the theme which you want to edit and click the Edit option.
- The Theme Designer page appears. You can edit the themes of the fields, for which you wish to apply changes. Click icon of the respective fields, for which you wish to modify the themes.
- If you wish to create a clone for the theme, click Clone option.
- A new Theme Designer page appears and you have to type the relevant values in the relevant fields.
- After you have completed the proceedings, click Submit to save the changes.
...