Category Archives: Design Your Template

4.12.10. Content Tab for VirtueMart in TemplateToaster

1 Background

Use this to apply a preferred color, gradient, or image to the content background.

TemplateToaster features the following extended background options-

Color Picker-

TemplateToaster provides a color picker to choose a background color. Here is the full description of it.

Custom Gradient-
You can create custom gradients with preferred angle, color, and offset choices. You can save the gradients as well. See this for more information about creating and saving the custom gradients.

Browse Images-
You can even apply an image to the content background. TemplateToaster presents an inbuilt stock of free images. You can select an image from the stock, or browse your custom images.

You can even edit the browsed images. TemplateToaster has an image editor with a dozen of edit options to customize the browsed images. For details, see this.

2 Border

Marks the border around the content and modify its properties such as Style, Thickness, Radius and Color. See this to know more.

3 Margin

Specifies the margin of the content for all the sides i.e. top, bottom, left, and right.

4 Padding

Specifies the top, bottom, left, and right padding of the content.

5 Texture

To apply a texture to the content background.

More-
You can customize the transparency of texture with “More”. Click Here for more details.

6 Effects

To give an effect to the content background.

More-
You can customize the transparency of the effect using “More”. Click Here for more details.

7 Shadow

To apply a shadow effect to the content background.

More-
With “More”, you can even customize the color, angle, blur, and distance of the shadow effect. Click Here for more details.

8 Background

To apply a preferred color, image, or gradient in the background. TemplateToaster provides pre-designed gradients and stock images. Also, you can create the custom gradients or browse your own images.

9 Border

Marks a border for the product which you can customize too. For customizing the border, you can have Style, Thickness, Radius (of edges), and Color options.

10 Margin

Specifies all side margins i.e. Top, Bottom, Left and Right.

11 Padding

Specifies the padding from all the sides i.e. Top, Bottom, Left and Right.

12 Texture

To apply a texture to the background of the product.

More-
You can customize the transparency of texture with “More”.

13 Effects

Applies an effect to the background of the product.

More-
You can customize the transparency of the effect using “More”.

14 Shadow

Applies a shadow effect to the background of the product.

More-
With “More”, you can even customize the color, angle, blur, and distance of the shadow effect.

15 Title

Sets the typography of Product Title Container.

16 Content

Customization of Product Content by specifying different properties like Background, Border, List layout, Typography, and much more as shown below:

17 Columns

Specifies the number of product columns on a single page.

18 Image Border

Customizes the product image border by specifying its Thickness, Style, Color etc.

19 Cart

Avails the user to specify the style and alignment of Add To Cart button as per user preferences.

20 Price

Text styling of Product Price by specifying different properties like Font Family, Thickness, Color, and much more.

21 Links

Defines the typography of post title, metadata, metalinks, and content for different states like Link and Link Hover and aligns the links.

4.12.1. Content Tab for WordPress in TemplateToaster

WordPress is one of the most appreciated CMS of TemplateToaster. Owing to the features available for WordPress, you can add the content of your website to your theme. Let’s have a look at each option of the content tab:

1 Page Title

Lets the user to make a choice either to show or hide the Page Title. By default, this is checked.

2 Heading

Displays a list of all the headings from h1 to h6 to choose from, for the page title for user convenience.

3 Typography

Defines the typography of the Page Title by specifying various options like Font Family, Style, Color, Margin and many more as shown below:

“More” facilitates the user to customize Text Formats and Effects for the Page Title.

4 Background

To apply a preferred color, gradient, or image to the background of the content of your WordPress theme. TemplateToaster gives the following options for designing the content of your WordPress themes in a professional style.

You can use the color picker for applying background color.

Color picker-

Custom Gradient-
You can apply a custom gradient in the background. You can have preferred angle, color, and offset choices for creating your own gradient style. You can save the gradient for later use as well.

Browse Images-
You can apply an image in the background of the content. TemplateToaster has an inbuilt stock of free images. You can even browse your custom images.

