Back to Top

Category Archives: Design Your Template

4.12.2. Content Tab for Joomla in TemplateToaster

1 Presets

You can choose a pre-designed style for the blog posts.

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

3 Border

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

4 Margin

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

5 Padding

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

6 Texture

To apply a texture to the content background.

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

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

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

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

10 Border

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

11 Margin

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

12 Padding

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

13 Texture

To apply a texture to the background of the post.

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

14 Effects

Applies an effect to the background of the post.

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

15 Shadow

Applies a shadow effect to the background of the post.

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

16 Product Title

Sets the typography of Product and Post Title Containers .

17 Content

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

18 Columns

Specifies the number of product columns on a single page.

19 Featured Posts

To show/hide the Featured Posts.

20 Metadata

Specifies various properties as follows:

Show Metadata- To Show/Hide Metadata
Typography- Sets the typography of Metadata
Title- Defines the text style of Post Title
Title Hover- Text styling of title on hover
Icon- Contains the icons for Author, Date, Post Headline

4. Design Your Template

For designing a theme/template, there are various options which are provided in TemplateToaster. These options are listed under Tab sections as follows:

Quick Access Toolbar

File Menu

General Tab

Body Tab

Container Tab

Header Tab

Slideshow Tab

Menu Tab

Sidebar Tab

Widgets/Modules/Block

Sidebar Menu

Content Tab

Footer Tab

Widget Areas Tab

Elements Tab

Editor Tab

Format Tab in TemplateToaster

Dialog Boxes

4.9. Sidebar Tab in TemplateToaster

1. Layout

Layout option provides you various placement options for Sidebar. You can choose the preferred one from given layout choices.

2. Background

Avails you to choose a preferred color, gradient, or image to apply to the sidebar background. TemplateToaster features the following extended background options –

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

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-
You can apply an image in the background of the sidebar(s). TemplateToaster has an inbuilt stock of free images. You can also browse your custom images.

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

3. Border

Customizes the border of the sidebar (s) by specifying Style, Thickness, Radius and Color .

More –
Click “More” for more border customization options. See this for details.

4. Width

Changes the width of the sidebar(s).

Note: You can set the custom width in pixels if you have chosen Fixed width layout for your template/website. Otherwise, if you with Fluid width layout, you can set custom width in percentage.

More –
You can specify custom width clicking “More”.

5. Margin

On clicking this option, you can set the margin of the sidebar(s) for all sides (i.e. top, bottom, left and right).

More –
You can specify the custom margins using “More”.

6. Padding

Specifies the padding of the sidebar(s) from all the sides i.e. top, bottom, left and right. Padding specifies the white space ( or distance) between the content and the border of the element.

More –
You can specify custom padding with “More”.

7. Texture

Applies a texture to the sidebar background.

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

8. Effects

To apply an effect to the sidebar background.

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

9. Shadow

To apply a shadow effect to the sidebar background.

More-
Customizes the color, angle, blur, and distance of the shadow effect. Click Here for more details.

10. 100% Height

100% height specifies that the height of the sidebar will be equal to the content height.

11. Equal To Content

Equal to content means that the height of the sidebar will be equal to sidebar’s content (Widgets, Modules etc.).

4.8. Menu Tab in TemplateToaster

1 Presets

Displays the pre-designed styles of menu. You can choose a pre-designed menu and modify its look as per needs of your template or website.

2 Edit Menu

To select the pages you want to show in the menu and simply uncheck the pages you don’t want to display.

3. Menu Position

Opens a Sticky Menu Dialog as shown below:

Sticky Menu –
A sticky menu doesn’t disappear when you scroll down the page, unlike normal menu. It sticks to the top of the page as you scroll down the page. Hence, a sticky menu is quick to navigate for the users. TemplateToaster facilitates you to create such a sticky menu for your template/website.

4. Background

To make a selection for preferred color, gradient, or image to apply to the menu background of your template or website. TemplateToaster features the following extended background options –

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

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

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

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

