Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Theme Designer

The Theme Designer has its own set of unique qualities, as the users can easily apply the themes of their choices for different items and fields. By using Theme Designer in Canvas Studio, themes can be created and modified in a simple way. Even customized themes can be created easily, but it requires a good deal of knowledge on CSS and SASS. Structure and Primary are the default set of themes in Theme Designer. The key features of Theme Designer are as follows:

...

  1. On the home page of Canvas Studio, click Create > Theme.

Image RemovedImage Added

The Theme Designer page appears.
Image Removed

Image Added

Basic, Layout, App, Forms, Grids, Modal, Variables, Mixins and Custom SASS are the nine different tabs available in Theme Designer.
Image Removed

Image Added

Designing Themes for Basic

The different shades of colors that serve as themes in Basic can be applied to different sets of options. The themes of error and success messages can be modified easily. The Primary theme can be modified and the newly selected theme gets applied to the selected field. To modify the themes in Basic tab, perform the following steps:

  1. 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. 

...


  1. Image Added

    You can choose the layout of your choice for Mobile Layout Type.

...


  1. Image Added
  2. 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. 

...


  1. Image Added
  2. 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.

Image RemovedImage Added

Designing Themes for Layouts

The Layout tab comprises of various options, which allow you to modify the colors of layout header, footer and other miscellaneous fields like workspace menu, dropdown list and page title. To modify the themes of Layouts, perform the following steps:

  1. Click Layout tab to modify the themes of the layouts.

...


  1. Image Added
  2. 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.

...


  1. Image Added
  2. 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.

Image Modified

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:

  1. Click App tab. Click icon of the respective fields, for which you wish to modify the themes. You can modify the background colors of App, Filter, Header and Footer. You can adjust both the App Header Height and Filter Bar Height, based on your preference.

Image Modified

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:

  1. Click Forms tab. Click icon of the respective fields, for which you wish to modify the themes. You can choose the colors of your choice for the different fields in Pagination, Accordion, Button and Miscellaneous. You can even choose different sets of colors for check boxes, radio buttons and form items.

Image RemovedImage Added

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:

  1. Click Grids tab. Click icon of the respective fields, for which you wish to modify the themes. You can modify the background colors of Table Header, Odd Row, Even Row and Row Hover.

Image Modified

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:

  1. 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.

Image Modified

Note
titleNote

...

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.

  1. Click Variables tab and click the text field to enter the coding requirements of Variables. The following code snippet and screen shot serve as good references. 

Code Block
$btnGradColor1: #5316b1;
$btnGradColor2: #951313;
$btnFontSize: 1.5rem;



Image RemovedImage Added

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:

  1. Click Mixins tab and click the text field to enter the coding requirements of Mixins. The following code snippet and screen shot serve as good references.

Code Block
@mixin btnGradientTwo($btnGradColor1, $btnGradColor2) {

...


  background: $btnGradColor1;

...


  background: -webkit-linear-gradient(left top, $btnGradColor1, $btnGradColor2);

...


  background: linear-gradient(to bottom right, $btnGradColor1, $btnGradColor2);
}



Image RemovedImage Added

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:

  1. 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{

...

  1. 
      @include btnGradientTwo($btnGradColor1 0%, $btnGradColor2 100%);

...

  1. 
      font-size: 1.5rem;

...

  1. 
      border: 0;
    }

...



  1. Image Added

  2. Click Submit to save the changes. A successful save message appears.

Image RemovedImage Added

The following screen shot serves as a good illustration of the output in the functional application, Modelhouse.


Image Modified

Editing Themes

To edit an existing theme in Theme Designer, perform the following steps in Canvas Studio.

  1. On the home page of Canvas Studio, click Theme Designer on the left pane.

...


  1. Image Added

  2. The existing themes appear. Right-click the theme which you want to edit and click the Edit option.

...



  1. Image Added

  2. 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.

...


  1. Image Added
  2. If you wish to create a clone for the theme, click Clone option.

...


  1. Image Added
  2. A new Theme Designer page appears and you have to type the relevant values in the relevant fields.

...


  1. Image Added
  2. After you have completed the proceedings, click Submit to save the changes.

Image RemovedImage Added

The following screen shot serves as a good illustration of the output in the functional application, Modelhouse, showcasing the applied theme on the menu layout.
Image Removed

Image Added

The following screen shot from the functional application, Modelhouse, showcases the modified background color of the app.


Image Modified

Canvas Themes for Web and Mobile Applications

Theme Designer paves the way for the users to design themes for each and every field, with a varied set of options. The illustrations of Canvas themes in web and mobile applications are provided as follows:

In the web version, when the changes are applied to Primary, which is categorized under the segment of Colors in Basic, the scroll indicator's color gets changed, whereas in mobile version, the colors involving Active Charts, Spinner Icon and the text of the Tool Item header are displayed.

The following screen shots serve as good illustrations of the web and mobile versions in the functional application, Modelhouse.
Image Removed
Image Removed Image Removed

Image Added


                                                  Image Added                                                  Image Added                                                 Image Modified


Logo appears on the header in both web and mobile versions. In the web version, the logo remains intact for all layouts, but whereas, it differs in the mobile version.

The following screen shots serve as good illustrations of the web and mobile versions in the functional application, Modelhouse.
Image Removed
Image RemovedImage Removed

Image Added


                                               Image Added                                                       Image Added                                                     


  1. In the Layout section, you can select the color of your choice in Body BG.

    The following screen shots serve as good illustrations of the web and mobile versions in the functional application, Modelhouse.

...


  1. Image Added


    Image Modified
  2. You can choose the color of your choice for Header BG. 

    In the web version, the changes get reflected in the background of the header, whereas, in the mobile version, the changes even get applied to the headers of components like tab panel, field set, filter component and sort component.

    The following screen shots serve as good references for web and mobile versions in the functional application, Modelhouse.

...


  1. Image Added


                                               Image Added                                                 Image Added                                                    Image Added





                                               Image Added                                                    Image Added                                                     Image Modified

  2. You can choose the colors of your preferred choice for Icon BG, Icon Color and Icon Active Color, involving any of the layouts from Card, App, Menu, Ex Card, Tab and Table Top.

    The following screen shots serve as good illustrations of the Card layout for web and mobile versions in the functional application, Modelhouse.

...



  1. Image Added

...



  1. Image Added

    The following screen shots serve as good illustrations of the Table Top layout for web and mobile versions in the functional application, Modelhouse.

...



  1. Image Added

    Image Modified

    The following screen shots serve as good illustrations of the Menu layout for web and mobile versions in the functional application, Modelhouse.

...



  1. Image Added

    Image Modified

    The following screen shots serve as good illustrations of the Tab layout for web and mobile versions in the functional application, Modelhouse.

...



  1. Image Added

    Image Modified


  2. In the App section, you can choose the colors of your preferred choice for App BG, App Header BG and App Footer BG.

    The following screen shots serve as good illustrations of the web and mobile versions in the functional application, Modelhouse.


    Image Added


    Image Modified

...



  1. In the Forms section, you can choose the colors of your choice for check boxes, radio buttons and form items.

    The following screen shots serve as good illustrations of the web and mobile versions in the functional application, Modelhouse.

...



  1. Image Added



Image Modified