Change Site-Wide & Local Styles in AI Builder Manual Mode

Updated 4 November 2026 · Standard formula, shown below

This guide shows you how to override both global and page-specific styles when using AI Builder in manual mode. You’ll learn where the style controls live, how to target the right selector, and how to avoid the most common pitfalls that lead to styles not applying.

What You’ll Need

Access to the AI Builder project with manual mode enabled (usually a toggle in the builder’s settings or toolbar).
Basic understanding of CSS selectors (class, ID, element) and the difference between site-wide and local styles.
Your site’s style sheet or the builder’s custom CSS field (often found under Settings > Custom Code or Theme > Custom CSS).

Step-by-Step

Open the AI Builder in manual mode. Launch your project and switch from the default (automatic) mode to manual. This usually appears as a dropdown or a toggle labeled “Mode” in the top-right corner of the builder interface.
Identify the scope you want to change. Site-wide styles affect every page; local styles affect only the page you’re currently editing. Decide which one you need before writing any CSS.
For site-wide changes:
1. Go to the Site Settings (often a gear icon) and find the Custom CSS or Global Styles section.
2. Write your CSS rules here. For example, to change the default font on all pages: body { font-family: Arial, sans-serif; }
3. Save the changes. The style will apply to every page that uses the site’s global stylesheet.
For local (page-specific) changes:
1. While editing the specific page, look for a Page Settings panel (sometimes a sidebar with a page icon).
2. Find the Custom CSS or Page Styles field. This is where you add CSS that only applies to this page.
3. Add your rules. For example, to change the background of a specific section: .my-section { background-color: #f0f0f0; }
4. Save the page. The local styles will override global ones if they have the same specificity (see Tips).
Use the right selector. If you’re targeting a specific element, inspect it first (right-click > Inspect) to see its class or ID. Use that in your CSS. For site-wide, you can use element selectors like h1 or p; for local, prefer class or ID selectors to avoid affecting other parts of the page.
Test your changes. After saving, preview the site or page. Check both desktop and mobile views if responsive design matters.

Common Mistakes

Using the wrong scope: Adding a page-specific style to the global CSS will affect every page, which is rarely intended. Double-check where you’re pasting the code.
Incorrect selector specificity: If your local style doesn’t override a global one, it’s often because the global rule has a higher specificity (e.g., div.container p vs .my-class). Use a more specific selector or add !important (but sparingly).
Forgetting to save or publish: In some builders, saving a draft doesn’t apply changes to the live site. Make sure you hit the “Publish” or “Update” button after saving.
Syntax errors: A missing semicolon or brace can break the entire stylesheet. Use a CSS validator or check the browser’s console for errors.

Tips

Use CSS variables for site-wide themes. Define variables like :root { --primary-color: #0073aa; } and then use var(--primary-color) in local styles. This makes site-wide changes easier later.
Leverage the builder’s visual editor for quick changes. Even in manual mode, you can often click an element and edit its style visually; the builder will generate the CSS for you. Then copy that CSS into your custom styles for reuse.
Keep local styles minimal. If you find yourself repeating the same local style on many pages, consider moving it to the global stylesheet.
Use browser developer tools to test. Before committing, you can temporarily add CSS in the browser’s DevTools to see how it looks without affecting the live site.

Troubleshooting

My styles aren’t showing up at all.

Check that you’ve saved and published the changes.
Clear your browser cache or do a hard refresh (Ctrl+F5).
Look for typos in your CSS â€“ a single missing brace can invalidate the whole block.
Make sure the selector matches an existing element. Use the browser’s Inspect tool to verify the element’s class or ID.

My local style is being overridden by a global style.

Increase the specificity of your local selector. For example, instead of .my-class, use div.my-class or #page-id .my-class.
If all else fails, add !important to the property (e.g., color: red !important;). Use this sparingly as it makes future maintenance harder.

Changes work in preview but not on the live site.

This usually means you haven’t published. In AI Builder, preview mode shows the latest draft, but the live site shows the last published version. Click the “Publish” button.

I can’t find the custom CSS field.

Look under the three-dot menu in the top-right, or under “More” in the settings. It might be labeled “Custom Code” or “Head Code.” If you still can’t find it, consult the builder’s documentation or help center.

Frequently Asked Questions

Can I use the same CSS class in both global and local styles?

Yes, but the local style will only override the global one if it has equal or higher specificity. If the global rule is .btn { padding: 10px; } and the local is .btn { padding: 5px; }, the local one wins because it comes later in the cascade (assuming it’s loaded after).

How do I change the font for the entire site?

Add a global CSS rule like body { font-family: 'Open Sans', sans-serif; } in the site-wide custom CSS. Make sure the font is loaded (e.g., via Google Fonts link in the head).

What’s the difference between manual mode and automatic mode in AI Builder?

In automatic mode, the builder generates styles for you based on your selections. In manual mode, you have full control to write custom CSS, but you must also manage responsive behavior and consistency yourself.

Will my local styles affect mobile view?

Yes, unless you use media queries. If you want different styles on mobile, wrap your CSS in @media (max-width: 768px) { ... }.

Can I revert to the automatic mode after making manual changes?

Usually, yes. Switching back to automatic mode may discard your manual CSS or keep it depending on the builder. It’s safer to backup your custom CSS before switching modes.

Why is my CSS not applying to a specific element?

Check if the element has an inline style (which has the highest priority) or if a more specific selector is overriding yours. Also verify that the element is not inside an iframe or shadow DOM, which can isolate styles.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.