Your Higher Logic Thrive Community (Thrive Community) includes a default header that populates on interior pages, as shown below.
In this article, you'll learn the two ways you can change this header:
- Keep the default background but change its color
- Replace the background with your own custom image
ACCESSIBILITY: Any time you're designing webpage or email-based content, it's more important than ever to keep modern accessibility principles in mind. Because this article touches on content design, we recommend referring to Best Practices - Accessibility and its associated resources.
Change the default header color
If you like the default background but want to customize the color to match your organization's brand, all you need to do is change the Primary Color in the Theme.
Example
Up first, here's the default blue:
Now, here's an example of setting the Primary Color to orange (you'll notice the buttons also change):
As you can see, this is a simple but effective way to have your Thrive Community reflect your branding.
Steps
- In the Admin Toolbar, click Site Options > Themes.
TIP: Right click and open this page in a new tab so you can quickly switch back to your Home page to check your work later.
- You're now on the Theme Editor tab in the Site Admin interface. Click the Edit button associated to your Thrive Community theme.
- While dozens of options are available, the only one you need to change is on the Color Picker > Main Colors tab, which you'll be on by default.
- Click the menu for Primary Color and choose your organization's main brand color. You can choose a standard web color or click the Custom Color button at the top to input a hex color code, RGB, or HSB value. When finished, click OK to close the color menu.
NOTE: Depending on your chosen colors, you may also need to adjust the Text on Primary option to ensure text is readable across your site. For example, if your Primary Color is red, white text will not be readable. And remember, changing the Primary Color will impact other items across your site, such as button colors, so this is an important step.
- Scroll to the bottom of the page and click Save to apply your changes.
TIP: Switch back to your Home page browser tab and refresh the page to see how your colors look. Switching between these two tabs makes it easy to make and verify adjustments. Be sure to verify text is readable in both your header and buttons with your new color; if not, adjust the Text on Primary option. You can also adjust the other options, such as your link colors and site footer background color, if desired.
Replace the default header image
If simply changing the header color as described above is not enough, you can replace the default background with a custom image. Let's learn how.
NOTE: Keep the following image details in mind:
1. Recommended image size: 1440x166
2. Max file size: 5 MB
3. Acceptable image types: .jpg, .png, .gif, .jpeg, .ico, .jpe
- In the Admin Toolbar, click Site Options > Site Setup.
TIP: Right click and open this page in a new tab so you can quickly switch back to your Home page to check your work later.
- You're now on the Site Setup tab in the Site Admin interface. Click the Images tab.
- Scroll down to the Header Background option and click Choose to display the image uploader.
- Follow the steps as illustrated in the video below to browse for and upload an image.
- At the bottom of the page, click Finish to apply your change.
TIP: With your custom header in place, take a moment to view a few pages across your community site to verify that it displays properly.