Page Comparison

...

The site styles and colours apply to all pages of your site.

1. Sign in to your myClubhouse site with administrator-level priviledges and navigate to Admin > Settings > Site Styles & Colours.
2. First of all, select your two main site colours.

...

1. The main site colours should be strong, saturated colours. For any of the web site elements listed below you can choose lighter or darker shades of these two colours.
   Image Added
   When selecting any colour, you can enter the colour as RGB (denoted by rgb(xxx,xxx,xxx)), hexidecimal (denoted by #xxxxxx) or by draging the indicators on the pop-out graphic as shown.
2. Once the Primary and Secondary colours have been selected, the rest of the colours will be selected automatically. You can override any of these colours by selecting either a lighter or darker shade (from the first option):
   Image Added
   or by selecting a completely new colour (from the second option):
   Image Added
   A preview of element in question is displayed immediately.
3. Scroll to the bottom of the page and click Save Changes. You will then need to refresh the page to see the changes.

↑ Back to top

Anchor
headerFooter headerFooter

Header and Footer

...

1. Sign in to your myClubhouse site with administrator-level priviledges and navigate to Admin > Settings > Configure Site Images
2. The header and footer can each contain up to two images which can also be clickable links.
3. Left-side Bannder Image: this is traditionally your club's logo, but can be anything you wish.
   1. Click the yellow 'Change' button to upload a new image, the Image Upload pop-up appears.
      Image Added
      Click the button on the right-hand end of the blue toolbar to select and upload a new image. Use the other buttons on the toolbar to zoom, crop and rotate the image. The aspect ration is not fixed, but all images will be displayed with a height of 80 pixels on desktop devices. When you are happy with the size and position of your image, click the blue Upload button.The image is uploaded and saved immediately.
   2. If you wish for the image to link to a particular website or web page when clicked, enter the URL.
   3. Finally, enter some text about the image or the URL destination.This text will be displayed as a tooltip when a desktop user hovers their cursor over it.
   4. Changes are saved automatically.
      

...

2. Right-side Banner Image: this works exactly the same as the left-side banner image but is displayed on the right-hand side of the header.
3. Similarly, the left and right footer images are displayed on the left and right-hand sides of the footer at the bottom of every page.
4. Changes are all saved automatically on this page.
   
   

↑ Back to top

Anchor
image-carousel image-carousel

Image Carousel

...

Anchor
custom-sections custom-sections

Home Page Custom Sections 1, 2 & 3

This page allows you to insert custom text and HTML into your home page. There are three positions at which you can insert content:

• Section 1: Between the image carousel and the highlighted links
• Section 2: Between the highlighted links and the events/announcements
• Section 3

...

• : Between the events/announcements and the footer

Image AddedImage Added

1. Sign in to your myClubhouse site with administrator-level priviledges and stay on the Home Page.
2. The first custom section will be inserted beneath the image carousel, click the green Add Section button Image Added or, if you already have a custom section, hover your cursor over it and click the yellow edit button. If you cannot seet the button, navigate to Admin > Page Customisation > Customise Home Page. 
3. Scroll down the page to the section you wish to modify. Use the WYSIWYG html editor to add your own content.

4. If you know HTML and want to have more control over your design, click the left-hand buton in the toolbar Image Addedto edit the HTML code directly.

   Info
   You can use css style classes from Bootstrap 3 or add your own styles in the HTML. For more details on Bootsrap styles and responsive design, visit https://getbootstrap.com/docs/3.3/getting-started/.

   
   

5. It is essential to use responsive web design on any custom sections, to ensure your home page will look great on mobile devices and tablets.
6. Once you have finished adding your content, check the 'Enable' box and scroll to the bottom of the page to Save Changes.

7. View your home page to see how it looks, don't forget to check it on mobiles and tablets too! You will need to pay particular attention to any images and tables you may have added; they need careful styling to become responsive.

   Info
   title Tutorial
   Want to improve your responsive web design? Try this Bootstrap 3 Tutorial. myClubhouse uses the Bootstrap 3 Grid System.

   
   

↑ Back to top

Related articles

...