Help Center
  • Welcome
  • Setka Editor
    • Getting started
    • Drag-and-Drop & Multiselect
    • Text editing
    • Grids and Layout
    • Images
      • Image Editor
    • Background images
    • Icons
    • Animations
    • Lists
    • Tables
    • Dividers
    • Footnotes
    • Hotspots
    • Enhance Symbols
    • Post templates
    • Buttons
    • Comments and collaboration
    • Embeds
    • Hyphenation
    • Responsive layout for mobile screens
    • Custom CSS
    • Custom JS plugins
  • Setka Content Design System Manager
    • Creating and editing styles
    • Text formats and fonts
    • Styles display for mobile mevices
    • Text and background colors
    • Dividers
    • Icons
    • Components – reusable design elements
      • Creating Components with HTML and CSS
        • CSS in components
        • Component examples
    • Configuring layout grids
    • Editing default elements with Custom CSS
    • Adding team members
  • Account Settings
    • Account settings basics
    • Access rights
    • Billing and subscription
  • Preserve your Setka Editor content after the service shutdown
  • Integrations
    • Setka and WordPress
      • Installing Setka Editor WordPress plugin
      • Launching Setka Editor on the post creation page
      • Setka Editor and WordPress compatibility
      • Setka Editor compatibility with the most popular WordPress plugins
      • Inserting graphs, charts, or diagrams into a post
      • Setka Editor and Google AMP
      • Inserting adverts into a post
      • srcset — the attribute for image size optimization
      • Page load speed optimization settings
        • Autoptimize plugin configuration
      • WordPress troubleshooting: known Issues and how to fix them
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Drupal
      • Setka for Drupal — compatibility, and features
      • Installing Setka modules for Drupal
      • Setka content on AMP pages in Drupal
    • Setka and Magento
      • Installing Magento 2 extension
        • Setka Editor configuration page
      • Preserve your Setka Editor content after the service shutdown
    • Setka and HubSpot
      • Setka Editor and HubSpot Blogs
      • Setka Editor and HubSpot Landing Pages
      • Semi-gated content with a HubSpot form
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Bitrix
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Ghost
      • Copying and pasting posts from Setka to Ghost
    • Setka and SharePoint Online
      • Installing Setka Editor application into SharePoint Online
    • Setka and Zapier
      • Setka and Webflow
        • Exporting new posts
        • Updating exported posts
      • Setka and Shopify
    • Setka and Integromat
    • Content Cloud
  • API
    • Setka Content Cloud API
    • Webhooks
    • API for Custom CMS Integration
      • Introduction to custom integration
      • Integration with Content Design System Manager (CDSM)
        • Initial sync — receiving Setka Editor files to connect them to your CMS
        • Storing and processing Setka Editor files
        • Connecting Setka Editor files to the pages of your site
        • Receiving style updates from the Style Manager and new editor versions
      • Setka Post Editor initialization (JavaScript)
      • Integration with Style Manager (API v1, previous version)
      • Preserve your Setka Editor content after the service shutdown
    • Custom Components API
  • VIDEO TUTORIALS
    • Setka Editor Video Tutorials
  • Components Library
    • Components Library
    • Guide: Ideas for Using Setka Editor’s Components to Improve Content Design
  • Content Experience Design Best Practices
    • Guide To Designing a Great Content Experience
Powered by GitBook
On this page
  • How to add Custom CSS to my style?
  • Step 1. Find out the element class
  • Step 2. Add class into Custom CSS

Was this helpful?

  1. Setka Content Design System Manager

Editing default elements with Custom CSS

How to edit default elements' settyings with custom CSS in Setka

PreviousConfiguring layout gridsNextAdding team members

Last updated 3 years ago

Was this helpful?

Some types of design cannot be achieved with standard Content Design System Manager (CDSM) tools. In such cases, you can customize , , , or using Custom CSS.

How to add Custom CSS to my style?

Suppose you want to add a dashed divider into your Setka Editor style. All dividers are solid by default, but CSS can make them dashed and add many other parameters.

Consider the editing process in this example.

Step 1. Find out the element class

Before editing the divider, we will need to find out its' class. Let's do this with the browser's built-in developer tools:

  1. Go to Content Design System Manager (CDSM): open and select Styles on the top bar.

  2. Select divider in the list of elements on the left. It will be automatically shown in the preview zone — on the right.

  3. Open developer tools (⌘+⌥+I, CTRL+SHIFT+I, or F12).

  4. Switch to element selection mode and click on the divider in the preview zone.

  5. Divider code will be shown on the Elements panel:

<hr class="stk-reset stk-theme_30028__separator_basic_divider">
  • hr— element type — horizontal row;

  • quoted value — element class stk-theme_30028__separator_basic_divider, where 30028is the style ID number.

Copy the divider class to use it in step 2.

Galleries and lists are not edited in the Content Design System Manager (CDSM). If an element is not available in CDSM, additional actions will be required:

  1. Create a new post in Setka Editor.

  2. Add the element that you are going to edit into the post.

  3. Open preview by clicking on the corresponding button on the right bar or pressing TAB.

  4. Open developer tools (⌘+⌥+I, CTRL+SHIFT+I, or F12).

  5. Switch to element selection mode and click on an element you want to edit on the preview zone.

  6. Element code will be shown on the Elements panel:

  • hr — element type — horizontal row;

  • quoted value — element class stk-theme_30028__separator_basic_divider, where 30028 is the style ID number.

Copy the element class and proceed to step 2.

Please note: some elements in Setka consist of several parts. For instance, every gallery button has its own class: slick-prev for the left arrow andslick-next— for the right arrow.

Step 2. Add class into Custom CSS

Now selected classes can be modified with any CSS methods. To add the dashed property to the divider:

  1. Scroll the elements list down to the end and click on Custom CSS.

3. Add a new row. Start it with the dot, then paste the divider class obtained in Step 1:

.stk-theme_30028__separator_basic_divider:before {
}

List any CSS parameters in braces. To make the divider "dashed," add the border property and set its' value to dashed. Set the distance between dashes — 3 pixels, by adding 3px:

.stk-theme_30028__separator_basic_divider:before {
border: 3px dashed;
}

Save changes in the Custom CSS and the style.

We recommend checking the Apply the styles to post content only box. If it is active, CSS changes will only affect the content created in Setka Editor, using this style, without affecting other elements of your site.

Please note: you will see the changes from Custom CSS only in the editor and posts. They won't be seen in the CDSM's preview zone.

Go back to Content Design System Manager: open , select Styles on the top bar, then, the style, element of which you wanted to modify.

Setka Account
dividers
tables
lists
Setka Account
galleries
A screenshot of "Developer Tools" interface showing "Elements" tab with divider code highlighted
A screenshot of "Developer tools" interface with "Elements" tab with divider code highlighted
A screenshot of Setka Content Design System Manager interface with "Custom CSS" link highlighted
A screesnhot of Setka Content Design System Manager Interface showing CSS code added to the "Custom CSS" field in for a style