Sometimes you find yourself needing to add custom CSS codes in order to add or override some stylings. There are several places to add the custom CSS codes in The Ken theme.
In this article, we’ll explain how to add custom CSS codes into different locations using two examples about overriding the single blog post.
Writing CSS Codes
For the purpose of this article, we’ll write custom CSS codes that disable the metadata and change the content width of a single post.
To Disable the Metadata:
.entry-meta {
display: none;
}
Changing Content Width
/* Decrease the content width in single blog post */
.single-content {
max-width: 980px !important;
margin: 0 auto;
}
/* Decrease the content width in single blog post */
.single-post .single-content {
max-width: 980px !important;
margin: 0 auto;
}
Inserting the CSS Codes
After writing the CSS codes, you can insert them into The Ken theme. There are several locations available to add the custom CSS codes.
Theme Options
To add the custom CSS codes 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 codes. You can check them by inspecting the element on your test page.
Then, make sure there is no wrong character in the codes. 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:
Low Priority | High Priority |
---|---|
body {background: white;} | body {background: white !important;} |
For more information about CSS priority 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, add the import at-rule (@import) to the child theme’s style.css. Then you can specify the element that should use the font in the Custom CSS section.