5. Height

Specifies the height of the menu. You can choose the height from given values.

More –
“More” option facilitates you to specify a custom height on your own.

6. Width

Changes the width of the menu with a single click. Three option are available for specifying the width of the menu as:

Full Width – Makes the width of menu equal to the width of the browser window.

Equal To Page Width – Sets the width of menu equal to the page width. This option is activated by default.

Custom Width – Use this to specify a custom width of the menu according to your need.

Note: If you have chosen Fixed width layout for your template/website, you can set custom width in pixels. Otherwise, if you have chosen Fluid width layout, you can set custom width in percentage.

7. Border

Customizes the border of the menu by specifying Style, Thickness, Radius and Color of the border.

More –
“More” is for more border customization options. See this for details.

8. Margin

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

More –
You can specify custom margins using “More”.

9. Padding

Padding specifies the white space (or distance) between the content and the border of the element. You can set top, bottom, left and right padding of the menu using this option.

More –
You can specify custom padding by clicking “More”.

10 Texture

To apply a texture to the menu background.

More –
You can customize the transparency of texture with “More”. Here are the more details.

11 Effects

To apply an effect on the menu background.

More –
You can customize the transparency of the effect using “More”. Here is the detail.

12. Shadow

To apply a shadow effect on the menu background.

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

13 Logo

To apply a logo of your brand on the menu. You can choose the logo from TemplateToaster’s logo stock or you can browse your own.

More –
Click “More” to browse your own logo. You can also link your logo to a URL.

Logo Formatting –
You can do formatting of the Logo. For this, click the Logo and a Format tab will appear as shown below. This format tab provides you the options for changing the alignment, height, width and angle of the Logo.

14 Foreground Image

Inserts a foreground image in the menu to make template/ website more professional and appealing.

More –
You can even link the image to a custom URL with More option. The link can be configured to open in a new window. If needed, you can change the transparency of the image and flip it around X or Y axis.

Foreground Image Formatting –
You can do formatting of the Foreground Image. For this, click the image and a Format tab will appear as shown below. This format tab provides you the options for changing the alignment, height, width and angle of the foreground image.

15 Text Areas

To draw the text areas in the menu. You can add custom text, image, and video in your text areas. Click this option and place the cursor where you want to create the text area. Just drag the cursor and you are done. You can also format the text area

Text Area Formatting –
For text area formatting in the menu, click the text area. On your single click, a Format tab will appear as shown below. This format tab provides you the options for changing the alignment, height, angle, and background of the text area. You can even apply effects and border to the text area.

16. Menu Button Properties

Provides different Menu Button Properties as follows:

Separator-

Separator provides a horizontal or vertical dividing line. It is most commonly used in Menus and Tool bars. In above image, Grey lines in Menu depicts the Separator. You can even customize the separator. For this, many options are provided to choose Style, Thickness and Color.

Height-

You can set the height of the menu according to your preference. You can choose from pre-defined values or you can specify a custom value. Click “More” to specify custom height of menu buttons.

Margin –
Use this option to specify left and right margins of the menu buttons.

Padding –
To apply Padding on Menu buttons from the left and right sides.

Alignment –
Aligns the menu buttons along the menu strip.

Horizontal Alignment-
To choose a preferred horizontal alignment for the menu buttons.

Vertical Alignment-

Aligns the menu buttons vertically in three different positions.

Icon-

To use icons with menu buttons. For this, you can also browse your own icons.

You can change the color of icons for normal menu buttons, on hover, and active menu button for professional look of template/website.

Arrow –

To apply an arrow with a menu item which have a submenu. You can change the thickness and color of the arrow according to your preference.

Texture –
Applies the texture on the menu buttons. You can apply the textures on Normal, Hovered and Active menu buttons seperately.

Shadow –
To apply different shadow effects on the menu buttons.

17. Menu Button Background

To apply different background colors for different states of a menu button.

Normal –
Background color for normal or passive menu button.

Hover –
Background color for the menu button on hover.

