Not all default tools, offered by Setka Editor, can always fit all your layout design needs but in most cases, non-standard design ideas can be put into action via CSS. With the help of Custom CSS fields in the editor and in Content Design System Manager (CDSM), you can apply the needed design via CSS.

How does Custom CSS work?

Custom CSS sets a design to chosen elements according to a CSS-code. There are several ways this code can be added:

In the editor

Layout elements have a Custom CSS field in the settings:

Add any attributes and they will be applied to the chosen element. E.g.: if you add a border: 3px solid black; attribute to Custom CSS field, it will turn into a black frame with 3px weight:

In a style

You can find the Custom CSS section once you open a style in your Content Design System Manager (CDSM) and scroll down the whole list of style elements:

______________2020-04-07___19.16.15_result.png

Once you click on it you will see a pop up box with the additional CSS-attributes:

______________2020-04-07___19.32.18_result.png

CSS, added to this interactive window, will be applied to all posts created in a chosen style. This might be useful for changing a default design of some style elements, e.g. galleries, dividers or specific text formats.

You should pay attention to an Apply the styles to post content only check:

If the check-box is off, CSS will be applied to post content only
If the check-box is on, it will be applied to a whole page block including its banner head-line, basement, etc.

In components and templates

Custom CSS can be applied to components and templates. This is what you need to do to apply it:

1. Open a Styles tab and choose a style with the needed component or template

2. Open the components or templates tab in the left palette

3. Choose the needed component or template

4. You will find a Custom CSS for component / Custom CSS for template check-box under a component/template HTML-code. Once you activate it, you will see a text field for CSS:

CSS will be applied either to a content block of the post template or to a component block.

Some Custom CSS hacks

Here we would like to offer some of the most-used Custom CSS hacks in posts and styles.

Crop images in a circle shape

Circle images is a quite frequent design solution that might include, for example, photos of authors or speakers. Since these elements are often being reused from post to post, we advise to save them as components.

Once the component is created, you need to crop your image in a circle with the help of Custom CSS. For that you need to do the following:

1. Open Setka Account and choose the needed style in the Styles tab

2. Open the Components tab and choose the needed component from the list in the left panel

3. Find the following piece of code:

 <figure class=“stk-reset stk-image-figure” data-ce-tag=“image-figure”>
 <div data-ce-tag=“mask” class=“stk-mask”>
 </div>
 </figure>

Note: a code of a component might contain some other elements e.g. grids, headings, and so on, so in such cases, the code might be much longer than the exemplary one. It is important to find a part that contains information about images.

4. Add a custom style name, that will circle the image, after stk-image-figure. We have a clientname_portrait in our example. Be sure to change the name for a unique one.

<figure class=“stk-reset stk-image-figure clientname_portrait” data-ce-tag=“image-figure”>
<div data-ce-tag=“mask” class=“stk-mask”>
</div>
</figure>

5. Click on a checkbox next to Custom CSS for component and insert the following code in the field:

.clientname_portrait:not(#_) .stk-image {
 width: 105px;
 height: 105px;
 border-radius: 50%;
 object-fit: cover;
}

Где width — ширина, а height — высота скруглённого изображения. Не забудьте заменить clientname_portrait на имя, заданное на предыдущем шаге. Set width and height for your circle image and don't forget to change clientname_portrait name to the one you set a step before.

6. Save the style via the Save button at the bottom of the page. Once you apply the component, the image you add to it will be automatically shaped in a circle:

Elements outline

To add an outline add one of the following Custom CSS codes to a paragraph, grid, or column:

Shadow

border-radius: 6px;
box-shadow: 0 3px 16px -5px rgba(0, 40, 128, 0.4),
0 0px 1px 1px rgba(0, 40, 128, 0.02);
padding: 4px;

Where border-radius is circling in pixel and padding is the indentation from the edge of the element.

More about box-shadow from w3schools.com

Border

border: 4px solid #fc0;

Where 4px in a border weight in pixel, solid is a line type and #fc0 is a color in a HEX format.

More about borders from w3schools.com

Indentation from both sides for the mobile version of your post

To avoid your layout sticking to both sides of a container, Setka Editor adds an auto-indentation of 10px. You can change its level with the help of the following Custom CSS code in your style:

@at-root {
  @media screen and (max-width: 767px) {
    .stk-post.stk-theme_11111 {
      --stk-m_r: 20px !important;
      --stk-m_l: 20px !important;
    }
  }
}

Where -stk-m_r is a right-side indentation in pixel, -stk-m_l is a left-side indentation and stk-post.stk-theme_1111 - is a style id. Replace 1111 with the id of your current style. You can find it in your browser address bar, opening your style in CDSM:

https://editor.setka.io/12345/clients/67890/themes/[STYLE ID]/edit

Gradient background

There are many services where you can create CSS-gradients, for example, CSS Gradient. You can pass a generated code to a Custom CSS field of a post, grid, column, or paragraph.

Vertical text

Add the following CSS to place your text vertically:

writing-mode: vertical-lr;

Where vertical-lr is a writing mode, lr - from left to right and rl is from right to left.

More about writing more from w3schools.com

Rotating elements to the needed angle

Apply the next code to rotate the needed element:

transform: rotate(180deg);

180deg is a rotation angle in degrees.

More about transform from w3schools.com

Galleries customization

You can also change default galleries forms with the help of the Custom CSS style. For that just add one of the codes below:

Buttons

You can specify color, size, and design for gallery buttons.

Buttons' color

.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow {
color: #FFF; // Icon color in HEX
background-color: #000; // Backgroung color in HEX
box-shadow: none; // Turn off buttons' outline
}

Buttons' size and arrows' weight

.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow {
width: 50px; height: 50px; // Width and height of the button in pixel
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow span {
border-width: 5px; // Arrow's line weight in pixel
}

Buttons custom design

.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow {
border-radius: 0; // Sets rounding for a custom button type
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow span {
display: none; // Hides default buttons
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow__prev {
background: url("/prev-arrow.png") center/cover no-repeat; // Sets image URL for a left arrow
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow__next {
background: url("/next-arrow.png") center/cover no-repeat; // Sets image URL for a right arrow
}

Pictures counter between gallery buttons

.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_counter {
display: block;
font: 16px Arial; 
}

Dot indicator under an image

.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_dots {
display: flex;
}

Dots color

.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_dot {
background-color: #EAEAEA; // HEX color for an inactive dot
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_dot:hover {
background-color: #CDCDCD; // HEX color for a hovered dot
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_dot__active {
background-color: #FFCC00; // HEX color of a dot for a current imahe
}

Alternative layouts

Center gallery elements

.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] {
justify-content: center;
}

Place buttons on both sides of the images

.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow {
position: absolute; top: 50%; z-index: 10;
transform: translateY(-50%);
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow__prev {
left: 10px; // Indentation in pixel for a left arrow
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow__next {
right: 10px; // Indentation in pixel for a right arrow
}

Placing buttons in a top-left corner, an image-counter - in a top-right corner

.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_counter {
display: block;
order: 25; margin-left: auto;
font: 16px Arial;
}

Placing arrows under the images and on both sides of the dots

.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow__prev {
order: 35;
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_arrow__next {
order: 45;
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_dots {
display: flex;
}

Custom CSS - advanced features for your layout design

Table of Content

What is Custom CSS?