You are browsing myClubhouse Knowledge Base

CMS: Advanced

Owned by Peter Hickson, created
Last updated: Jun 20, 2023 by Joanne Shovelton
5 min read

While the CMS has a full WYSIWYG editor, if you know what you are doing, you can use some more technical skills to enhance your CMS pages. Here are a few suggestions:

This guide builds on the main CMS guide: CMS

Embed Google Docs

Google Docs are an excellent collaboration tool for working on documents together. You sometimes also want to include the information in them in your CMS page, but don’t want to have to update the page every time the document changes. This is where embedding comes into play.

  1. Navigate to your Google Doc from your Google Drive.

  2. Click File > Share > Publish to Web.

  3. Click “Embed”.

  4. Click “Publish”.

  5. Click “OK” to confirm.

  6. Copy the code.

  7. Navigate to your myClubhouse site and the CMS page you want to add the Google Doc to.

  8. Edit the page.

  9. Insert a new block or component.

  10. Click “Markdown”.

  11. Paste in the code.

  12. Save the page as a draft.

  13. The Google Doc will likely not look correct on the page so now we need to tweak the styling.

  14. Edit the page.

  15. Edit the block.

  16. Click “Edit Markdown”.

  17. Within the iframe tag, add “style=”width:100%; height: 100%;” after “<iframe”, but before “src”.

  18. Within the figure tag, add “style=”width:100%; height: 550px;” after <figure” but before “>”. You can replace 550px with a value of your choosing.

  19. Save the page as a draft.

  20. If you are happy with the styling, publish the page. If not, adjust the height in the figure tag to a size that works for your page. This may take a few attempts.

Embed Google Maps

A map can be a great way to help your new and existing members and visitors find your club. While one can be included on the Contact Us page, you may want someone on another CMS page or the Home page. Follow the instructions below to embed a Google Map:

  1. Navigate to Google Maps.

  2. Find the location, likely your club.

  3. Click “Share”.

  4. Click “Embed a map”.

  5. Click “COPY HTML”.

  6. Navigate to your myClubhouse site and the CMS page you want to add the Google Map to.

  7. Edit the page.

  8. Insert a new block or component.

  9. Click “Markdown”.

  10. Paste in the code.

  11. Save the page as a draft.

  12. If the styling is not right, you can change the height and width options within the code, similar to the Google Doc example above.

  13. Once happy with the Map, publish the page.

CSS

CSS is used alongside HTML to adjust how elements look on the page. Some styling will be generated from your site’s Site Styles and Colours, but you can further customise them for your CMS page. You have two main options for CSS in the CMS, inline styling or internal styling.

Bootstrap

myClubhouse has the standard bootstrap stylesheets running behind it so you can include any standard bootstrap classes and styles in your CSS. The page designs/styles should all be based on the 12-column grid system which is the basis behind the responsive design used throughout myClubhouse.

Learn more about Bootstrap here: Bootstrap

Inline Styling

This involves adding styling to individual elements and tags within the code. Within a tag, simply add ‘style=””' and then add any CSS properties that you want to apply to the element. In this example, this paragraph’s font size will be doubled.

Internal Styling

Internal styling is where you have a block with all your CSS in one place at the beginning of your HTML. You can use the style tag to then enter elements, classes, and IDs. These styling options will be used throughout the page, except where there is inline styling, which takes precedence.

Learn more about CSS and all the different options available here: CSS Tutorial

Other Tips and Tricks

HTML Editor

When working on the HTML of your CMS page in the HTML Editor, you can sometimes want to make the same change in several places. If you hold Control (Command on a Mac) and click in several places, you will enter multi-cursor view so you can type in several places at once. To go back to one cursor, release Control/Command and click elsewhere in the editor.

Inspect Element

myClubhouse is fully responsive and your members are likely viewing your CMS pages across a range of devices with varying screen sizes. Google Chrome has a great feature that allows you to view your page in a smaller screen without having to switch to another device.

On your CMS page, right click anywhere on the page and click “Inspect”.

From here you can adjust the dimensions of the view to preset screen sizes, or to be responsive to how you resize it.