Custom CSS
How to add custom CSS to further customize content in Setka Editor.
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).
Custom CSS sets a design to chosen elements according to a CSS-code. There are several ways you can add the code.
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
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.
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.
We want to share some of the most often used Custom CSS hacks in posts and styles.
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 imageheight— 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
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.
To add an outline, add one of the following Custom CSS codes to a paragraph, grid, or column:
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.
Screenshot of Setka Editor inteface with an example of custom CSS for a paragraph shadow outline
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.
Screenshot of Setka Editor inteface with an example of custom CSS for a paragraph border outline
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]/editThere 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
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.
Screenshot of Setka Editor inteface with an example of custom CSS for vertical text
Apply the code below to rotate the needed element:
transform: rotate(180deg);
180deg is a rotation angle in degrees. 
Screenshot of Setka Editor inteface with an example of custom CSS forrotated text
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=trueThe 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.
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:
Section with various-sized badges
it would be better to turn it into this:
Section with same-sized badges
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:
CSS for same-height badges
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:
You can specify color, size, and design for gallery buttons.
.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
.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
}
Screenshot of Setka Editor inteface with an example of custom CSS for gallery buttons size change
.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
}
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_counter {
display: block;
font: 16px Arial;
}
Screenshot of Setka Editor inteface with an example of custom CSS for gallery slides counter
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_dots {
display: flex;
}
Screenshot of Setka Editor inteface with an example of custom CSS for a dot gallery slides indicator
.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
}
Screenshot of Setka Editor inteface with an example of custom CSS for a colored dot gallery slides indicator
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] {
justify-content: center;
}
Screenshot of Setka Editor inteface with an example of custom CSS for centered gallery buttons
.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
}
Screenshot of Setka Editor inteface with an example of custom CSS for a custom gallery buttons placement
.stk-gallery.stk-gallery_init[data-ce-tag="gallery"] .stk-gallery_counter {
display: block;
order: 25; margin-left: auto;
font: 16px Arial;
}
Screenshot of Setka Editor inteface with an example of custom CSS for galleru
.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;
}
Screenshot of Setka Editor inteface with an example of custom CSS for a custom gallery buttons placement
Last modified 1yr ago