Choosing a Theme and App Colors for Your Site + Video

Watch the video

This article shows you how to give your site a look that feels just right for your brand. You’ll learn how to choose a theme, update colors using the built-in color picker, and preview your changes as you go. It also includes tips to help you make sure everything stays easy to read across your pages and forms. For those with design experience, there’s even an option to customize your site further using custom CSS.

To Select a New Theme:

Go to: Site Settings > Customize Your Site > Look and Feel > Themes.

  • Select the theme that best matches the look and feel of your event, then save your changes.

To preview how your theme appears on public-facing pages, simply log out of your site and visit any of your public links, such as:

  • Homepage
  • Catalog
  • Tickets
  • Donate Item
  • Contribute
  • Signup 

This will show you exactly what your guests will see when they access your event site.

To Change the Colors of Key Elements:

Go to: Site Settings > Customize Your Site > Look and Feel > Custom Colors.

  1. You'll find a preview window to the right of the custom color selectors. This preview reflects the current theme and colors you've selected before saving the page, so you can see exactly how your changes will look.
     
  2. Enter the HEX color code in the color field, or use the color picker to choose your preferred color(s).

Color Picker Instructions:

  1. Click on the circle to open the color picker
  2. Click or drag the selector to the desired color on the spectrum sidebar
  3. Click in the tone window in the area representing the desired shade/tone. Drag the small circle marker to adjust/preview the color - the hex code is updated in real time.
  4. Preview selected colors in the window and repeat as necessary to adjust.
  5. Save your changes.

Search for  "free color picker" in your favorite browser to find free tools matching/finding hex codes for the colors in your uploaded image.

Review the Look and Feel of Your Changes:

If you have customized colors on your site, be sure to review all pages and forms to ensure that critical elements aren't hidden or unreadable because the font color is similar to the background color.

Advanced Customization Options for Web Designers: 

Go to: Site Settings > Customize Your Site > Look and Feel > Custom CSS.

If you are a web designer with CSS skills, you can write your own stylesheet, and make the site look exactly the way you want it to. 

NOTE: this is an expert-level feature, and we do not provide support to designers wishing to write their own CSS (but if your attempts go awry, you can simply delete any CSS entered above to revert to the default look and feel).