1. Home
  2. Inserting Custom CSS

Inserting Custom CSS

Updated on November 22, 2017

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:

1Open one of your single posts. In this example, we’ll use our live demo page.
2There are three types of metadata: post date, post category and comments/likes. To disable all of them you’ll need to inspect them first.

custom css

3Inspect the above mentioned meta data and take note of its HTML class, which here is entry-meta.

custom css

4Write the appropriate CSS code.

.entry-meta {
    display: none;
}

5Take note of this code and add it into the theme as explained in the next section.

Changing Content Width

1Open one of your single posts. In this example, we use our live demo page.
2Inspect the post container and take note of the HTML class, which here is single-content.

custom css

3As shown in the image above, the max-width property is set to 1100px which means that the maximum width for the post container is 1100px. To change the width you’ll need to write the appropriate CSS codes.

/* Decrease the content width in single blog post */
.single-content {
    max-width: 980px !important;
    margin: 0 auto;
}

4Add a .single-post class to the beginning of the codes to make sure that the codes only affect the single post pages.

/* Decrease the content width in single blog post */
.single-post .single-content {
    max-width: 980px !important;
    margin: 0 auto;
}

5Take note of these codes and add them into the theme as explained in the next section.

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:

1From the WordPress top menu, go to Theme Settings > Custom CSS.

custom css
2Paste the codes you wrote into the Custom CSS section and Save the changes.

Child Theme

1First, enable your child theme.

2Paste the codes you wrote into ken-child/style.css

3Save the file and clear your theme cache.

Customizer

1From the left menu, go to Appearance > Customize.

2From the left menu, choose Additional CSS.

3Paste in the codes you wrote and click Save.

Page Settings

You can add the CSS codes individually on each page using Visual Composer.

1From the top right of your page editor, click on Page Settings

2Paste your code into the Custom CSS Settings area.

3Click on Save Changes and update or publish your page.

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.

Did this answer your question?