Advanced Self-Styling

In the Custom Styling tab you have the freedom to apply any CSS rule you’d like on specific elements. You do this by applying CSS and other settings in a JSON node.

 

To apply custom styling you need to have prior knowledge of CSS and working in the JSON format

The JSON object contains nodes for each element. Each element node contains a styles subnode, where CSS is applied and a settings subnode where non-CSS settings are applied.

• Naming convention and property values
  • Syntax guide
  • How to find Styla classes
• Versioning

Naming convention and property values

CSS properties are represented by JSON nodes named after them, but written in camel cases. So, for instance, align-content becomes alignContent. Property values, however, stay as in CSS, so flex-start does not change and if you want to set it, you write: "alignContent": "flex-start" in module styles JSON.

Syntax Guide

• JSON object notation:
  • Brackets around objects
  • Commas behind elements that have another following element
  • No comma behind the last element
  • Quotation marks around parameter names and their values, separated by a colon.
• camelCase for CSS parameter names (remove dashes and capitalise words, except the first one)
  • In the case of prefixes like --webkit, --moz, --ms, etc. the first letter of the CSS rule should be capitalized. (e.g. --webkit-font-smoothing -> WebkitFontSmoothing)
  • To target a pseudo class or element, add a colon and then then the pseudo class (e.g. ctaLink:hover, ctaLink:after)
  • To target a disabled element, add [disabled] after the class name (e.g. AddToCartButton[disabled])
• No trailing semi-colon like in CSS
• The “all” object: parameters here affect all screen sizes (unless overwritten by the smallScreen object)
• The “smallScreen” object: parameters here affect only the mobile screen size. Mobile inherits the “all” objects parameters, unless they are explicitly overwritten in this object.

Most CSS properties should be set as strings, for instance:

"backgroundPosition": "93% center",
"boxShadow": "0 2px 6px 0 rgba(0, 0, 0, 0.12)",
"fontSize": "1.4em",
"width": "calc(100% - 60px)"

and you use strings to reference Styla variables too:

"backgroundColor": "{colors.primary}",
"fonts.formats": "price"

Many non-CSS settings take Boolean values, some of them are numbers or strings:

"isExternalLink": false,
"priceMinFractions": 2,
"priceTemplate": "#{price} €"

Any JSON you enter into the Custom Styling tab’s code editor will be validated before saving. If it's invalid the changes won't be saved and will be lost, so if you're planning to enter a big chunk of JSON into the editor, better validate it somewhere else beforehand or back it up. The best approach is small incremental changes.

How to find Styla classes

In the styles subnode all the classes of a specific element can be listed. To find out which classes you can apply CSS to, you could use your browser’s native inspector tool on the Styla elements:

1. Open the custom styling tab in either the Global Styling sidebar or the specific element editing view
2. Open your browsers console and activate ‘inspect’ mode
3. Hover over the element you want to change
4. Read the class name of that element that the browser shows
5. eg .class="TextModule__textWrapper___2aHt4"
6. The first part is the name of the element/module this class is used in. textModule in this case
7. The second part after the __ is the class name you want to edit in the JSS. textWrapper in this case
8. The last part after the ___ is a unique identifier. It changes often - Ignore this one.

Then in the custom styling tab

1. Select the element name in the dropdown
2. Type command+f to search
3. Type in the class name into the search
4. The class name shows up and you can edit it.

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

 

For better visibility you also have the option to show the node for a specific element by choosing it from the dropdown.

CSS that you set for a module is delivered by Styla to your browser and will work as CSS on any other website. So any CSS property can be set and will be rendered, as long as your browser supports it. You can transform, animate objects, change their position, display and z-index properties - which of course can break module layouts.

 

In case lack of a specific HTML element in Styla DOM is limiting implementation of your design, try adding pseudoelements in Module settings. For every HTML element on every module you can set :hover or :after or :nth-of-type(n). This is the only way to add some custom elements into Styla DOM.

 

Remember that you can override every general setting from all node in smallScreen just for mobile views. Even without any explicit settings in smallScreen most modules will look differently once you make you shrink your browser window below 767px as they inherit a set of CSS for this media query from default Layout Engine app settings. This is especially valid for Banner, Product and Editorial Shopping modules.

Versioning

It is also possible to revert to a previous version of the styles. Clicking the history icon next to the dropdown reveals a dropdown with the previous versions, after choosing a version, a comparison between the current and chosen version is shown in the code editor.

 

Applying a previous version also affects all changes applied in the rest of the tabs in the self-styling sidebar.