Tutorials

How to add a component to your Post Style

You can use components from the library as-is, or you can alter it using your design guidelines.

1. Open Styles page in Setka Editor. 2. Choose the style where you want to add components. 3. Go to Components tab and press “Add component”. 4. Add component title. 5. Copy the HTML code of necessary components from the library. 6. Paste it into the HTML code frame. 7. Check the “Custom CSS” checkbox. 8. Copy the CSS code of necessary components from the library. 9. Paste it to the CSS code frame. 10. Replace the style ID ‘stk-theme_X’ with yours. See how to find you style_id here. 11. Replace the color preset ids ‘stk-theme_X_color_X_custom_color_Y’ with yours. 12. Press “Save”.

How to find the Style ID

Option 1

You can find the style ID by inspecting the markup of the page; each root element using the CSS class `stk-post` will also use a CSS class prefixed with `stk-theme` that has the style ID. Example: class="stk-post stk-theme_32018 …"

Option 2

You can find style ID in the page URL while editing the style. The last numbers in the URL are the style ID. Example: https://editor.setka.io/1/clients/1/themes/1465/edit

Note: This doesn’t work with built-in styles.

How to find the color preset ID

In the Styles tab of the Style Editor there is a section for Text Colors in the left sidebar.

Each color preset includes text color and the color for three types of links (unclicked link, link on hover, visited link).

The very first preset is a default setting for all text elements and it has no class. All the following presets could be customised for the text elements (more info in the Components section) by adding the class `stk-theme_X__color_X_custom_color_Y`, where X is the style ID and Y is the preset ID. The preset ID starts from `0`.