You are browsing myClubhouse Knowledge Base
Site Styles & Colours
- Peter Hickson
- Joanne Shovelton
The Site Styles & Colours is a place to make your myClubhouse site your own. You can use the settings to change the colours for all pages throughout the site, as well as the Banner and the Footer. You choose two main colours at the start and then all other colours can be based on these to make it easier to change it up in the future if you decide to rebrand your club or just redesign your site.
Instructions
Navigate to Admin > Settings > Site Styles & Colours.
Main Site Colours: These are the main colours that other elements’ colours will be based on. It is a good idea to make these strong bold colours, with full opacity.
Primary Colour: Select the main colour for your site from the colour picker. It is recommended to leave the opacity (the third slider) at maximum. Any colour settings throughout the rest of the page based on the Primary Colour will be automatically updated too.
Secondary Colour: Select the secondary colour for your site from the colour picker. It is recommended to leave the opacity (the third slider) at maximum. Any colour settings throughout the rest of the page based on the Secondary Colour will be automatically updated too.
FavIcon: A FavIcon appears next to the name of the webpage in the tabs on your internet browser. The default image is the myClubhouse logo, but you may want to change that to your club logo or something else personal to your club. Click “Change” to select a new file. Be aware that FavIcons are very small on the screen, so any image that is too detailed will just get lost when the size is reduced.
Save Changes: Once happy with your colour choices, click “Save Changes” to save. Refresh the page to see any changes that you have made.
Menu Colours: The menu bar appears at the top of every page. Set the colours of the menu items here.
Menu Bar Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the main colour of the menu bar. An example of what the menu bar looks like can be seen at the top of the section.
Menu Bar Text Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the main colour of the menu bar. An example of what the menu bar looks like can be seen at the top of the section.
Menu Bar Hover Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the colour of main menu bar items when the mouse is over them. An example of what the menu bar looks like can be seen at the top of the section.
Menu Bar Hover Text Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the text colour of main menu bar items when the mouse is over them. An example of what the menu bar looks like can be seen at the top of the section.
Menu Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the background colour of any menu drop-downs. An example of what the menu bar looks like can be seen at the top of the section.
Menu Text Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the text colour of menu items. An example of what the menu bar looks like can be seen at the top of the section.
Menu Hover Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the colour of menu items when the mouse is over them. An example of what the menu bar looks like can be seen at the top of the section.
Menu Hover Text Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the text colour of menu items when the mouse is over them. An example of what the menu bar looks like can be seen at the top of the section.
Menu Font: Click the “G” to search through Google Fonts, with a preview of each, and use it to select a font for the menu. An example of what the menu bar looks like can be seen at the top of the section.
Menu Font Size: Set the size of the Font in the menu bar for all menu items, both top level in the menu bar, and those in drop-downs. An example of what the menu bar looks like can be seen at the top of the section.
Show Menu Home Button: The home button appears on the far left of the menu bar, choose whether you want it to be shown or hidden. An example of what the menu bar looks like can be seen at the top of the section.
Menu Home Button Image: If you chose the home button to be shown above, you can change the image for the home button by uploading one here. By default, it will be the myClubhouse logo. An example of what the menu bar looks like can be seen at the top of the section.
Save Changes: Once happy with your choices for the menu bar, click “Save Changes” to save. Refresh the page to see any changes that you have made.
Banner Design: The Banner appears at the top of every page within your myClubhouse site, just below the menu bar. Customise it using these settings.
Layout & Images: Use these options to set the general design of the Banner.
Banner Layout: Select one of the layout options from the drop-down. An example of what the Banner looks like can be seen at the top of the section.
Banner Content Vertical Alignment: Choose if you want the Banner elements to be vertically aligned at the top, middle, or bottom of the Banner. An example of what the Banner looks like can be seen at the top of the section.
Blend Banner into menu bar: If checked, the background of the menu bar will be transparent until the user scrolls down the page, at which point the menu bar will become solid again as the Banner gets scrolled out of view.
Banner Height: Set the fixed height of the Banner.
Left-side Banner Image: Select an image to be on the Banner on the left, often your club’s logo. An example of what the Banner looks like can be seen at the top of the section.
Left-side Banner Image Click URL: Set the link that the chosen image will go to when clicked. The home page is often a good option for this link. You can also choose to open the link in a new tab by checking the box.
Left-side Banner Tooltip: Set the text that will appear when the mouse rolls over the left-side Banner image. You can set this even if you don’t set a URL for the image. An example of what the Banner looks like can be seen at the top of the section.
Logo Image Height: Set the height of the left-side Banner image. An example of what the Banner looks like can be seen at the top of the section.
Right-side Banner Image: Select an image to be on the Banner on the right, often a secondary image, or advert. An example of what the Banner looks like can be seen at the top of the section.
Right-side Banner Image Click URL: Set the link that the chosen image will go to when clicked. You can also choose to open the link in a new tab by checking the box.
Right-side Banner Tooltip: Set the text that will appear when the mouse rolls over the right-side Banner image. You can set this even if you don’t set a URL for the image. An example of what the Banner looks like can be seen at the top of the section.
Right Banner Image Height: Set the height of the right side Banner image. An example of what the Banner looks like can be seen at the top of the section.
Banner Buttons: You can add buttons that appear in the banner, these are commonly used as quick registration links for prospective members. If the Banner Layout is “Logo and club name on the left”, the buttons will appear stacked on the right side of the banner, otherwise they will appear in a row in the centre of the banner, below the Club name, logo, and tagline. Click “Add button” and complete the wizard:
Icon: Select an icon to appear to the left of the Caption on the button.
Caption: The Title that will appear on the button.
URL: The button-click destination. If navigating within your myClubhouse site, you can use relative links as shown in the example.
Type: Choose the styling for the button from one of the options.
Open in new window: Choose if the link should be opened in a new tab or just redirected from the current page.
OK: Once happy with the details, click “OK” to add the button to the banner.
You can easily create a duplicate banner button by clicking on "Copy".
Banner Background: Set the background of the Banner. This can be a colour, an image, or both. If you select both an image and a colour, the colour will need its opacity reduced for the image to be visible behind it. You can do this by using the slider next to the colour picker.
Save Changes: Once happy with your choices for the Banner, click “Save Changes” to save. Refresh the page to see any changes that you have made.
Banner Text: Use these settings to set the text on the Banner.
Banner Club Name: The name of your organisation to be displayed on the Banner. An example of what the Banner looks like can be seen at the top of the section.
Banner Club Name Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the text colour of the Banner Club Name. An example of what the Banner looks like can be seen at the top of the section.
Banner Font: Click the “G” to search through Google Fonts, with a preview of each, and use it to select a font for the Banner Club Name. An example of what the Banner looks like can be seen at the top of the section.
Banner Font Size: Set the Font Size of the Banner Club Name. Enter a value or use the slider. An example of what the Banner looks like can be seen at the top of the section.
Banner Tag Line: A tagline below your club name on the Banner. An example of what the Banner looks like can be seen at the top of the section.
Banner Tag Line Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the text colour of the Banner tag line. An example of what the Banner looks like can be seen at the top of the section.
Banner Tag Line Font: Click the “G” to search through Google Fonts, with a preview of each, and use it to select a font for the Banner Tag Line. An example of what the Banner looks like can be seen at the top of the section.
Banner Tag Line Font Size: Set the Font Size of the Banner Tag Line. Enter a value or use the slider. An example of what the Banner looks like can be seen at the top of the section.
Save Changes: Once happy with your choices for the Banner, click “Save Changes” to save. Refresh the page to see any changes that you have made.
Border: The Border is a solid line at the bottom of the Banner between the Banner and the rest of the page.
Banner Border Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the Border Colour. An example of what the Banner looks like can be seen at the top of the section.
Banner Border Width: Set the width of the Banner Border. Enter a value or use the slider. An example of what the Banner looks like can be seen at the top of the section.
Save Changes: Once happy with your choices for the Banner, click “Save Changes” to save. Refresh the page to see any changes that you have made.
Footer Design: The Footer appears at the bottom of every page. It will always contain the copyright information, terms and conditions, privacy policy, and your site’s current version of myClubhouse. Make any changes to the Footer in this section.
Left-side Footer Image: Select an image to be displayed on the left side of the Footer; sometimes a link, or secondary logo. An example of what the Footer looks like can be seen at the top of the section.
Left-side Footer Image Click URL: Set the image-click destination URL. You can also choose to open the link in a new tab by checking the box.
Left-side Footer Tooltip: Set the text to display when the cursor hovers over the left-side Footer image. You can set this even if you don’t set a URL for the image. An example of what the Footer looks like can be seen at the top of the section.
Right-side Footer Image: Select an image to be displayed on the right side of the Footer; sometimes a link, or secondary logo. An example of what the Footer looks like can be seen at the top of the section.
Right-side Footer Image Click URL: Set the image-click destination URL. You can also choose to open the link in a new tab by checking the box.
Right-side Footer Tooltip: Set the text to display when the cursor hovers over the right-side Footer image. You can set this even if you don’t set a URL for the image. An example of what the Footer looks like can be seen at the top of the section.
Custom Footer Text: Enter any text you wish to include in the Footer. This will appear at the top of the middle section of the Footer. An example of what the Footer looks like can be seen at the top of the section.
Footer Text Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the Footer text colour. An example of what the Footer looks like can be seen at the top of the section.
Footer Background Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the background of the Footer. An example of what the Footer looks like can be seen at the top of the section.
Footer Border Colour: The Footer Border is the solid horizontal line that separates the Footer from the rest of the page. Select a shade of the primary or secondary colour, a specific colour, black or white for the Footer Border. An example of what the Footer looks like can be seen at the top of the section.
Footer Link Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the colours of the links in the Footer. An example of what the Footer looks like can be seen at the top of the section.
Save Changes: Once happy with your choices for the Footer, click “Save Changes” to save. Refresh the page to see any changes that you have made.
Auto-complete Elements: Auto-complete Elements are used throughout the site, often when selecting Users for form fields. Set the colours for them here.
Autocomplete Element Background Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the background of auto-complete Elements. An example of what the Auto-complete Elements look like can be seen at the top of the section.
Autocomplete Element Text Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the text of auto-complete Elements. An example of what the Auto-complete Elements look like can be seen at the top of the section.
Save Changes: Once happy with your choices for the Auto-complete Elements, click “Save Changes” to save. Refresh the page to see any changes that you have made.
General Page Element Colours: These settings control the general styling throughout your site. The only place that this can be overridden is on a CMS page if custom CSS styling is added to elements.
Heading Underline Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the line underneath any headings. Some example text can be seen at the top of the section.
Dividing Line Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the colour of dividing lines between sections of pages. Some example text can be seen at the top of the section.
Heading Text Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the heading text colour. Some example text can be seen at the top of the section.
Main Text Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the text colour. Some example text can be seen at the top of the section.
Link Text Colour: Select a shade of the primary or secondary colour, a specific colour, black or white for the colour of links. Some example text can be seen at the top of the section.
Heading Font: Click the “G” to search through Google Fonts, with a preview of each, and use it to select a font for headings on your site. Some example text can be seen at the top of the section.
Main Font: Click the “G” to search through Google Fonts, with a preview of each, and use it to select a font for all normal text on your site. Some example text can be seen at the top of the section.
Main Font Size: Set the Font Size of the normal site text. Enter a value or use the slider. Some example text can be seen at the top of the section.
Custom CSS: (Advanced) If you would like to add some custom styling to pages in myClubhouse, especially CMS pages, add them here. If you want to use the same styling classes across multiple CMS pages, this is a convenient way to include them across the board. Please only use if you understand CSS as this will be used throughout your site.
Save Changes: Once happy with your choices for the Page Elements, click “Save Changes” to save. Refresh the page to see any changes that you have made.
