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:
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:
Open Setka Account and choose the necessary style in the Styles tab
Open the Components tab and choose the needed component from the list in the left panel
Find the following piece of code:
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_portrait
in our example. Be sure to change the name for a unique one
5. Click on a checkbox next to Custom CSS for component and insert the following code in the field:
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:
Curve corners on backgrounds
Copy this code to the Custom CSS field of the grid.
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
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
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
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:
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:
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 code below to rotate the needed element:
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:
2. Replace ?portrait=0
at the end of URL with ?background=true
The code you get as a result should look like this:
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
Buttons' size and arrows' weight
Buttons custom design
Pictures counter between gallery buttons
Dot indicator under an image
Dots color
Alternative layouts
Center gallery elements
Place buttons on both sides of the images
Placing buttons in a top-left corner, an image-counter — in a top-right corner
Placing arrows under the images and on both sides of the dots
Last updated