Custom CSS

How to add custom CSS to further customize content in Setka Editor.

What is Custom CSS?

Not all default tools offered by Setka Editor can always fit all your layout design needs, but in most cases, custom CSS can help you implement your design ideas. Setka offers a Custom CSS field in the editor and Content Design System Manager (CDSM).

How does Custom CSS work?

Custom CSS sets a design to chosen elements according to a CSS-code. There are several ways you can add the code.

Custom CSS in the editor

Layout elements have a Custom CSS field in the settings:

Custom CSS field in Setka Editor Upper Toolbar

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:

Custom CSS added and applied to a paragraph in Setka Editor

Custom CSS in the style settings

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:

Custom CSS button in Setka Content Design System Manager

Once you click on the "Custom CSS" button, you will see a pop-up box with the additional CSS-attributes:

CSS code added to a Style in Setka Content Design System Manager

CSS, added to this interactive window, will be applied to all posts created in a chosen style. It 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 code added to Component and Template in Setka Content Design System Manager

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

Some Custom CSS hacks

We want to share some of the most often used Custom CSS hacks in posts and styles.

Crop images in a circle shape

Circle images is a relatively 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 saving them as components.

Once you've created a component, you need to crop your image in a circle using Custom CSS. For that, you need to do the following:

1. Open Setka Account and choose the necessary 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>

Please 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_portraitin 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;
}

Set width and height for your circle image

• width — the width of the circle image

• height — the height of the circle image

Don't forget to change clientname_portrait to the name that you've created in step 4.

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:

Screenshot of the author portrait in a circle

Curve corners on backgrounds

Copy this code to the Custom CSS field of the grid.

border-radius: 35px;

Where 35px is the curve radius in pixels.

Any background, image or color, set for this grid will receive curved corners.

Custom CSS for curved corners applied to a grid with grey background.

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

Screenshot of Setka Editor inteface with an example of custom CSS for a paragraph shadow outline

Border

border: 4px solid #fc0;

Where 4px is 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

Screenshot of Setka Editor inteface with an example of custom CSS for a paragraph border outline

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_lis 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.

Screenshot of Setka Editor inteface with an example of custom CSS for gradient background

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 rlis from right to left.

More about writing more from w3schools.com

Screenshot of Setka Editor inteface with an example of custom CSS for vertical text

Rotating elements to the needed angle

Apply the code below to rotate the needed element:

transform: rotate(180deg);

180deg is a rotation angle in degrees.

More about transform from w3schools.com

Remove controls & add autoplay to a Vimeo embed

1. Get the embed code from Vimeo. Here is an example:

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/421964906?portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

2. Replace ?portrait=0 at the end of URL with ?background=true

The code you get as a result should look like this:

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/421964906?background=true" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

3. Paste code into the embed field in Setka Editor.

Same height for several objects in a grid

If you have a post section showing several badge-like elements but with a different amount of copyright you might want to make sure all badges have the same height. For example — if you have something like this:

it would be better to turn it into this:

An optimal solution would be to add height: 100% custom CSS to the main grid of every badge. That way the height of every grid in the row will be equal to the height of their parent grid. In the interface it would look like this:

Galleries customization

You can also change the default forms of the galleries 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
}

Screenshot of Setka Editor inteface with an example of custom CSS for colored gallery buttons

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;
}