Category Archives: Design Your Template

4.18.3. Color Picker Dialog Box

1 Dropper

Enables you to pick a desired color from any location.

2 ScRGB

ScA-
It is used to set ScRGB alpha channel value of the color.
The alpha channel of a Color structure determines the amount of transparency the Color has. An alpha value of 1 indicates the Color is completely opaque and a value of 0 indicates the color is completely transparent.

ScR-
Sets ScRGB red channel value of the color.

ScG-
Specifies the ScRGB green channel value of the color.

ScB-
Sets ScRGB blue channel value of the color.

3 sRGB

It stands for “Standard RGB” (and RGB stands for Red-Green-Blue”). All the colors you see on your computer display, are made up of various mixtures of red, green, and blue colors.

4 Hexadecimal

Facilitates you to input any valid hexadecimal value of a color.

5 Transparency

You can set the transparency for the color according to your requirement.

4.18.4. Gradient Dialog Box

1 Gradient Presets

TemplateToaster offers some pre-designed (or preset) gradients. You can choose any from the preset gradient fills.

2 Gradient Type

Linear gradient shades are in a straight line from the starting point to the end point.

Radial gradient shades are in a circular pattern from the starting point to the end point.

3 Color

Provides the second color apart from the background color to form a gradient.

4 Offset

Offset is used to set the location of the color stops.

5 Angle

Specifies the angle between the two colors. You can specify a custom angle to create your own gradient style.

6 Save Gradient

To save your custom gradients.

4.18.5. Background Images Dialog Box

1 Stock Images
You can choose any image from the stock of TemplateToaster.

2 Browse Image

To browse your system to apply your own image(s) in the background.

3 Delete Image

Deletes an image which you’ve browsed from your system.

4 Stretch
Avails you with different settings to handle the display of an image at a destination location. The available choices are as following:

None-
The image will preserve 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 set to fit the destination dimensions while 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 left side.

Center – aligns the background image to the center.

Right – 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 – aligns the image in the center.

Bottom – aligns the image to the bottom.

7 Fallback Value

To choose a fallback color.

8 Repeat

Repeat X-
Repeats the image in the direction of X-axis.

Repeat Y-
Repeats the image in the direction of Y-axis.

9 Transparency

You can select the transparency level for the background image with this.

10 Save

Press “Save” button to apply the background image.

11 Cancel

Press “Cancel” button to drop the changes.

4.18.6. Texture Dialog Box

1 Texture Options

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

2 Repeat

Repeat -X-
It will repeat the texture in the direction of X-axis.

Repeat -Y-
It will repeat the texture in the direction of Y-axis.

3 Transparency

You can select the transparency level of the texture.

4 OK

Press OK button to apply the texture.

5 Cancel

Press Cancel button to drop the changes and close the dialog.

4.18.7. Effects Dialog Box

1 Special Effect

To apply different types of the special effects to the background. Special Effects are like textures with some different set of effects. To preview different special effects, hover your mouse cursor on different special effects, and select the best suited special effect for the background.

2 Transparency

You can select the desired transparency level of the texture.

3 OK

Press OK button to apply the texture.

4 Cancel

Press Cancel button to drop the changes and close the dialog.

4.18.8. Shadow Dialog Box

1 Shadow

To apply shadow effect, select one from the listed shadow effects or you can even personalize the features of shadow by using color, blur, angle, and distance.

2 No Effect

If you don’t want to apply any shadow effect, select No Effect.

3 Shadow Effects

You can choose a shadow effect from these options.

4 Glow

You can choose any from these glow effects.

5 Color

To specify a color for the shadow.

6 Blur

You can blur the shadow using this slider or numeric up down.

7 Angle

Specifies an angle between the element and the shadow. You can use the slider or numeric up down to change the value of an angle.

8 Distance

Changes the apparent distance between the element and the shadow. You can use the slider or numeric up down to change the value of the distance.

9 OK

Press OK button to apply the texture.

10 Cancel

Press Cancel button to drop the changes and close the dialog.

4.18.9. Border Dialog Box

1 Select Border Style

To choose a suitable style of the border.

2 Select Border Thickness

Changes the thickness for all the sides of the border. Uncheck “Select All”, if you want to set different values for each side of the border.

3 Change the Radius of Corners

Specifies the radius of the corners. Uncheck “Select All”, if you want to set the different values for each side of the border.

4 Select Border Color

Modifies the color of the border.

5 Save

Applies the changes you made to the border.

6 Cancel

Cancels the changes and closes the dialog box.

4.18.2. Custom Fonts Dialog Box

You can create a new custom typography scheme with the help of this Custom fonts dialog box.

1 Google Web Font

Displays a drop- down list of the Google web fonts that can be used on web pages without any crash limitation. You can select any out of these.

Browse-

Even you can browse more fonts by clicking Browse button. A window will open as shown below:

From here, you can directly move to the Google font website to choose your preferred web font and enter that font name in the given text box and select script type and just 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. Even you can Browse your own custom font with help of Browse button that will help you to locate the desired file. And it will be added to the current list of fonts.

3 System Fonts

Shows a drop- down list of primary fonts that are available with the operating system. You can choose any font as per your need.

4 Add Font
Adds your selected font style to the main typography list.

4.18.16. Hyperlink Dialog Box

1 External URL Option

Select this radio button and specify the external URL to which you want to link the selected text.

2 Internal Pages Option

Select this radio button and then choose the page, if you want to interlink the internal pages.

3 Target Window

Specifies the target window in which the link should open.

4 Save

Creates the hyperlink.

5 Cancel

Cancels the changes and closes the dialog box.

4.18.15. Scroll Up Button

1 Presets

You can choose the style of Scroll Up button from the list of Presets.

2 Preview

It shows you the preview of the button.

3 Save

Applies the Scroll Up on your template/website.

4 Cancel

Cancels the changes and closes the dialog box.

5 Color Tab

Shows you the color options.

6 Gradient Tab

Displays the gradient options. To know more about gradients, see this.

7 Background Tab

Includes options for the Color Tab and the Gradient Tab for customizing the background of Scroll Up button.

8 Border Tab

Contains the options for designing the border. See this to know the border designing options.

9 Arrow Background Tab

Gives various color options for the button’s arrow.

10 Arrow Border Tab

Provides you the color options for the border and gives an option to change its thickness too.

11 Layout Tab

Modifies the height and width of the Scroll Up button.