You can edit the browsed images as TemplateToaster provides an image editor with a dozen of edit options to customize the browsed images.

5 Border

Marks the border around the content area. You can set a preferred style, thickness, radius of edges and color for the content border.

6 Margin

Specifies the margin for each side of the content area.

7 Padding

Specifies the padding for each side of the content area.

8 Add a Row

Adds a row in the content area.

9 Delete a Row

Deletes a row from the content area.

10 Columns

Enables you to select how many columns to keep in a single row.

11 Background

To change the background of the selected row of the content area. You can apply a preferred color, gradient, or image to the background of a row.

12 Border

Customizes a border around the selected row of the content area. You can set a preferred style, thickness, radius of edges, and color for the border of selected row.

13 Shadow

To apply a shadow effect on the border of the selected row.

14 Margin

Specifies the margin for each side of the row.

15 Padding

Specifies the padding of each side of the row.

16 Add a Cell

Adds a cell in the row.

17 Delete a Cell

Deletes a cell from the row.

18 Width

Enables the user to change the width of a selected cell. You can change the width of an individual cell according to the need for your design. To change the width, just select the cell and click this option.

19 Background

Avails you to change the background of a selected cell of the content row. You can apply a preferred color, gradient, or image to the background of a cell.

20 Border

Marks a border around the selected cell of a row. And, you can also set a preferred style, thickness, radius of edges, and color for it.

21 Margin

Specifies the margin for each side of a cell.

22 Padding

Specifies the padding of each side of a cell.

23 Shadow

You can apply a shadow effect in the content background of a selected cell.

More-
With “More”, you can even customize the color, angle, blur, and distance of the shadow effect. Click Here for more details.

4.11. Sidebar Menu

1 Presets

Set of pre-defined layouts for sidebar menu.

2 Hide/Show Sidebar Menu

By default, the sidebar menu is active. If you would want to hide it, just uncheck this option and vice-versa.

3 Add/Edit Menu Item

Gives you the choice to select the page(s) on which you want to or don’t want to show the sidebar menu.

4 Container Properties

Modifies the properties of a submenu container like Margin, Padding, Border and Shadow.

5 Container Background

Applies a preferred color, gradient, or image to the menu’s background.

TemplateToaster features the following extended background options-

Color Picker-
TemplateToaster gives you a color picker to choose a background color. Here are the details of the Color Picker.

Custom Gradient-

You can create custom gradients with preferred angle, color, and offset choices. You can save the gradients as well. See this for more information about creating and saving the custom gradients.

Browse Images-

You can even apply an image in the menu background.TemplateToaster has an inbuilt stock of free images. You can select an image from the stock, or browse your custom images.

You can even edit the browsed images. TemplateToaster has an image editor with a dozen of edit options to customize the browsed images. For details, see this.

6 Header Properties

Customizes the look and feel of the Sidebar Menu’s header. You can set the following properties that are available with header:

Icon-
You can use an icon with the header. When you click this option, you can see a small stock of icons, which are commonly used in the websites. But, if you have your custom icons, you can also browse those icons. An option to change the color of the icon is also available here.

Margin-
Specifies the margin of the header for all four sides.

Padding-
Sets the padding of the header from all sides.

Heading Type-
To select a preferred heading type for the header of the sidebar menu.

7 Header Background

You can change the background of the sidebar menu’s header. You can choose a preferred color, gradient, or image to apply on menu’s background.

TemplateToaster has following options to modify the background-

Color Picker-
You can use a color picker to choose a color from anywhere in the template/website. Here is the full description of the Color Picker.

Custom Gradient-

You can create custom gradients with a preferred angle, color and offset choices. You can save the gradients as well. See this for more information about creating and saving custom gradients.

Browse Images-

TemplateToaster has an inbuilt stock of free images. You can select an image from the stock, or browse your custom images.

You can even edit the browsed images. TemplateToaster has an image editor with a dozen of edit options to customize the browsed images. For details, see this.

