Sometimes you find yourself needing to add custom CSS codes to add or override some stylings. There are several places to add the custom CSS in the Jupiter theme.
In this article, we’ll explain how to add custom CSS codes into different locations with two examples about overriding the Clear and Bold single blog post.
Writing Custom CSS Codes
For the purpose of this article, we’ll write custom CSS codes to disable the metadata and increase the content width for a single post with the clear and Bold style.
To Disable the Metadata:
/* Disable author avatar */
.mk-author-avatar {
display: none;
}
/* Disable author name*/
.mk-author-name {
display: none;
}
/* Disable publish date */
.mk-publish-date {
display: none;
}
Increasing Content Width
To increase the content width in a single blog post styled as Clear and Bold:
/* Increase the content width in single blog post */
.mk-single-content {
max-width: 980px !important;
}/* Increase the content width in single blog post */
.single-post .mk-single-content {
max-width: 980px !important;
}
Inserting the CSS Codes
After writing the CSS codes, you can insert them into the Jupiter theme. There are several locations to add the custom CSS.
Theme Options
To add the custom CSS into Theme Options:
Child Theme
Customizer
Page Settings
You can add the CSS codes individually on each page using Visual Composer.
Common Issues
The CSS is added to the Custom CSS field but it doesn’t work. What should I do?
First of all, make sure you have added the correct CSS. You can check it by inspecting the element on your test page.
After that, make sure there is no wrong character in the custom CSS. Sometimes, a simple “/” character will cause many issues on the website. You may also want to check and validate your CSS using a CSS beautifier tool such as cleancss.com.
You should also make sure your CSS has the right priority to apply to the element. Here is an example of when the browser would decide to apply the second CSS to the page, rather than the first one:
| 1 - Lower priority | 2 - Higher priority |
|---|---|
| body {background: white;} | body {background: black !important;} |
For more information about CSS priority please visit https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I imported a custom font using Import in Custom CSS but it didn’t work.
If you want to use a custom font in the theme, please add the import at-rule to the child theme’s style.css. Then you can specify which element should use that font in the Custom CSS section.
