Inserting Custom CSS

Last Updated on

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.

In this article


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.

x
Note: We assume that you are already familiar with using the developer tool in browsers to inspect elements. To learn more about it, read the Inspecting elements article.

To Disable the Metadata:

1
Open one of your single posts. In this example, we’ll use our live demo page.
2
There 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

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

custom css

4
Write the appropriate CSS code.

.entry-meta {
    display: none;
}

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

Changing Content Width

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

custom css

3
As 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;
}

4
Add 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;
}

5
Take 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:

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

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

Child Theme

1
First, enable your child theme.

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

3
Save the file and clear your theme cache.

Customizer

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

2
From the left menu, choose Additional CSS.

3
Paste in the codes you wrote and click Save.

Page Settings

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

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

2
Paste your code into the Custom CSS Settings area.

3
Click 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.

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket