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
  • What is Custom CSS?
  • How does Custom CSS work?
  • Custom CSS in the editor
  • Custom CSS in the style settings
  • In components and templates
  • Some Custom CSS hacks
  • Crop images in a circle shape
  • Curve corners on backgrounds
  • Elements outline
  • Indentation from both sides for the mobile version of your post
  • Gradient background
  • Vertical text
  • Rotating elements to the needed angle
  • Remove controls & add autoplay to a Vimeo embed
  • Same height for several objects in a grid
  • Galleries customization
  • Buttons
  • Dot indicator under an image
  • Alternative layouts

Was this helpful?

  1. Setka Editor

Custom CSS

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

PreviousResponsive layout for mobile screensNextCustom JS plugins

Last updated 4 years ago

Was this helpful?

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

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:

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 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:

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

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

<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:

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.

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.

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.

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

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.

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.

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
}

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

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

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

More about box-shadow from w3schools.com
More about borders from w3schools.com
CSS Gradient.
More about writing more from w3schools.com
More about transform from w3schools.com
Add
Content Design System Manager (CDSM).
Custom CSS field in Setka Editor Upper Toolbar
Custom CSS added and applied to a paragraph in Setka Editor
Custom CSS button in Setka Content Design System Manager
CSS code added to a Style in Setka Content Design System Manager
CSS code added to Component and Template in Setka Content Design System Manager
Screenshot of the author portrait in a circle
Custom CSS for curved corners applied to a grid with grey background.
Screenshot of Setka Editor inteface with an example of custom CSS for a paragraph shadow outline
Screenshot of Setka Editor inteface with an example of custom CSS for a paragraph border outline
Screenshot of Setka Editor inteface with an example of custom CSS for gradient background
Screenshot of Setka Editor inteface with an example of custom CSS for vertical text
Screenshot of Setka Editor inteface with an example of custom CSS forrotated text
Section with various-sized badges
Section with same-sized badges
CSS for same-height badges
Screenshot of Setka Editor inteface with an example of custom CSS for colored gallery buttons
Screenshot of Setka Editor inteface with an example of custom CSS for gallery buttons size change
Screenshot of Setka Editor inteface with an example of custom CSS for gallery slides counter
Screenshot of Setka Editor inteface with an example of custom CSS for a dot gallery slides indicator
Screenshot of Setka Editor inteface with an example of custom CSS for a colored dot gallery slides indicator
Screenshot of Setka Editor inteface with an example of custom CSS for centered gallery buttons
Screenshot of Setka Editor inteface with an example of custom CSS for a custom gallery buttons placement
Screenshot of Setka Editor inteface with an example of custom CSS for galleru
Screenshot of Setka Editor inteface with an example of custom CSS for a custom gallery buttons placement