Community Management: Theme Builder

The Theme Builder is a powerful tool to allow full visual customization of your Raftr community. It allows you to co-brand your community with your organization's colors. Not all communities have access to the Theme Builder, as it is a premium feature add-on. If you are interested in co-branding your community, please reach out to your Success Manager.

Accessing the Theme Builder

To access the Theme Builder, go to the Admin Portal and select the Community dashboard. Once there, go to the Theme Builder section on the left hand menu. Only Community Admins have access to this feature. If you do not see this option and believe you should, reach out to your Success Manager or contact us. 

Understanding the Theme Builder

When you open the Theme Builder, you will see your customizable color options on the left and a preview window on the right. You can use the preview to see what your color combinations will look like. Each community supports three main colors:

• Background color ー This is the color used for backgrounds, titles, and text. It is used as the header color in many cases.
• Primary color ー This is the color used for most buttons and links on the platform.
• Secondary color ー This color is used sparingly for highlighted options like Bookmarks, alerts, and hover states.

Supporting colors are used to create default profile images with community member's initials when they haven't uploaded a profile image. You can either choose these four secondary colors manually the same way you edit one of the main colors, or you can click Randomize, which will give you four random colors in the same color family as your Background, Primary, and Secondary colors. 

Updating Your Brand Colors

To update one of your brand colors, select the one you wish to change. If you know the six-character hex code (the "#" is added for you), you can type it directly into the text entry field. 

To choose a color from a palette, select the colored square next to the hex code. This will open a full color spectrum option. Use the rainbow slider to select a hue, then click and drag on the palette above to choose the precise shade you want. There is also an arrow icon that you can click on to view or edit a color's RGB or HSL color value. 

To close this menu, click anywhere outside of it. The preview view will update automatically when you update a color, but you must click Save in the bottom right corner to approve your selections.

Color Limitations

Right now, we do not recommend using light colors in the Theme Builder as it can negatively impact visual accessibility of the platform. In general, if you can't read white text on a color, it should not be used as one of your community's colors. We encourage you to follow Web Content Accessibility Guidelines (WCAG) 2.0 standards when selecting colors and posting content in your community. 

Resetting Your Theme

To return your theme to the Raftr default colors, select the Reset option at the top of the Theme section. Even for resets, you will still need to click Save to enable your selections.