Text links

To add hyperlinks to an existing text:

1. Select the text you want to become a link
2. Select Link icon button

3. Type in the address and pres OK

Background fill

To fill a background color to whole project page go to Properties Panel/Page/Appearance and type in a color into the Background input field

ScrSht 2015-01-29 at 16.18.41

To Add one color background to your widget go to Widget Properties Panel/Background

ScrSht 2015-01-29 at 16.26.02

To add image as a background go to Widget Properties Panel/Background and press the Add image button:

ScrSht 2015-01-29 at 16.29.11

or double-click on the Widget.

Rounded Corners

To add rounded corners you need to select the widget and go to Properties Panel/Advanced/Border radius

If you need all four corners to be the same size then in the Border radius input field type only one value – for example 8px

This is what you get:
ScrSht 2015-01-29 at 15.51.16


In case if you need different sizes for each corner – add four values: 8px 8px 3px 3px

ScrSht 2015-01-29 at 15.53.20

Here’s the result:

ScrSht 2015-01-29 at 15.54.47


Fixed Menu

To make a fixed menu like this:

fixed menu

1. First you have to switch to Advanced mode

2. Select the Navigation Widget in Widget Tree

and in Widget Properties Panel/Advanced/Position select FIXED

ScrSht 2015-01-16 at 16.09.06


3. In Widget Properties Panel/Advanced/Z-index type in 3. The z-index property specifies the stack order of an element.
ScrSht 2015-01-16 at 16.17.27
An element with greater stack order is always in front of an element with a lower stack order.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

How to set container max width

This video tutorial will provide you with information about how to set max width for container in FROONT.

Copy paste style

1. Select the text and press Cmd+C (or Ctrl+C on a PC) to copy style
ScrSht 2015-01-12 at 20.28.34

2. Now select the other text widget and press Cmd+Shift+V (or Ctrl+Shift+V on a PC) to paste the style

ScrSht 2015-01-12 at 20.28.52

And the Header 2 should have the same style as the Header

ScrSht 2015-01-12 at 20.38.44

Rename widgets

This video tutorial will provide you with a guide how to rename widgets in FROONT.


You can find border property field in Widget panel/Advanced


Solid border
2px solid #000

ScrSht 2015-01-12 at 18.14.05

Dotted border
2px dotted #000
ScrSht 2015-01-12 at 18.15.44

Dashed border
5px dashed #000

ScrSht 2015-01-12 at 18.16.23

Double border
3px double #000

ScrSht 2015-01-12 at 18.16.46

Library objects

This video tutorial will provide you with information about adding and accessing library objects. You’ll learn the following things:

Accessing objects from Library;
Adding objects to private Library;
Formatting objects from Library.