If the customization options in your style presets don't give you the look you want, you can add your own CSS directly in the site editor.
To customize a style preset using the CSS editor
This process has two parts:
Create a style preset and find its unique class name.
Add CSS that targets that class name.
Part 1: Find the class name of your style preset
Add a new style preset to your theme.
In the site editor, apply the new style preset to one or more tiles.
View or preview your site in a web browser. The steps below use Google Chrome.
Open Developer Tools by selecting View > Developer > Developer Tools from the Chrome menu, or press Ctrl+Shift+I (Windows) or Cmd+Option+I (Mac).
Click the Inspect button, the first icon in the top-left corner of the Developer Tools panel.
Hover over the tile that uses your style preset. When the tile is highlighted, click it.
In the panel, find the tile's class attribute. It contains the name of your style preset followed by a unique ID. In this example, the class name is .titles-9ldg4
Copy the full class name, including the ID.
Tip: The class name is based on the style preset name you set in your theme or in the Style Preset drop-down in the site editor.
Part 2: Add your custom CSS
Open the Site Editor.
In the left panel, click Styling.
Under Local Site Styles, click Edit Site CSS.
Scroll to the bottom of the editor if it already contains other CSS.
Paste in your code, using the class name you copied in Part 1.
In this example, the CSS Code below will be used to add a red border, 4 pixels thick, to the top of every tile that uses your custom style preset:
.titles-9ldg4 .tile { border-top: 4px solid #FF0000; }6. Click the Publish button to make your changes live.
Style presets are part of your broader theme configuration. For additional guidance, see the Zoomforth style guide for editors.
Need Help?
Contact Zoomforth Customer Support through the in-app chat or email support@zoomforth.com.