INTRODUCTION
Feature Summary: Configure display settings for the Member Portal.
Use Cases: System users can change background and text colors, add social media icons, display hours of operation, and more.
In this Article
Member Portal Setup
Log in to the admin dashboard.
Click SETTINGS > PORTAL SETTINGS on the side menu.
Click the Website icon. A new page displays.
On the new page, ensure the General tab is selected. From here, system users can configure the basic settings for the Member Portal.
Standard Colors & Fonts
Standard colors: In CourtReserve, the Member Portal uses a fixed white background and black text—these standard body background and text colors cannot be changed. All portals will display with this color scheme by default.
Standard Font: The font face is also standardized across all Member Portals. The only exception is in email message communications, where custom fonts may be used.
Example below shows the CourtReserve standard white background and black text.
Customizing Colors
Some customization options are available within the General tab (see below), as well as in specific areas like Event Descriptions, Global Announcements, and similar sections.
At this stage of setup, it’s helpful to understand six main colors:
Standard (or default) Background Color - The CourtReserve standard background color is white and cannot be changed.
Standard (or default) Text Color - The CourtReserve standard text is black and cannot be changed.
Primary Background Color - Sets the primary accent color used throughout your Member Portal and mobile app. This includes the button color, action buttons on mobile dashboards, background color for buttons, sidebars, checkboxes, and some headings.
Primary Text Color - Sets the color of the text inside buttons.
Header/Footer Background Color - Sets the background color of your Member Portal's Header and Footer.
Header/Footer Text Color - Sets the text color used inside your Member Portal Header and Footer.
The Primary Background and Primary Text Colors should have high contrast for best visual accessibility. If the Primary Background Color is set to white, buttons on the Member Portal will become invisible against a white background. This can create major usability issues and should be avoided.
Click Apply to save the color choices, and then click Save at the bottom of the page to apply the changes.
Choosing Colors
When customizing the appearance of your Member Portal, there are several ways to choose your desired colors:
1. HEX Code Input
You can manually enter a HEX code (e.g., #284b74) into the field provided.
A HEX code is a six-digit code that represents a specific color. If your Club has official branding guidelines, the HEX codes for your brand colors can usually be found in your style guide or website stylesheet.
2. Color Picker Tool
Use the built-in color picker:
The main color field allows you to adjust shade and brightness.
The vertical slider lets you select the hue (color family).
This is great if you're experimenting or want to fine-tune a specific look visually.
3. Basic Color Presets
Click the artist palette icon to quickly select from a set of standard colors. These are useful for quick selections and consistent choices across the platform.
Customized Color Examples
Example 1:
Example 1 Color Customized Settings:
Example 1: Mobile App: In this example, the background color defaults to white. The Primary Background Color (customized to purple) displays for buttons. The Primary Text Color is set to white based on the customized settings, while all standard text remains black.
Example 1: Member Portal (header):
Example 1: Member Portal (footer):
Example 1: Member Portal (Event List):
Example 1: Member Portal (Home Page):
An optional addition is the Hero Image row where an image of your choosing can be shown. The background and text colors of the Hero Image buttons are customizable on the adjacent Home Page tab under SETTINGS > PORTAL SETTINGS > Website. In this example, the buttons have a green background with white text. Learn more here.
Example 2:
Example 2 Color Customized Settings:
Example 2: Mobile App: In this example, the background color defaults to white. The Primary Background Color (customized to blue) displays for buttons. The Primary Text Color is set to white based on the customized settings, while all standard text remains black.
Example 2: Member Portal (header):
Example 2: Member Portal (footer):
Example 2: Member Portal (Event List):
Example 2: Member Portal (Home Page):
An optional addition is the Hero Image row where an image of your choosing can be shown. The background and text colors of the Hero Image buttons are customizable on the adjacent Home Page tab under SETTINGS > PORTAL SETTINGS > Website. In this example, the buttons have an orange background with white text. Learn more here.
Website & Social Media Links
System users can add footer links that appear in the Member Portal and in emails generated by the system. These links help members quickly access your Club's online presence.
Your Club Website – Link to your external website.
Facebook Link – Link to your Club's Facebook Business page or Community Group.
Instagram Link – Link to your Club's Instagram Business page.
Example:
Other Options
Show Hours of Operation in Footer - Check the box to display opening and closing times each day of the week.
Hours of Operation Source to Display in Footer - If the facility has different schedules (e.g. winter and summer hours of operation), click the field and select an option.
Footer Option - Choose where to display the footer: home page only, all pages, or hide.
Announcements View Option - The default setting is to display an announcement link in the header. To change the default, click the field and select the Hide option.
Example (footer):
Example (header):
Event Tab Order - Change the order of tabs on an Event page. Click the Edit Order button and drag a tab to a new location.
CourtReserve changes the tab order on the Event page on the Member Portal.
Example:
RELATED ARTICLES
Update: On March 4, 2025, an update was made to the Member Portal General Settings tab, introducing simplified options for color assignments in the member portal. These improvements enhance accessibility, ensure compliance with modern design standards, and create a more consistent experience across all organizations. By reducing design inconsistencies and improving usability, this update provides a more predictable and reliable experience for your members.
To learn more about these changes, please see this article.