Skip to content
MapleGatherMapleGather Help

Add custom CSS to your site

This guide shows you how to add your own CSS rules for the brand details your theme can’t cover on its own.

Who can do this: Admins with the custom-CSS permission (website:edit-custom-css). Without it, you can still open this screen and read the rules, but the editor is read-only — you can’t add, change, or delete a rule.

Before you start

Section titled “Before you start”
  • Set up your theme first — colors, fonts, and logo. Your theme handles most branding. Custom CSS is only for the small details themes can’t reach, so reach for it last.
  • Custom CSS applies to your public site and member portal only. It never changes the admin area you’re working in now, so a rule can’t lock you out of these settings.
  • There is no custom JavaScript. This editor accepts CSS only.

Steps

Section titled “Steps”
  1. In the left sidebar, select Website, then Custom CSS.
  2. Select Add rule. An editor panel opens on the right.
  3. For Scope, choose whether the CSS applies everywhere on your site (Global) or to just one page (A specific page).
  4. If you chose one page, select it from the Page list.
  5. Type or paste your CSS into the CSS box.
  6. Leave Enabled turned on so the rule takes effect. You can turn it off later to pause a rule without deleting it.
  7. Select Save rule.

If your CSS has a mistake, like a missing colon or an open brace, MapleGather shows a warning under the CSS box but still saves the rule. Only the broken part is skipped, so the rest of your CSS keeps working and a small typo won’t take your styling down.

Verify

Section titled “Verify”

You’ll know it worked when a “Custom CSS saved” note appears and the rule shows in the Rules list with its scope — “Global” or the page name — marked On. Open your public site to see the styling applied. Remember the admin area stays exactly as it was.

If something goes wrong

Section titled “If something goes wrong”
  • The editor is read-only — you don’t have the custom-CSS permission. Ask an admin who does to grant it, or to make the change for you.
  • You see an error naming a blocked part of your CSS — a few things are turned away for safety, such as @import or a url() reference. This is different from the syntax warning: MapleGather won’t save until you remove the flagged part. Delete that line and select Save rule again.
  • Your site looks broken after a change — open your public site at /safe-mode while signed in to see it without custom CSS, then fix the rule. See Recover a broken site with safe mode.
  • You want to stop a rule without losing it — turn its Enabled switch off in the Rules list. To remove it for good, open the rule’s menu, select Delete, and confirm with Delete rule.
Section titled “Related”