The Custom CSS/JS section provides two in-browser code editors where you can write custom styles and JavaScript that will be applied globally across your site. Both editors use the Ace editor with syntax highlighting.

CSS Code Editor

Use this editor to add custom CSS rules that override or supplement the theme’s default styles. Your CSS is loaded after the theme’s own stylesheets, so your rules take precedence over the defaults.

Common use cases:

• Adjusting spacing, font sizes, or colours on specific elements
• Hiding an element on certain pages using CSS selectors
• Adding a custom style that a theme option doesn’t cover
• Overriding a plugin’s default styling

JavaScript Code Editor

Use this editor to add custom JavaScript that runs after the page has fully loaded. The code is wrapped in a jQuery document-ready handler by default:

jQuery(document).ready(function(){ ... });

Common use cases:

• Triggering a custom animation when an element scrolls into view
• Modifying the behaviour of an element after the page loads
• Integrating a third-party JavaScript widget or API

Note: Custom CSS entered here applies to all pages. For page-specific styles, use a page builder’s built-in CSS field or a plugin like Simple Custom CSS.

Note: For larger amounts of custom code, it is better practice to enqueue a custom stylesheet or script file via a child theme’s functions.php rather than pasting code here.