Active –
Background color for the active menu button.

18. Menu Button Border

To apply and customize the border of menu buttons. You can craft the different border designs for different states of the menu buttons.

Normal –
Lets you to choose border properties for the normal or passive menu button.

Hover –
Specifies the border properties for the menu button on hover.

Active –
Sets the border properties for the active menu button.

19. Menu Button Typography

Defines the typography of menu buttons. You can set different typography for different states of the menu buttons.

Normal –
To set border properties for normal or passive menu button.

Hover –
Specifies the border properties for the menu button on hover.

Active –
To set the border properties for the active menu button.

20 Hamburger

Gives the latest Hamburger look to the main menu.

21 Open (Submenu) On

Offers you to make a choice to : open sub menu on Click or open submenu on Hover.

22 Submenu Layout

TemplateToaster supports to make three types of submenus- Mega Menu, Vertical Menu and Horizontal Menu.

Mega –
Creates a Mega menu for your template/website. Like this

Vertical –
Creates a vertical menu for your template/website. Like this

Horizontal –
Produces a horizontal menu for your template/website. Like this

23 Design
This option is enabled when Hamburger is checked. It is used to set hamburger icon look that whether it will be Text, Icon or Text & Icon.

Text –

Icon-

Text & Icon-

24 Toggle
Sets the different properties like Background, Border, Typography, Line, Alignment etc. at all the states Normal, Hover and Active.24. Toggle

25 Slide
Specifies that how to open the menu- Slide Down, Slide Left, Slide Right, Pop up.

26. Submenu Container

You can even customize the look and feel of the submenu container. Click this option to customize the background of submenu container, to design its border and to apply a shadow effect on it.

27 Submenu Item

You can change the properties of Submenu Item like you can do with Menu Button.

Height –
Increases/ decreases the height of the submenu items.

Width –
Increase/ decreases the width of the submenu items.

Background –
Changes the background color of the submenu items.

Shadow –
Applies the shadow effect to the submenu items.

Hover Border –
Changes the look of border when the mouse is hovered over submenu item.

Hover Shadow –
Applies the shadow for the Hover state of the submenu item.

Separator –
Shows separators in the submenu items.

Margin –
Specifies the margin to the submenu items according to your need.

Padding –
Applies a padding to the submenu items according to your need.

Icons –
Displays icons with the submenu buttons.

Typography –
Changes the typography of the submenu buttons.

4.7. Slideshow Tab in TemplateToaster

1 Activate/ Deactivate Slideshow

Check the slideshow box to activate/deactivate the slideshow on template/website.

2 Add a Slide

Adds a new slide.

3 Delete a Slide

Deletes a slide.

4 Previous Slide

Moves to the previous slide.

5. Next Slide

Moves to the next slide of the slide show.

6. Slideshow Position

To position the slideshow. Position of slideshow can be changed with respect to the header and menu. So, there are three options for choosing slideshow position as :

  • Above – Moves the slideshow above the header.
  • Middle – Places the slideshow between the header and the menu.
  • Below – Moves the slideshow below the menu.
  • Apart from these options, there is one more option. That is –
  • Menu Inside Slideshow – The menu will move inside the slideshow on choosing this option.

7. Transition Effect

Configures the transition effects and settings for the slides.

Apply On All Slides-
You can choose an effect and configure the settings for an individual slide or for all the slides at a time. By default, this is checked. You can uncheck this option if you want to apply different effects on individual slides.

Transition Duration- Selecting Transition Duration option, you can set the transition duration for the slides. It specifies how many seconds or milliseconds a transition effect takes to complete.

Transition Begin Time- This enables you to define the transition begin time for the slides. It specifies how many seconds or milliseconds to wait before the transition effect of next slide will start.

8. Button

Displays the slideshow buttons on the slides. You can also customize its look and feel. For this, click the button and a Format tab will appear, as shown below. This tab allows changing button alignment, background, height, width, border and more.

9. Pagination