8 Header Border

Customizes the border of the menu’s header. You can select a preferred Style of the border, decide its Thickness, set the Radius of the edges, and choose the color.

More-
“More” lets you to explore more options for designing the border interactively. You can set different values of Thickness and Radius for individual side and edge of the border. See this to know more about designing the border.

9 Header Height

Specifies the height of the menu’s header.

More-
“More” is used to specify custom height of the menu’s header.

10 Header Typography

Defines the typography of the sidebar menu’s header. The typography includes options for choosing font, style, font size, font color, font effect, text alignment and text decoration.

More-

With “More”, you can open all the typography options in a single window as shown below. Here are the details.

11 Header Texture

To apply a texture to the background of the menu’s header.

More-
You can customize the transparency of texture with “More”. Click Here for more details.

12 Header Effects

To apply an effect on the background.

More-
You can customize the transparency of the effect with “More”. Click Here for more details.

13 Header Shadow

To apply a shadow effect on the header background.

More-
With “More”, you can even customize the color, angle, blur, and distance of the shadow effect. Click Here for more details.

14 Menu Button Properties

To set the properties of the menu button. You can apply separator between menu buttons, change their height, width, margin padding, specify content margin and more.

15 Menu Button Background

Changes the background of the Menu Buttons. You can separately apply the background for different states of the menu buttons. Such as Normal state, Hover state, and Active State.

16 Menu Button Border

Designs the border of the Menu Button. This option expands a drop down list of options to design the border for different states of a menu button, like Normal, Hover and Active. So, you can differently design the border of a menu button for these three states.

17 Menu Button Typography

Defines the typography for the menu buttons. You can set different text styles for a menu button in Active, Normal, and Hover states.

18 Expand (Submenu)

Avails the user with two choices to expand the submenu Horizontally and Vertically as follows:

Changes the way menu opens up when you hover. If you select this option, the menu will open up in horizontal direction, as shown below.

If you select this option, the menu will open up in vertical direction, as shown below.

19 Open (Submenu) On

Specifies that whether the menu will open on click or on hover.

20 Submenu Layout

Gets active only when you select to expand the menu horizontally. With this, you can choose Mega, Vertical, or Horizontal style for the submenu.

21 Submenu Container

Specifies the properties of the submenu container. You can change the background, border, and shadow effect of submenu container.

22 Submenu Item

Specifies the properties of the submenu items such as height, width, background, border, shadow, and more.

4.10. Widgets/Modules/Block

This tab will display only if you have the sidebar enabled for your design. The name of the widgets tab changes according to the choice made for the CMS as follows:

  • Widgets:- WordPress, Blogger, Magento, WooCommerce, OpenCart, Prestashop
  • Modules:- Joomla
  • Block :- Drupal, HTML

1. Presets

Displays a pre-designed set of styles for widgets/modules/ block. You can choose a pre-designed widget/module/block and modify its look as per need of the template or website design.

2 Container Properties

Customizes the container of the widget/module/block according to your template/website.

Margin :
Specifies the margin of a container for all the sides i.e. top, bottom, left and right.

Padding:
Specifies the padding of the container from all the sides i.e. top, bottom, left and right.

Border:
Customizes the border of a widget/module/block container. See this to know more about designing the border.

Shadow:
To apply a shadow effect to the container. Click Here for more details.

3 Container Background

Applies a preferred color, gradient, or image to the container background.

TemplateToaster provides the following extended background options-

Color picker-
TemplateToaster gives you a color picker to choose a background color. Here is the full detail of a color picker.

Custom Gradient-
You can create custom gradients with preferred angle, color and offset choices. You can save the gradients as well. See this for more information about creating and saving the custom gradients.

Browse Images-
You can apply an image in the background of a Widget/Module/Block container. TemplateToaster has an inbuilt stock of free images. You can browse and even edit those custom images.

As shown below, TemplateToaster has an image editor with a dozen of edit options to customize the browsed images. For details, see this.

