Content Design System Manager (CDSM) Editing default elements with Custom CSS

Editing default elements with Custom CSS

Some types of design cannot be achieved with standard Content Design System Manager (CDSM) tools. In such cases, you can customize dividers, tables, lists, or galleries 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 a lot of 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 Setka Account 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 divider in the preview zone.
  5. Divider code will be shown on the Elements panel:
    ______________2019-08-22___15.52.56.png
<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 30028 is 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 that you want to edit on the preview zone.
  6. Element code will be shown on the Elements panel:
    ______________2019-08-22___15.52.56.png
<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 30028 is the style ID number.

 

Copy the element class and proceed to step 2.

 

Note: some elements in Setka consist of several parts. For instance, every gallery button has its' own class: slick-prev for the left arrow, and slick-next for the right arrow.
mceclip2_result.png

Step 2. Add class into Custom CSS

Now selected class can be modified with any CSS methods. To add the dashed property to the divider:
  1. Go back to Content Design System Manager: open Setka Account, select Styles on the top bar, then, the style, element of which you wanted to modify.
  2. Scroll the elements list down to the end and click on Custom CSS.
    mceclip3_result.png
  3. Add a new row. Start it with the dot, then paste the divider class, obtained on 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:
mceclip5_result.png
.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 a post content only box. If it is active, changes in CSS will only affect the content, created in Setka Editor, using this style, without affecting other elements of your site.

 

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.