To add/delete the slideshow pagination. By default, slideshow pagination is active. You can deactivate it simply by clicking this option. Moreover, you can customize the look of the pagination. For this, click the pagination bullets and a Format tab will appear. You can then change the alignment, angle, and style of the pagination.

10. Background

To choose a preferred color, gradient, or image to apply to the slide background of your template or website. TemplateToaster features the following extended background options –

Color picker-
TemplateToaster gives you a color picker to choose a background color. If you want, 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 the custom gradients.

Browse Images-
You can apply an image in the background of the slideshow. For this, TemplateToaster provides an inbuilt stock of free images. You can browse your custom images too.

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

11. Height

Changes the height of the slideshow. You can even make the height of the slideshow fit to screen.

Fit To Screen –
If you choose “Fit To Screen”, the slideshow will automatically adjust its height according to the browser viewport.

More –
You can specify custom height by clicking “More”.

12. Width

Specifies the width of the slideshow . Three options are available for specifying the width of slideshow as:

Full Width – Sets the width of the slideshow equal to the width of browser window.

Equal To Page Width – Makes the width of the slideshow equal to the page width. This option is activated by default.

Custom Width – Use to specify the custom width of the slideshow as per your need.

Note: If you have chosen Fixed width layout for your template/website, you can set custom width in pixels. Otherwise, if you have chosen Fluid width layout, you can set custom width in percentage.

13. Border

Customizes the border of the slideshow. You have Style, Thickness, Radius and Color options to style the border.

More-
Avails you with more border customization options. See this to know the usage of every option given for designing the border.

14. Margin

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

More –

You can specify custom margins by using “More”.

15. Texture

To apply a texture to the slide background.

More –
You can customize the transparency of texture with “More”, Click here for more details.

16. Shadow

To apply a shadow effect to the slide background.

More –
“More” is to customize the color, angle, blur, and distance of the shadow effect. Click Here for more details.

17. Effects

To apply an effect to the slide background.

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

18. Image

Sets an image on the slide foreground.

More –

With “More”, you can apply effects even on the foreground image. Also, you can link the image to a custom URL. The link can be configured to open in a new window. If needed, you can even change the transparency of the image and flip it around X or Y axis.

Foreground Image Formatting –
You can do the formatting of the Foreground Image. For this, click the image and a format tab will appear, as shown below. This format tab provides you the options for changing the alignment, height, width, and angle of the foreground image. Also, it gives the options for applying transition, slide, and easing effects on the foreground image.

19. Text Areas

To draw text areas on the slides. You can add custom text, image, and video in your text areas. Double click on the text area to modify its dimensions, add text, add a background image, color and lot more. Text formatting can also be done.

Text Area Formatting –
You can format the Text Area that you draw in the slideshow. For this, click the text area and a format tab will appear, as shown below. This Format tab provides you the options for changing the alignment, height, angle and background of text area. Alike foreground image, you can apply transition effects, slide effect and easing to the text area.

20. Logo

Applies a logo of your brand on the slideshow . You can choose the logo from TemplateToaster’s logo stock or you can browse your own.

More –
Click” More” to browse your own logo. You can also link your logo to a URL.

Logo Formatting –
You can do formatting of Logo that you put on the slideshow. For this, click the Logo and a format tab will appear, as shown below. This Format tab provides you the options for changing the alignment, height, width, and angle of the Logo.

4.6. Header Tab in TemplateToaster

Presets

See pre-designed styles of the header. You can choose a pre-designed header style and modify its look as per needs of your template or website.

Header Position

Changes the header position. Header can be placed above or below the menu, or place menu inside the header. Even if you don’t want any header then “No Header” option is also available.

Background

Use to apply a preferred color, gradient, or image to the header background of your template or website. TemplateToaster features the following extended background options –

Color picker- You can make use of a color picker to choose a background color. Here is the full description of it.

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-

You can apply an image in the background of the header. TemplateToaster has an inbuilt stock of free images. You can browse and even edit those custom images.

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

Height

