Custom CSS
How to add custom CSS to further customize content in Setka Editor.
Last updated
How to add custom CSS to further customize content in Setka Editor.
Last updated
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:
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:
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.
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.
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:
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_portraitin 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 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:
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.
To add an outline, add one of the following Custom CSS codes to a paragraph, grid, or column:
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
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
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_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
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.
Add the following CSS to place your text vertically:
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
Apply the code below to rotate the needed element:
180deg is a rotation angle in degrees.
More about transform from w3schools.com
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.
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:
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.
