Inserting Custom CSS Codes

Updated on July 4, 2018

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:

1Open one of your single posts that has the Clear and Bold style. In this example, we’ll use our live demo page.
2There are three types of metadata: author avatar, author name and post date. To disable all of them you’ll need to inspect them first.

Inserting custom css codes - inspect

3Inspect the above mentioned meta data and take a note of their HTML classes. They are mk-author-avatar, mk-author-name, mk-publish-date.

4Write the appropriate CSS codes.

/* Disable author avatar */
.mk-author-avatar {
    display: none;
}

/* Disable author name*/
.mk-author-name {
    display: none;
}

/* Disable publish date */
.mk-publish-date {
    display: none;
}

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

Increasing Content Width

To increase the content width in a single blog post styled as Clear and Bold:

1Open one of your single posts which has the Clear and Bold style. In this example, we use our live demo page.
2Inspect the post container and take note of the HTML class. It’s mk-single-content.

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

/* Increase the content width in single blog post */
.mk-single-content {
    max-width: 980px !important;
}

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

/* Increase the content width in single blog post */
.single-post .mk-single-content {
    max-width: 980px !important;
}

5Take a 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 Jupiter theme. There are several locations to add the custom CSS.

Theme Options

To add the custom CSS into Theme Options:

1From the WordPress left menu, go to Jupiter > Theme Options > Advanced > Custom CSS.

Inserting custom css codes - custom css menu

2Paste the codes you wrote into the Custom CSS section.

Inserting custom css codes - custom css code

3Click on Save Settings.

Child Theme

1First, enable your child theme.
2Paste the codes you wrote into jupiter-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

Inserting custom css codes - page settings

2Paste your code into the Custom CSS Settings area.

Inserting custom css codes - page settings custom css code

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

Did this answer your question?