How to add custom CSS codes to style an Elementor element.
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.
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.
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 jupiterx-child/assets/less/style.less file.
Note: You can edit style.less file via dashboard in Appearance > Editor or via FTP client and go to wp-content/themes/jupiterx-child folder.
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 the codes you wrote and click Save.
Page Settings in Elementor
1. Open a page to which you want to add custom css code (it will be applied only to that page).
2. Click on Edit with Elementor button.
3. On the left side click on a gear icon to open Page Settings and go to Advanced tab.
4. Open Custom CSS/JS section and add your code into Custom CSS box.
