Use this to add texture to the background. To try different textures, hover your mouse pointer on different textures, and then select the best suited texture for the background. Use texture to smoothly edit the colour gradients in the background image. It also helps in highlighting the typography by layering texts and important texts.
2 Repeat
Repeat -X-
It will repeat the texture in the direction of the X-axis.
Repeat -Y-
And it will repeat the texture in the direction of the Y-axis.
3 Transparency
Use this to select the transparency level of the texture.
4 OK
Simply click on the OK button to apply the texture.
5 Cancel
Click on the Cancel button to drop the changes and close the dialog.
1 Stock Images
You can choose any image from the free stock options by TemplateToaster.
2 Browse Image
Use this option to browse your system and quickly apply your own image(s) in the background.
3 Delete Image
This will delete the image which you’ve browsed from your system.
4 Stretch
Provides you with different settings to handle the display of an image at the desired location. The available choices are as follows:
None-
The image will have or resume its original size, if you select “None”.
Fill-
The image will be resized to fill the destination dimensions. The aspect ratio is not preserved.
Uniform-
The image will be set to fit the destination dimensions while also preserving its native aspect ratio.
Uniform to Fill-
The image will resize to fill the destination dimensions while preserving its native aspect ratio. If the aspect ratio of the destination rectangle differs from the source, the source content is clipped to fit in the destination dimensions.
5 Horizontal Alignment
Provides the following choices to align the background image horizontally as:
Left – Aligns the background image to the left side.
Center – Aligns the background image to the center.
Right – It aligns the background image to the right side.
6 Vertical Alignment
Includes three choices to vertically align a background image as follows:
Top – Aligns the image to the top.
Center – Sets the image in the center.
Bottom – Aligns the image to the bottom.
7 Fallback Value
Use this to choose a fallback color. Fallback color specifies the color for cases when the browser doesn’t support RGBA colors.
8 Repeat
Repeat X-
You can repeat the image in the direction of the X-axis.
Repeat Y-
Lets you repeat the image in the direction of the Y-axis.
9 Transparency
You can select the transparency level for the background image with this option
10 Save
Press the “Save” button to apply the background image.
This is such a cool option that lets you pick a desired colour from anywhere. Simply use the dropper to pick any colour.
2 ScRGB
ScA-
It is used to set ScRGB alpha channel value of the colour.
The alpha channel of a Colour structure determines the amount of transparency the Colour has. An alpha value of 1 indicates the Colour is completely opaque and a value of 0 indicates the colour is completely transparent. So you can choose according to the transparency needed.
ScR-
Sets ScRGB red channel value of the colour.
ScG-
Specifies the ScRGB green channel value of the colour.
ScB-
Sets ScRGB blue channel value of the colour.
3 sRGB
It stands for “Standard RGB” (and RGB stands for Red-Green-Blue”). All the colours you see on your computer display, are a mix of red, green, and blue colours which is the sRGB.
4 Hexadecimal
Allows you to input any valid hexadecimal value of a colour.
5 Transparency
You can also set the transparency for the colour according to your requirement.
You can use this option to create a new custom typography scheme. By using the Custom fonts dialog box you can easily create a new custom typography scheme as you want.
1 Google Web Font
Use this to display a drop- down list of the Google web fonts that can be used on web pages without any crash limitation. You can select any of these.
Browse-
You can also browse more fonts by clicking on the Browse button. A window will open as shown below:
From here you can directly move to the Google fonts website to choose your preferred web font. And enter the name of the selected font in the given text box and choose script type. Lastly you need to Save it. It will be added to the Google web fonts list of TemplateToaster.
2 Custom Fonts
It is a drop-down list of custom fonts and you can select any preferred font of your choice. You can even browse your own custom fonts by using the Browse button that will help you find the required file that you want to upload. And it will be added to the current list of fonts.
3 System Fonts
This shows a drop- down list of primary fonts that are available with the operating system. You can choose any font as you need.
4 Add Font
Use this option to add your selected font style to the main typography list.
You can make your own new colour scheme by choosing preferred colours as you require. This is an amazing option as it lets you set the look and feel of the template/theme or website design as you want.
2 Color Scheme Name
Give a specific name to your colour scheme in this text field.
3 Save
You can create as many colour schemes as you want. And save with their unique names using this option. Thus you can use these colour schemes later as well.
4 Close
Click on the close button to drop the changes and close the dialog box.
A dialog box is a small area on the screen in which you are prompted to provide information or select commands as you require. TemplateToaster provides the following dialog boxes:
This ‘Format Tab’ will open when the user Double Clicks on the Designer text in the Footer section. It includes various options to style the Designed By element of the footer as follows :
1 Left Alignment
Allows the user to set the X coordinate of the Designed By element from Left side.
It also provides the direct positioning of the element in three different ways as shown below:
Horizontal Left
Horizontal Center
Horizontal Right
2 Top Alignment
You can specify the Y coordinate of the element by taking Top as origin.
It also provides three different positions to set the element directly as shown below:
Vertical (Top, Center, & Bottom)
3 Link Typography
Use this to define the typography of the Designed by Link by specifying the Style, Font Size, Color, Text Decoration, and much more.
4 Text Typography
You can customize the Designed by Text by specifying the Font Family, Colour, Effects, Text Decoration, and much more.
5 Link Preferences
Use this option to specify the Footer Link of the page that you want to open when a user clicks on this Designed by element. In addition, you can also specify whether the link will open in the same window or should use the New window in the Footer OpenIn field. These are the two ways you can select link preferences.
The “Editor Tab” offers a number of editing tools to modify and customize the content in WordPress, HTML, Prestashop, Magento, and many other CMSs before exporting the theme/template.
1 Undo and Redo
These are the editing commands that you can use to make your task easier. Undo (Ctrl+z) reverses the most recent edit you have done. This control helps the user to restore the last deleted text. Redo (Ctrl+y) can restore the changes that are undone using Undo. For example, if some text was added, Undo will remove it. While the Redo command will add it again.
2 Font
You can use this option to browse fonts from here. And also choose any type of font for your template/ theme or website as TemplateToaster supports Google Fonts, System Fonts, and Custom Fonts.
3 Font Style
TemplateToaster supports dynamic font style. Hence, you can select a preferred style for your chosen Font.
4 Font Size
Select the text and use these options to increase/ decrease the size of the selected text.
5 Font Tools
You can also customize the style and colour of the text with font tools.
6 Paragraph Formatting Tools
These tools allow you to align the text, set the indentation, specify line-height, margin and draw a horizontal outline below the text as required.
7 Image
Use to to add a custom image (s) in the content box. Place the cursor where you want to insert the image and then click on this button. For comprehensive knowledge about adding an image, view this.
8 Video
Use this option to add a YouTube video(s) in the content box. Place the cursor where you want to insert the video and then click on this button. For more details about adding a video, view this.
9 Button
Use this to insert the button. Place the cursor where you want to place the button and then click on this option. You can personalize the button according to your design with Elements Tab. See this, for complete information.
10 Contact Form
You can add up a contact form in your template/ theme or website. Place the cursor where you want to place the contact form and then click on this option. You can even customize the typography of labels and can select the Button Type that is to be used in the form. See this, for more details.
11 Hyperlink
Lets you add a link that redirects to another website or internal page of the website. Select some text, click the Hyperlink button and enter the valid URL and then press OK. Here are the more details.
12 Table Options
With the Table options you can add or delete the tables. And, you can also add/delete rows and columns in the selected table. When you click “Table” option, following dialog box opens up, from which you can choose formatting options.
The Elements Tab contains the options for designing different user interface elements for the template/theme or website such as Button, Input Field, Pagination, Breadcrumb and more. Let us go through all the given options and how you can use them to change the look and appeal of your design.
1 Button
When you click on the Button option it displays a dropdown list as shown below.. All the options are explained as follows:
Presets-
With the Presets option, you can find a set of predesigned buttons to choose from. You can select any predesigned button for your template/theme or website and can change its look and feel as per your need. For this, you can select following options given by TemplateToaster:
Background-
You can also change the background for the buttons and set it as Normal and Hover states. You can apply colour, a gradient, or an image in the background of the button.
Border-
Use this to design the border of the buttons. For a more professional look and feel of the buttons, you can choose different borders also for Normal and Hover states.
Typography-
Lets you change the text style or typography of the buttons. You can apply different text styles on buttons as Normal and Hover states.
Texture-
You can apply a texture effect to the background of the buttons.
Padding-
Lets you specify the padding of the footer from all the sides.
Primary/Success/ Info/ Warning/ Danger-
You can design five types of BOOTSTRAP buttons with TemplateToaster: Primary, Success, Info, Warning, and Danger. For designing these buttons, Template Toaster offers Background, Text Colour, and Border Colour options.
Large Size/ Small Size/ Extra Small-
Also Modifies the Font size of all size buttons ( Large, Small and Extra Small). You can easily change their border radius and padding as well.
2 Input
Input is a type of form control that BOOTSTRAP offers. You can design this control with the following options.
Presets-
Lets you select a preset style and then also modify its look and feel.
Background-
Use this to modify the background of an Input box. You can set different backgrounds of the box for Normal and Focused states.
Border-
Use this to design the border of an Input box. You can design different borders of the box for Normal and Focused states.
Typography-
Lets you define the preferred text style for an Input box. You can set different text styles for Normal and Focused states of the Input box.
Shadow-
Lets you apply a shadow effect to the input box. You can also set different shadow effects for the Normal and Hover States.
Height-
You can also specify the height of the Input box. With the “More” option you can even specify the custom value for the height.
Width-
Use this to set the width of the Input box. With the “More” option you can also specify the custom value for the width also.
3 Pagination
Use this for styling the pagination of your template/website.
Presets-
Allows you to select a preset style of pagination and then modify its look and feel.
Background-
Use this option to change the background of the pagination for its different states. Just select the state of pagination for which you want to change the background and apply a preferred colour, a gradient, or an image on the background of the pagination.
Border-
You can design the border of pagination using this option. The border can be designed differently for the Normal, Hover and Active state of pagination.
Typography-
Lets you define the preferred text style for the pagination. You can also set different text style for Normal, Hover and Active state of the pagination.
Shadow-
Use this option to apply a preferred shadow effect to the pagination. Also you can apply different shadow effects for the Normal, Hover and Active states.
Margin-
Lets you specify the margin of the pagination.
Padding-
Use this to specify the padding of the pagination.
4 Breadcrumb
Lets you design the breadcrumb navigation of your template/ website just the way you want.
Presets-
You can choose a preset style of breadcrumb navigation and then modify its look and feel as you want.
Separator-
Use this to select a separator icon for breadcrumb.
More-
The “More” option allows you to specify a custom breadcrumb icon.
Background-
Use this to change the background of a breadcrumb. You can also apply a preferred colour, a gradient, or an image to the background of breadcrumb.
Border-
For designing the border of breadcrumb as per your need.
Typography-
You can also define the text style of the breadcrumb in the Normal, Hover and Active states.
Shadow-
Use this to give a shadow effect to the breadcrumb.
Margin-
Lets you set out the margin of a breadcrumb.
Padding-
Use this to add up the padding of a breadcrumb.
5 Block Quote
Use this option to design the Block Quote element of your template/ theme or website design.
Background-
Lets you modify or change the background of a Block Quote. You can apply a preferred colour, a gradient, or an image to its background..
Border-
You can design the border of a Block Quote as per your need.
Is Default:
Use this to set or apply a default style.
Typography-
You can define the text style of a Block Quote element. Also you can choose the Font from preferred Font Family, choose a style for the Font, and much more.
Shadow-
Lets you apply a shadow effect to the Block Quote.
Icons-
You can also select the preferred icons for a Block Quote. And even browse your own custom icons and set preferred colour to those icons.
Margin-
Lets you specify the margin of a Block Quote.
Padding-
Use this to specify the padding for a Block Quote.
6 Label
TemplateToaster allows to customize six BOOTSTRAP Labels, which are: Default, Primary, Success, Info, Warning and Danger. You can customize their background and text style in Normal and Hover states.
7 Alert
You can customize the BOOTSTRAP Alert messages. Lets you change the Background, Border, and Typography of each type of an Alert message.
8 Badges
With this option, you can customize the BOOTSTRAP badges used in the template/ theme or website design. You can also change the background of a badge, design its border, and change its typography as well.
Background-
In addition, you can apply different backgrounds to the badges for Normal and Active states. Also you can set a preferred colour, a custom gradient or a custom image. Moreover choose a gradient and any image from the free stock of TemplateToaster.
Border-
Lets you design the border for badges with available options.
Typography-
You can also change the text style of badges for Normal and Hover states.
9 Line
Use this to design the Lines used in your template/ theme or website. You can choose Style, Thickness, and Colour of the line as you desire.
Is Default-
Check this option to apply the default style.
10 Headings
Use this to select the typography of Headings from H1 to H6 including colour, font size, alignment etc.
11 Paragraph
Lets you define the typography for the paragraphs.
12 Lists
Use this to set the typography for both the ordered and unordered lists.
13 Links
Sets the typography for links on the Active, Normal and Hover states.
14 Table
You can also specify the typography of any table inserted on the page.
15 Check Box
Lets you modify the appearance of the default checkbox as you need.
Is Default-
Make sure to check this option if you want to apply the default style.
Style-
You can choose from two different Style options as- Check and Fill.
Outer Border-
Use it to design the outer border of the checkbox.
Outer Shadow-
Lets you apply a preferred shadow effect to the checkbox.
Inner Fill/ Outer Fill-
Lets you add or change the checkbox fill. You can choose different colour/ gradient/ or image for inner and outer fills.
16 Radio Button
Use this to modify the look and feel of a radio button.
Is Default:
Check this option to apply a default style.
Outer Border-
Lets you design the outer border of a checkbox.
Outer Shadow-
You can apply an outer shadow to the checkbox.
Inner Fill/ Outer Fill-
Use this to add or change the Radio Button fill. Also you can choose a different colour/ gradient/ or image for inner and outer fills.
