Inserting Custom CSS Codes

Last Updated on

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.

In this article


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.

x
Note: It’s assumed 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 that has the Clear and Bold style. In this example, we’ll use our live demo page.
2
There 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

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

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

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

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

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

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

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

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

Inserting custom css codes - custom css menu

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

Inserting custom css codes - custom css code

3
Click on Save Settings.

Child Theme

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

Inserting custom css codes - page settings

2
Paste your code into the Custom CSS Settings area.

Inserting custom css codes - page settings custom css code

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

Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket