To access the CSS Editor:

  • Edit a slide
  • Select a caption/image/video
  • Open the Layer General Parameters Tab
  • Select the Style that you want to edit or to add a new Style, input a new style name (at least two characters needed) Note: the style name is the CSS class!
  • Click on Edit Style

Now you will see the style editor:

  • Basic Styles can be easily changed through the Simple Editor Tab.
  • Under Font - Family you will find here the earlier mentioned Fonts, you inserted at the Slider Settings Panel.
  • For Advanced Settings, you can always open the Advanced Editor Tab and put all your CSS Styles for this CSS Class in here.
  • Every change you do, will be directly visible at the top. The example text will show how your style will be at the end!

  • To enable different styles on hover, click on the Hover tab and check the checkbox "enable :hover"
  • The Settings from the Idle state will be copied automatically if there was no hover style before.

To Save your changes, please click on Save/Change and follow the steps shown.

Delete Styles

To delete a Style, select it and click on Style Edit.
Now click on Delete and confirm your deletion.
Note: this can't be undone!


Static Styles/Global Styles

If you want to add Styles that can't be done through the Editor, there is also a solution for you:
  • Click on Edit Global Styles. This is in the Layer General Tabs near the Edit Style Button.
  • Put your custom CSS into the Static Styles tab. These Styles will be loaded on every page where a Slider is visible.
  • Press Save to save your newly added styles.
  • The Dynamic Styles tab shows the current styles, that will be loaded on the frontend (only styles that are used by Sliders will be loaded for better loading times)