Style manager

The style manager appears, when you enter any "style" setting. (For example what you see at the Heading layer, or at the Thumbnail control.)

Style set

To manage your styles, you will need a style set. They contain a group of your styles. For example you can have a style set just for your arrows, because those probably won't be the best stylings for other parts, like for the bullets.

You will already see some default ones created by us, and if you click on the Manage button, you can rename, delete them, or add a new one.

You can't rename or delete the default style sets.
Apply

When you click the Style button, you will see two Apply options.

  • Apply - If you click on the Apply button, the selected style will be only applied on the current object.
  • Apply as linked - If you click on the Apply as linked button, then your style will be saved in the Style manager, and everywhere where you will use this style with the Apply as linked button, those styles will be linked to this style's settings; so if you change it later, this style will be changed everywhere. (When you modify a previously saved style, you'll be asked whether you would like to save the style as new or override the current. When you choose save as new, the previously saved style won't be overwritten.)
Preview

In the Preview you will see the changes, in the single view with just an example text, and the name of the item where you pushed the button with the object itself. Also you can change the background color to help you see your style better.

Style settings
  • Background color - The color of the background. In our color picker there are some colors in the left, what we though are looking good, and in the right you can specify the color, also the opacity.
  • Padding - The padding around your object. To keep your padding reponsive at your texts, use EM values, because that means, it will be based on the font's size, so for example if your font has 10px height, 1em will be 10px, and as your font gets smaller, the 1em will have an equally smaller value too. The % value is based on the slider's size, but it's responsivity can have different options from the text, so you should rather adjust to the text. Also your style manager preview will show a different display for the % value from how your element will look in the slider, because the preview has a different size.
  • Box shadow - The box shadow of your object.
  • Border - The border around your object.
  • Border radius - The border radius radius of your object.
Extra CSS

If you can't find an option to style something, you can write the css code here. You don't need any css selectors, only the css code, like background: linear-gradient(red, blue);

Empty style

You can remove the style from your object by clicking on the X button next to this style.