Important
This feature is still in Beta. As such, it is possible you will experience bugs while using it. If you encounter something unexpected or something is not working. Please submit a ticket to our support team.
A member portal that matches your brand helps your members feel a seamless experience between navigating your website and receiving benefits through your Member Portal.
Would you like to change the colours on font sizes in your Member Portal to better reflect your brand? This article will walk you through how to do just that.
Before we look too closely at branding with colours, don't forget that configuring your logo and banner are equally important for setting up a cohesive-feeling Member Portal.
Accessing the Member Portal Customization Module
1. From your Administrator Dashboard, click 'Configuration' at the top of the page.
2. On the 'Configuration' page, in the 'Member Portal' box, click 'Setup'.
3. On the 'Member Portal Setup' page, hover over the three dots in the 'Member Portal Customization (Beta)' box and click 'Manage' in the dropdown menu that appears
4. That will bring you to the 'Member Portal Customization' page
Understanding Each Customization Option
Note
While there are tons of options to change colours in the portal now, best practice is to limit your palette to a few colours. The following articles suggest possible colour schemes (specific colours and where to use them):
- Coming in the next couple weeks
To find which element of the portal a particular field changes, copy the name of that field, come to this article, hit 'Ctrl + F' ('command + F' on mac) and paste that field in the search bar that appears at the top right of your screen.
First, note the default settings (we have already configured the logo and banner):
Working down the list, change the 'Background Colour' first by clicking on the corresponding hexcode. Then choose the new colour by typing/pasting in your new hexcode or selecting it from the colour palette dropdown.
Changing the 'Background Colour' looks like this in the Member Portal:
Next is the 'Breadcrumb Colour'
Changing it has the following effect:
Next is the 'Widget Header Colour'
Changing it has the following effect:
Image to come
Next is 'Bar Colour - Header'
Its effect:
'Bar Colour - Nav Bar'
Effect:
'Bar Colour - Footer'
'Text Colour - Header'
Image to come
'Text Colour - Nav Bar'
'Text Colour - Footer'
'Text Size - Header'
Image to come
'Text Size - Nav Bar'
'Text Size - Footer'
'Widget Background Colour'
'Table Regular Header Background Colour'
'Table Light Header Background Colour'
'Table Dark Header Background Colour'
'Badge Header Colour'
Image to come
'Badge Text Colour'
Image to come
'Badge Content Colour'
Image to come
'Badge Content Text Colour'
Image to come
'Text Colour - Header'
Image to come
'Text Colour - Widget'
Image to come
'Button Colour - Success'
'Button Colour - Danger'
'Button Colour - Primary'
'Alert - Info'
Image to come
'Alert - Success'
Image to come
'Alert - Danger'
Image to come
'Alert - Info Text'
Image to come
'Alert - Success Text'
Image to come
'Alert - Danger Text'
Image to come
'Modal Header'
'Modal Header Text'
'Modal Body'
'Modal Body Text'
'Modal Footer'
'Modal Footer Text'
Image to come
'Body Font Family'
***Note: You are setting the type of font you want to use everywhere in the Member Portal.***
'Top Navbar Hyperlink Colour'
'Large Dashboard Icons'
'Large Dashboard Text'
'Dashboard Alert Header'
Image to come
'Text Size - Store Product'
Congratulations! You have customized your Member Portal to reflect your brand.
Comments
Please sign in to leave a comment.