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.
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!
If you want to add Styles that can't be done through the Editor, there is also a solution for you:
Static Styles/Global Styles
- 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)