Changes the height of the header. You can even make the height of the header fit to screen.

Fit To Screen –

If you choose ” Fit To Screen” option, the header will automatically adjust its height according to the browser viewport.

More –

You can specify custom height by clicking “More”.

Width

Changes the width of the header with. Three options are available for specifying the width of the header:

Full Width-

Sets the width of the header equal to the width of the browser window.

Equal To Page Width-

Makes the width of header equal to the page width. This option is activated by default.

Custom Width-

Allows you to specify the custom width of the header as per your need.

Note: If you choose Fixed width layout for your template/website, you can set the custom width in pixels. Otherwise, if you go for the Fluid width layout, you can set the custom width in percentage.

Border

Helps to customize the border of the header. You can set Style, Thickness, Radius, and Color options according to your requirements.

More –

“More” is for more border customization options. See this to know the usage of every option given for designing the border.

Margin

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

More – You can specify custom margins using “More”.

Texture

Applies a texture to the header background. You can choose the texture from the given patterns.

More

Even you can customize the transparency of texture with “More”. Here are the more details.

Effects

Applies an effect to the header background.

More – You can even customize the transparency of the effect with “More”. Here are the details.

Shadow

Applies a shadow effect to the header background.

More

You can even customize the color, angle, blur, and distance of the shadow effect with “More”. Here are the more details.

Image

In addition to the header background image, TemplateToaster facilitates you to insert foreground image(s) in the header to make template/website more professional. You can apply an image on the header foreground using this option.

More –

With “More”, you can even link the image to a custom URL. The link can be configured to open in a new window. If needed, you can change the transparency of the image and flip it around X or Y axis.

Foreground Image Formatting –

You can do formatting of the Foreground Image. For this, click the image and a format tab will appear, as shown below. This format tab provides you the options for changing the alignment, height, width and angle of the foreground image. Even you can Flip the X and Y coordinates of the image as per your need.

Text Areas

Draws the text areas on the header. You can add custom text, image, and video in your text areas. Double click on the text area to modify its dimensions, add text, add the background image, color and a lot more.  Text formatting can also be done.

Text Area Formatting –

You can do formatting of Text Area. For this, click the text area and a format tab will appear, as shown below. This format tab provides you the options for changing the alignment, height, angle and background of the text area. You can even apply effects and border to the text area.

Add Video

Adds a Video on the header to give a modern and attractive look to your website/template. TemplateToaster also provides the Edit Video, Play/Pause, Mute, Repeat options for more ease to the user.

Title

Use this option to show or hide the website title in the header. By default, this is checked.

Title Formatting –

You can do formatting of the Title text. For this, click the Title and a format tab will appear, as shown below. This format tab provides you the options for changing the alignment, angle, typography and heading style ( H1, H2, H3…H6) of the Title.

Slogan

Use this checkbox, to show or hide the website slogan on the header. By default, this is unchecked.

Slogan Formatting –

You can do formatting of Slogan. For this, click the Title and a format tab will appear as shown below. This format tab provides you the options for changing the alignment, angle, typography and heading style ( H1, H2, H3…H6) of Slogan.

Logo

Applies the logo of your brand in the header. You can choose the logo from TemplateToaster’s logo stock or you can even browse.

More –

“More” is to browse your own logo. You can also link the logo to a URL.

Logo Formatting –

You can do formatting of Logo. For this, click the Logo and a Format tab will appear as shown below. This format tab provides you the options for changing the alignment, height, width and angle of the Logo.

Social Icons

To configure a social media account in the header section of your template or website. You can choose the icons from the inbuilt icon stock or you can browse your own custom social media icons.

Social Icon Formatting –

You can easily format a Logo. For this, click the applied icon and a Format tab will appear as shown below. This format tab provides you the options for changing the alignment, height, width and angle of the icons.

4.5. Container Tab in TemplateToaster

Background

Use this option to set your preferred color, gradient, or image to the page background of your template or website. TemplateToaster offers the following extended background features –

Color picker

