Restyle Your Website with Custom CSS

Use the Custom CSS editor to make site-wide design changes, such as updating colors, fonts, and certain text sizes.

The Custom CSS editor provides a centralized way to update your site's theme. Changes made there apply throughout the website.

Before you begin

  • Decide what you want to change, such as colors, fonts, or navigation text size.
  • If you use AI to generate CSS, review the result before applying it.
  • If you want to reset everything, delete all the text in the Custom CSS editor and save your changes to restore the default settings.

Open the Custom CSS editor

  1. Go to Administration.
  2. Select Appearance.
  3. Scroll to Advanced.
  4. Open the Custom CSS editor.

The editor includes variables that control different parts of your website's design.

Change a theme variable

  1. Find the variable you want to change.
  2. Click Copy.
  3. Paste the variable into the Custom CSS editor.
  4. Change its value to the setting you want.
  5. Save the changes and review your website.

For example, changing a color variable to red will change the parts of the website that use that variable.

Use AI to create your theme

If you are not comfortable writing CSS, you can use an AI assistant to help create the code.

  1. If your MCP connector is configured, use the provided link at the bottom of the variables list to connect your AI assistant.
  2. Otherwise, copy all available variables from the Custom CSS editor and open your preferred AI tool.
  3. Describe the design you want.
  4. Paste the copied variables into your request.
  5. Ask the AI to use only the provided variables and return valid CSS.
  6. Copy the generated CSS into the Custom CSS editor.
  7. Save the changes and review your website.

Example AI request

These are the theme variables available for my website:

[Paste copied variables]

Update my theme to use forest green and soft beige. Use a softer, spa-like font. Make the hero-image text slightly smaller and reduce the navigation-menu text size. Return only valid CSS using the available variables.

If you get a CSS error

If the editor reports an error, you can ask the AI to fix it.

  1. Copy the complete error message.
  2. Paste it into your AI conversation.
  3. Ask the AI to correct the CSS.
  4. Replace the code in the Custom CSS editor with the updated version.
  5. Save again.

Repeat as needed until the CSS saves without errors.

Check your website

Because Custom CSS applies site-wide, a change can affect different parts of your website.

After making changes, check a few important areas, such as:

  • Home page and hero section
  • Navigation menu
  • Donation forms
  • Membership or club pages
  • Buttons, headings, and body text

Need a variable that isn't available?

If you want to change something that does not have an available variable, contact Support. Tell us what you want to change, where it appears on your website, and what you would like it to look like.