Customizing the Elements Using Custom CSS

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 X theme.
In this article, we’ll explain how to add custom CSS codes to style an Elementor element.

In this article


Writing Custom CSS Codes

For the purpose of this article, we’ll write custom CSS codes to style an Elementor element. With this example, you will be able to style any other element with ease.

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 Style an Element

1
Open your page on the frontend which has the element that you wish to style.  In this example, we’ll change the button background color.
x
Note: It is possible to change the button background color without usage of custom CSS codes and this is just for example purpose.
2
Inspect the button and take note of it’s HTML class.

3
Write the appropriate CSS codes.

.raven-button, a.raven-button {
    background-color: green !important;
}

4
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 X theme. There are several locations to add the custom CSS.

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.

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