Adding custom CSS to sliders

Sometimes you only want to make some minor edits to a specific slider and you don't want to create a new custom skin just for a small edit. For this situation, you can add custom CSS to that slider.

Inside the 'Custom JavaScript & CSS' sidebar panel, you can click on the 'Edit custom CSS' link and a modal window will be opened where you can add your custom code. You will also need to check the 'Enable custom CSS' option in order to have the custom code applied to the slider. In the 'Custom Class' field you will need to specify a class name, which you will then use to reference the slider in your custom CSS code.

Custom CSS panel

Custom CSS code window

When you add custom CSS code to a slider, a CSS file containing that code will be created in /plugins/slider-pro/custom/slider-pro-ID/slider-pro-ID-css.css, where 'ID' is the actual ID of the slider.

NOTE: In order to edit the skins or create custom skins, the 'skins' folder (/wp-content/plugins/slider-pro/skins/slider/) and the 'custom' folder (/wp-content/plugins/slider-pro/custom) need to be writable. On some servers this means that the folder has to have the permission set to 755, but on other servers it has to have the permission set to 777. I recommend checking with your web host what the best permission setting for making the folder writable would be.

Have more questions? Submit a request


Article is closed for comments.
Powered by Zendesk