TemplateToaster gives you a color picker to choose a color for the background. Here is the complete description, for your reference.

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 the custom gradients.

Browse Images

You can apply an image to the background of the template body. TemplateToaster has an inbuilt stock of free images. You can also browse your custom images.

You can even edit the browsed images with help of TemplateToaster Background Image Editor that gives a dozen of edit options to customize the images. For details, see this.

Layout

TemplateToaster gives two choices to set the layout of the page. These are –

Fixed Width Layout –

In this layout, the dimensions of the site is bound to a certain number of pixels (px). You can select element width in pixels. Header, Menu, Slideshow, Sidebar, and Footer are the elements whose width is bound to pixels.

Fluid Width Layout –

In this layout, the dimensions are calculated in percentage (%). If you choose fluid width layout of your template/website, you can select the width of Header, Menu, Slideshow, Sidebar, and Footer in percentage.

Border

With ‘Border’ option, you can customize the border of the page. You can use Style, Thickness, Radius and Color options to customize it.

More –

“More” is for more border customization options. See this to know the usage of every option given for designing the border.

Width

Use this to change the width of the page.

More –

Specifies the custom width of the page.

Margin

With this, you can select top and bottom margins of the page.

More –

Specifies the custom margin values.

Texture

Use this to apply a texture to the page background.

More –

You can customize the transparency of texture with “More”. Here are the details.

Shadow

Applies a shadow effect to the page background.

More –

To customize the color, angle, blur, and distance of the shadow effect. Here, you can get more details.

Effects

To apply an effect to the page background from the available collection of effects.

More

To customize the transparency of the effect. Here are the more details.

4.4. Body Tab in TemplateToaster

Background Applies a preferred color, gradient, or image to the body background of your template or website. TemplateToaster features the following extended background options:

Color picker

TemplateToaster gives you a color picker to choose a color for the background. Here is the full description, for your reference.

Custom Gradient

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

Browse Images

You can apply an image to the background of the template body. TemplateToaster offers an inbuilt gallery of free images. You can browse your custom images too.

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

Effects

In Effects Group, you can make Texture and Effects settings.

Texture-

To apply the texture to the background of the body.

More

You can customize the transparency of texture by clicking “More”. Here are the more details about texture.

Effects

Use this to apply the effects to the body background.

More –

You can customize the transparency of the effect by clicking “More”. Here are the details.

Type

Avails you with two different settings for the body background as:

Fixed

Choosing the Fixed type, the body background will remain fixed with respect to browser viewport.

Scroll

Choosing scroll type, the body background will scroll along the elements in browser viewport.

Scroll Up

Shows a scroll up button on the template or website. Many preset designs of scroll up button are available, even you can browse more if required.

More –

To customize the design of scroll up button. For more details about customizing the Scroll Up button, click here.

4.3. General Tab in TemplateToaster

Templates

Displays a gallery of sample templates. You can choose any of these or can access more templates at your display by clicking ‘More Templates’.

Scheme

When you click the ‘Scheme’ option, a Color And typography window will open. From this, you can select any color scheme out of the hundreds or can customize one of your own. Similarly, you can choose a font typography that will reflect its effects in main window content as you hover the list of typography. Even you can add new Color scheme and font typography, in addition, u can edit the existing schemes too. For further details, please refer Choose Color Scheme & Typography options section.

Layout

The window shown below will open when you click Layout and from here, you can select any layout for template/website like Singe Item, Double Item, Triple item as per your need.

Sidebars

From Layout Group, click Sidebars to select sidebars for your template or website.Sidebars are vertical columns along the main content area of the template or website. You can place widgets/modules/blocks in the sidebars according to your need.

CMS

You can switch from one template type to another with a single click on the CMS. For example, you can switch from WordPress to Joomla or any other type of CMS from the list shown below.

Add/Edit Page

In WordPress, HTML, and WooCommerce; the Add/Edit Page dialog box will open when you click this option. From here, you can add/edit any desired page of your template or website.

Add/Edit PageTemplate

