Customize the site to match a unique brand
Branding allows Admins to customize the thematic elements of the site to match the desired look, style, and feel of a brand. To incorporate branding, Admins can add and edit:
Logo: The symbol or design used to identify a site.
Site Name: The name that members use to identify the site.
Theme: A site's color theme that is automatically used across your site. This determines the site's Primary, Background, Secondary, and Text colors.
Font/Typography: Pick from one of the fonts available that will be reflected across the site.
Top Navigation: The top vertical menu that displays top-level items of a website's structure.
To learn more about branding, visit the academy video here.
Customize the site logo
Log in with your admin account > click on the Profile Picture on top-right > Administration > Appearance > Logos > Upload logo image, square image, and favicon. You have the option to upload a light and dark logo.
Logo image: Appears on the site's top navigation, as well as the top of the site's Email Notifications.
Note: If no Site Logo is provided, the site's name (mentioned below) will be used by default.
Square Logo: A squared version of the logo image appears at the top of the administration and is also the mobile home screen app logo.
Favicon: The logo will appear as the icon in the browser tab and the browser favorites/bookmarks.
Change the site name
The Site Name is how members identify the site. This will be displayed in many areas of site. Log in with an admin account > click on your profile picture > select the Administration tab > click on the Settings section > in the Site Settings tab, add or Edit the Site Name > Click on the Update button to save the changes.
Customize the color theme(s)
Log in with your admin account > click on the Profile Picture on top-right > Administration > Appearance > Select Themes to change the color theme(s).
Browse all themes and select one as a base template.
Choose whether you want to offer dual themes (light mode and dark mode).
Select light or dark mode and continue customizing by clicking on the pencil icon next to the theme name to see all theme styles. To configure colors, click on each color and then select a color of your choice or insert the brand's hexadecimal or RGB color code to select an exact match. As you customize each style element, you will be able to see a full preview in the middle of the screen.
Click Save Changes at the top right of the window to save.
Customizing the element styles
Log in with your admin account > click on the Profile Picture on top-right > Administration > Appearance > Select Styles to change the platform style preferences.
Configure the style for the:
Corners: Choose the shape of the cards, inputs, alerts, modal, and other similar components.
Cards
Button
Avatar placeholder
Avatar corner
Icon style
Click Save Changes at the top right of the window to save.
Selecting the typography (font)
Log in with your admin account > click on the Profile Picture on top-right > Administration > Appearance > select Typographies to change the site font.
Click on one of the available font options. You can preview the font in the middle of the screen.
Click on Save Changes at the top right of the window to save.
Customize the top navigation
Log in with your admin account > click on the Profile Picture on top-right > Administration > Design Studio > Header and Sidebar > hover over the Top navigation and click on the gear icon to edit.
From the Top Navigation settings:
Select one of the Presets styles.
Click on the Sections tab to open up the options for:
Logo - choose the size of the logo or disable it.
Actions - enable/disable options like Create post, notifications, search, main menu, etc.
Menu - add menu items to the top navigation. You can also add sub-menu items for a drop-down menu option.
Search box - change the search placeholder, select what members can search for, or hide the search option.
Mobile menu - customize the mobile menu.
Open up the Sub menu section to enable a sub-navigation menu. This will show as an extra row to show more navigation items.
Click on Save Changes at the top right of the window to save.
White-labeling: remove the "Powered by Bettermode" badge
By default, all communities display a Powered by Bettermode badge in the bottom left sidebar and in email notification footers.
To remove the Powered by Bettermode badge, log in to the site with an admin account > access the Administration > access the Settings section > stay on the Site Settings tab > Scroll down and turn off the toggle in the White Label section > then click Update.