Resolving Custom CSS Issues in JupiterX
If you've added custom CSS to your JupiterX theme and it isn't taking effect, don't fret! There are a few common troubleshooting steps you can take to resolve this issue. Follow these simple recommendations, and your CSS changes should display as intended.
Check Your Custom CSS Syntax
First things first, let's ensure your custom CSS is targeting the correct HTML element. Here's what to do:
- Inspect the HTML Element: Right-click on the element you're trying to style and select "Inspect" to view the HTML and current CSS. Make sure your custom CSS matches the correct selector.
- View Page Source: Alternatively, right-click on your webpage, select "View Page Source" and use the browser's search function to find your custom CSS rules. This helps you verify if they are indeed being loaded onto the page.
Remember, even a simple typo can prevent CSS from working correctly. Double-check your syntax!
Regenerating CSS Files
Sometimes, your site's static files need a refresh. Here's how to regenerate the assets:
- Navigate to your WordPress Dashboard > JupiterX > Settings.
- Click the “Regenerate Assets” button.
- After regenerating assets, clear your site's cache as well as your browser's cache before refreshing the page.
Clear Site Cache
Caching helps with speeding up your website but can sometimes cause fresh changes to be hidden. Let's clear those caches:
- If you have any caching plugins installed (e.g., WP Super Cache, W3 Total Cache), clear the cache through the plugin settings.
- Server-level cache: If applicable, you may need to clear cache managed by your hosting provider. Look for options within your hosting control panel.
Clear Browser Cache
Old data stored in your browser might be the culprit:
- Clear your browser cache through browser settings or use keyboard shortcuts (usually Ctrl+Shift+Delete / Command+Shift+Delete on Mac).
- Try viewing your website in a private/incognito window to see if changes take effect there.
Avoid Conflicts with Multiple Builders
Using multiple page builders can sometimes result in conflicts:
- Save your work: Before moving your template to a different page, ensure you save any changes you've made.
- Create a new page: Add the saved template to a new page to see if this corrects the issue.
- Stick to one builder: As a best practice, try to use only one page builder to avoid these types of conflicts.
Tip: Elementor should be the primary builder for JupiterX themes. If you're working with templates in another builder, consider transitioning them to Elementor.
By following these steps, you should be able to resolve most issues with custom CSS not working in your JupiterX theme. However, if problems persist after following these suggestions, feel free to reach out to our support team for further assistance. We're here to help you craft the perfect website!