Use this to add/edit desired page templates with Name and Title particulars in WordPress. A page template defines what design elements surround the content of a page (i.e. header, sidebar, footer etc).

CSS

Avails you to apply Custom Styles to your theme by appending the code in a style.css file.

JavaScript

From Editors group, select JavaScript to add Custom Javascript to your theme that embeds the scripts in a custom.js file.

PHP

Facilitates you with a PHP editor on a single click that will append the written code within the functions.php file.

Complete

A Website Typography wizard will open when you click Complete. Select the item where you want to apply the typography changes – Headings (H1 to H6), Text (i.e. Paragraphs) or Complete and then choose the element from the left panel. Choose font, font style, font size, font color, alignment, and effects from the options lying on the right side of the wizard. Click “Save” to apply the changes you made. For complete information about this, you can see Website Typography.

Favicons

Use to apply a Favicon on your website. TemplateToaster provides a huge collection of pre-designed Favicons from which you can make a selection. You can also browse your own favicon with a single click on ‘More’.

Website Preferences

Facilitates the user to set preferences for the website. A Preferences dialog will help the user to make following settings:

-CSS Prefix

Adds the desired CSS rule to every matching style tag of a class and ID of the exported template/theme/ site.

-Author name

Edits the name of the author to include your name.

-Author URL

Displays the homepage URL of theme author.

-License

Provides the license for your theme.

-License URL Provides the Uniform Resource Locator (URL) for the license.

4.2. File Menu in TemplateToaster

New

Gives you the choice to open a new website, a new page, or a new page template.

Open

With this option, you can open any existing TemplateToaster project (.ttr). You can also use Ctrl + o shortcut to open an existing .ttr file.

Save

Saves your TemplateToaster project (.ttr). You can also use Ctrl+ s shortcut to save your file. You should frequently save your work to avoid any accidental loss of data.

Save As

Avails the user to save the same (.ttr) file with a different name and/or at a new location. Basically, it provides the functionality of producing multiple copies of the same (.ttr) file.

Export

Exports the template to install on your CMS (WordPress, Joomla, Drupal, Magento Prestashop, Blogger). You can export the template into a Zip file or a folder.

Preview

Gives a preview of your template/website in the browser or you can use Ctrl + p shortcut, that will also serve the same purpose.

Preview RTL

Gives the preview of your template/website in RTL format (for Right to Left languages like Arabic).

Settings

Helps the user to make some important Application and Font Settings. When you click Settings, the following window will open:

• Select Your Language

Template Toaster offers you a range languages top choose from, in which you are comfortable to work. Such as Arabic, Danish, Dutch, English, French, German, Spanish, Turkish and much more.

• Show export information dialog

If you want to view the Export Template Dialog Box, Check it. By default, this is checked.

• Use hardware graphics acceleration if available

Uncheck this option if your application is running too slow. This could be due to bad graphics drivers.

• Edition

It displays the type of TemplateToaster Edition you choose at the time of Installation. Standard Edition allows you to create templates but with limited features. Professional Edition enables advanced functions that boost productivity when working with large and complex websites. By using this, you will be able to use all the extended features of TemplateToaster.

• Web Safe Fonts

You might know that operating systems have a pre-installed set of Fonts. A user can’t see the fonts of a particular system on aother system. But, there are some fonts which can be visible by the user on all types of operating systems. Those fonts are called Web safe fonts and are recommended by the seasoned designers. By checking this option, you can avail web safe fonts.

• System Fonts

You can use any font that is supported by Windows if you select this option.

• Enable Font Service

If checked, a font cache will be maintained.

• Clear Font Cache

This is used to clear the old font cache.

Help

Redirects you to the online tutorial of WordPress, Joomla, Drupal, and rest of the CMSs supported by TemplateToaster.

Activation

Helps the user to enter the activation code in input field to activate the software.

Updates

Provides the information about latest update of TemplateToaster if available.

About

Displays your license information like Version, Mode, Activation key etc.