Styles tab

In this section you can specify all the style-related settings for the current layer. Scroll down to see the description of each option.

Style settings

Layout | Sizing & Position

With this box model you can set the size and the position of the layer width the editable parameters, and the others are also will shown here. For the Width and Height you can use pixels, percentage or even auto value. For the Top and Left you can set pixels and percentage, but don't forget that you can re-position the layer anytime by drag 'n' drop on the live editor view.

The Calculate positions from sets the layer position origin from which top and left values are calculated. The default is the upper left corner of the popup canvas. In a full size popup, your content is centered based on the screen size to achieve the best possible fit. By selecting the "sides of the screen" option in those scenarios, you can allow layers to escape the centered inner area and stick to the sides of the screen.

With the Padding you can set padding around the layer. You can use pixel values here.

You can also set border around the current layer. You can use 5px solid #eee as an example.

Transforms | Between Transitions

In this section you can set different transformation effects for the layer with the following parameters. This will be the default state of the layer.

The Rotate parameter will rotates the layer clockwise from the given angle to zero degree. Negative values are allowed for counterclockwise rotation. RotateX along the X (horizontal) axis, RotateY along the Y (vertical) axis.

Scaling the layer is also possible with the ScaleX and ScaleY options.

With the SkewX and SkewY you can skew the layer along the X (horizontal) and the Y (vertical) axis from the given angle to 0 degree. Negative values are allowed for reverse direction.

Actions

In this part you can find the Copy and Paste buttons, which you can use to copy/paste style properties between the layers.

Text | Font & Style

Here you can find all font related settings. Those settings are quite clear with their names, so you will able to recognize which is for what purpose.

Misc | Other Settings

You can also set the background color and the rounded corners of the layer.

Custom CSS | Write your own code

You can place any CSS code into the Custom CSS area. Please always make sure that the entered code is valid, unless it can cause styling problems for the popup. Please also note that you can add simple CSS definitions here, so to put CSS rules with class or ID is not supported, and may harm the popup.