Last Updated: August 8, 2024, as of MereChurch 1.6.8.
Here are some design tips when building your MereChurch.
Colors
All of our themes expect colors to behave in the following way:
- Primary Color should be your main brand color. It's used the most often throughout the site. However, the primary color must be legible on both dark and white backgrounds as it's used in both contexts.
- Your secondary color should be a darker color. It should be dark enough to be used for text on a white or light background.
- Finally, your tertiary color should be a light color, suitable to be used for small text on black or dark backgrounds. If you have already set your background light and background dark values, you can check color contrast against those values as all themes use them heavily.
A few elements, such as Buttons and Feature Blocks, let you select any color theme when adding them. All of these colors will display correctly, but consider how the block looks in context with the rest of your site when making a decision!
Checking Color Contrast
Our team uses the 'Color Contrast Checker' tool to verify color contrast. You should be passing on the three AA standards — bonus points if you pass AAA contrast as well. Color contrast is a huge part of web accessibility!
Photos
All themes make ample use of photos.
- In general, avoid using photos with text on them where they might be used as a background element. We've taken steps where possible to limit using the same image as both a background and foreground element.
- For Series, Resources, and Events, use text-based images for the Promo Image, and basic background/patterned images for the Hero Image. The Hero Image will always be used in a background context.
Image Header Backgrounds
- In general, Anavim header backgrounds assume a light overall background. Lighter images will be much more successful here. The Anavim page header puts a light gradient fade using the light background color set in your Customization settings.
- The Olivet and Acacia headers assume dark overall backgrounds, so darker images will be more successful on these themes. These themes overlay your image semi-transparent over the dark background color set in your Customization settings.
Multiple Image Header Backgrounds
- For Olivet, page headers will display your promo and secondary image side by side in a polaroid style.
- For Acacia, page headers will display your secondary image blurred in the background, with your promo image left-aligned beside the header text.
- For Anavim, page headers will display a faded secondary image in the background, with your promo image centered underneath your header text.
Buttons
- On the Anavim theme, the Registration button shows up halfway off the page header. As such, make sure to choose a button style that includes a solid background, or this theme may look odd.
—
If you still have questions, please feel free to get in touch! We're here to help you with your MereChurch.