Classes on Styla modules you can apply CSS changes to

This page lets you identify CSS classes on Styla DOM elements that you can apply CSS properties to in Styla Admin/Organization Manager.

When inspecting Styla HTML with your browser developer tools, you will see CSS classes and properties applied to each of them on different levels. Classes will almost always include one of the modules' names and then a specific HTML element name, separated by a couple of underscore characters.

This information is enough for you to first test applying some CSS properties in your browser window and then apply these in the module’s settings JSON.

Still, there are some HTML elements/CSS classes in Styla DOM for which you won't be able to apply custom CSS rules. You can recognize them by the initial part of their class names, not matching any of the modules above. Here's an example:

In the picture above, you can see that you cannot apply any CSS changes to this HTML element (.BaseSlider__originalSliderWrapper).

While you can modify modules' appearance in many ways, the only two ways to change layout rows that contain modules are:
- the Editor UI for row
- direct manual changes in page JSON structure. This method is a risky operation, and settings from a modified page can only be reused by copying the whole page.