4 Header Properties

To set the properties of the Widget header/Module header/Block header as per your preference. TemplateToaster allows to change following properties of a Widget/Module/Block header:

Show Header-
Check the “Show Header” option to display the header of Module/Widget/Block.

Icons-
Display an icon with the Widget/Module/Block header. For this, you can even browse your own icons.

Margin-
Sets the margin of the header for all the sides i.e. top, bottom, left and right.

Padding-
Specifies the padding of the header from all the sides i.e. top, bottom, left and right.

Heading Type-
To choose desired heading type (H1, H2….H6) for the Widget/Module/Block header.

5. Header Background

You can choose a preferred color, gradient, or image for the header background with this option.

TemplateToaster features following extended background options:

Color picker-
TemplateToaster gives you a color picker to choose a background color for the header of a Widget/Block/Module. Here is the full detail.

Custom Gradient-
You can create custom gradients with a preferred angle, color and offset choices. You can save these gradients as well. See this for more information about creating and saving the custom gradients.

Browse Images-
Applies an image in the background of a Widget/Module/Block header. TemplateToaster has an inbuilt stock of free images. You can even browse and edit your custom images.

As shown below, TemplateToaster has an image editor with a dozen of edit options to customize the browsed images. For details, see this.

6. Texture

To apply a texture to the background of a Widget/Module/Block header.

More-
You can customize the transparency of a texture using “More”. Click Here for more details.

7. Effects

To apply an effect on the sidebar background.

More-
You can customize the transparency of the effect with “More”. Click Here for more details.

8. Shadow

To apply a shadow effect to the menu background.

More-
With “More”, you can even customize the color, angle, blur, and distance of the shadow effect. Click Here for more details.

9. Border

Customizes the border of the header. You can change the style of border, thickness of border, radius of the border corners and border color. See this to know more about designing the border.

10. Height

Specifies the height of the header.

More-
“More” to specify a custom height.

11. Typography

Changes the typography of the Widget/Module/Block header. You can select preferred font, style, font size, font color, font effect, text alignment and text direction for the Widget/Module/Block header.

More-
Opens all the typography options in a single window as shown below.

12. Content Properties

To set the content properties of Widget/Module/Block such as Margin, Padding and Border.

13. Background

Changes the background of the content of the Widget/Module/Block.

14. Add Block in Sidebar 1
Manages the number of custom blocks in the first sidebar. You can add as many blocks in the sidebar as you need.

Add-
To add a block, just write the name of the block in the text box and press “Add”.

Delete-
You can delete the block(s) if required. For this, select a block from the drop down menu and press “Delete”.

Note: This option is provided when your template type is “WordPress” or “HTML”.

15. Add Block in Sidebar 2
Manages the number of custom blocks in the second sidebar. You can add as many blocks in the sidebar as you need.

Add-
To add a block, just write the name of the block in the text box and press “Add”.

Delete-
You can delete the block(s) if required. For this, select a block from the drop down menu and press “Delete”.

Note: This option is provided when your template type is “WordPress” or “HTML”.

4.1. Quick Access Toolbar

The Quick Access Toolbar allows you to accomplish some tasks that are very frequently required by the user. The options available in the toolbar are undo, redo, save, open, preview and export.

Undo

Removes all the changes that you have made in the current working session.

Redo

Restores the changes that have occurred since the last Undo.

Save

Saves the changes that you have made in the Theme/Template/Website under the (.ttr) file extension. Ctrl + s can be used for the same results. It is a shortcut to the save option in the file menu.

Open

Opens an existing (.ttr) file on your system. The open option is a shortcut to the Open Tab present in the File menu. The same task can also be performed through Ctrl + o.

Preview

Gives a preview of the current Theme/Template/Website in the browser window. The preview option also facilitates you to select the browser you want to use for the preview by clicking on the small drop-down arrow.

Export

Provides the functionality to export the theme/template/website that you have designed using TemplateToaster. A detailed step by step information is present here.