Themes

---

eComsta is highly customizable, you can easily design a new template. You can also modify various elements and customize existing designs so it looks and functions the way you want.

How to have your own Home Page Design in eComsta?

eComsta each web page is divided into three parts:

• Layouts

A layout is a collection of widgets or HTML code that is common for multiple pages. For instance, you could have a Navbar, Left, Right and Footer blocks in a Layout that is common to all pages.

• Views

View refers to the arrangement of text and graphics on a page. This is specific to a page.

• Widgets

A widget is a small block of code that performs a specific function. You can add these widgets in the Layouts and the Views web pages. These are designed to provide a simple and easy-to-use way of giving design and structure control of the eComsta theme to the user. For example, you can create a block for categories and call it in Home and View page to enhance its functionalities.

How to add a new theme?

• Visit Developer->Themes and click the Theme(s) link.
• Fill the Form
  • Name: Give a name to your theme. The name must be in small letters without any space and special charcters. e.g. mealsy
  • Image: Leave the image field blank. This is the preview image that you can upload later after designing the theme.
  • Logo Pixels: The logo added in the navigation bar will have a fixed width and height, set it here. We suggest a maximum width of 250 and a height of 60 pixels.
  • Navbar: Select a navbar for your theme. This will be common to all pages. Ecomsta has pre-built navbars and footers, use them to fasten your theme development. You can also add your own navbar and footers by adding a new widget.
  • Footer: Select a footer for your theme.
  • Options: Leave this field blank. You can use it to pass additional parameters to your theme.
• Click the Save & Exit button to save your theme.

How to add a Home Page?

• Visit Developer->Themes and click the Add button.
• Select View from the Type dropdown list.
• Give a name to your Home Page. e.g. Home - Mealsy
• Select Home from the View dropdown list.
• Similarly, select Home from the Layout dropdown list.
• Select your newly added theme (e.g. Mealsy) from the Theme list.
• Check the Make this View as Theme Default checkbox to make this view as the default Home page for the theme.
• Select a preview Image to identify your Home page, you can add it later after finalizing the design of your home page.
• Specify a filename without any extension, and space e.g. _mealsy. This is the name of the file that will be saved in the public_html/themes/default/views/home/_mealsy folder on your website. You can also edit this file via FTP and make the changes.
• Specify a CSS Class Name. This is optional, you can leave it to default. This class name is used as the CSS block identifier. Following this convention will help in modifying the internal classes from a layout/view. Basically added to apply parallax image and video to a specific widget.
• Leave the Theme Block to default. This is for widgets only.
• If you have any comments or notes add them to the Any Useful Information textarea field.
• If your Home Page has any external CSS dependences. Add them via External CSS Dependencies option field. 
• Similarly, for JS dependencies, use the External JS Dependencies option field.
• Click the Save & Exit button to save your view page.

How to Design a Home Page using Prebuilt Blocks?

Note: If you are modifying an existing View, please take a backup via Code Editor. This option will overwrite your theme file on save.

• Go to Developer->Themes and search for your Home Page.
• Click the Design Layout icon to create or modify your design.
• Click the Add button to add a new block.
• Under the Name column, use the dropdown field and select a widget.
• The Priority field defines the position of the block on your page. Lower the priority, the higher the position of the block. Use this field to change the position of blocks on your page.
• Click the Options button to view the block parameters. Each block has its own options, set them as per your requirements.
• If you want to remove an existing block, click the minus (-) icon infront of that block under the Action column.
• Once you have finalized the blocks, click the Save & Exit button. This will automatically create/overwrite your view file.
• Click the Star icon to appy new changes.
• Refresh the Home page to view your design.

How to add a Widget?

• Log in to the Admin Panel, go to Developer->Themes
• Click the Add tab in the upper right corner.
• Select Widget from the Type dropdown field.
• Give a meaning Name to your widget.
• If this widget is designed for a specific view, type its name in the Applicable Views field and select it from the list.
• Click the Browse.. button to add an image (Optional).
• File Folder: This is the name of the folder (public_html/themes/default/widgets) on your website where files will be placed. E.g. if this widget is a pricing table select Packages as the File Folder.
• Specify a name for your file. E.g. _pkg_widget_22
• Add your notes in the Any Useful Information field.
• If this is a widget and has parameters, add them via Add Options button.
• If your widget has external CSS dependencies (e.g. Owl Carousel, Slick Slider, etc.) add them
• Similarly, add JS dependencies if there are any.
• Click the Save button to save your widget.

How to add HTML/CSS/jQuery code?

• Go to Manage Themes
• Click the Code Editor icon
• Paste your code in respective blocks

How to use a widget?

Use the code below to add your widget in a View/Layout page.

<?php echo theme_view('widgets/packages/<NAME OF THE WIDGET>', PARAMETERS?>

E.g.

<?php echo theme_view('widgets/packages/_pkg_widget_22', array('type_id' => 0,'cols' => 3));?>

After adding a widget, click the Star icon to set the View/Layout page to default to recompile the widget specific CSS and JS files.

CSS and JS changes are not reflecting?

After making a change to the CSS or JS code, you must set the page to default to recompile the CSS and JS files. This is the page where you have used the widget. You can also set the theme to default, but we suggest that you set the page to default instead of recompiling the entire theme's CSS and JS files.

For instance, if you have used the wigdet in the Home Page, go to Developer->Themes, go the Views tab and search for the Home keyword. The row with a yellow star is the active one, click the Star icon to regenerate the CSS and JS files.

Theme specific global SCSS file

• Adding a theme automatically creates a SCSS file in the public_html/themes/default/scss/themes folder. E.g. If your theme name is mealsy, the filename will be _mealsy.scss.
• Anything common to all pages like heading title, links etc. can be customized using this SCSS file.
• Modify this file using FTP to make changes globally in your theme.

Note: Do not change existing widgets, use Global or View specific SCSS file to modify the presentation, colors, fonts etc.