Style Guide

How to...

Additional Resources

Embed Responsively - generate an embeddable code so video(s) will automatically resize to accommodate a specific screen size (desktop/tablet/ mobile)

Training Call Recordings

Apply Font Styles

Styles Font Family/Size Color/HEX Color

H1 Title*

 Gochi Hand 44px Dark gray #393939

*Found on interior pages, H1 titles are reserved for the main header for accessibility & SEO purposes. To enable the header styling, make sure “Show Page Title” in the Page Properties view is checked:

 Screen_Shot_2021-11-15_at_17_42_39.png
Screen_Shot_2022-04-14_at_11_14_45.png

H2 Title

Gochi Hand 34px

Dark gray #393939

H3 Title

Gilmer 21px

Blue #00437C

H4 Title

Gilmer 18px

Dark gray #393939
H5 Title

Gochi Hand 16px

Dark gray #393939

Body/Paragraph

Open Sans 14px

Dark gray #8E8E8E

Hyperlink

 

Blue #00437C

How to...

Apply/select font styles via the Paragraph dropdown menu in the the WYSIWYG editor:

Screen_Shot_2022-04-14_at_11_17_59.png

  • if Page Title field is left blank, it will show the Navigation Title (the menu link).
  • for best SEO (search engine optimization) results, ensure only one H1 title per page is used

top

Make a Button

Styles CSS Wrapper Class Color/HEX

Button Example

make-buttons

Blue #00437C

Button Example

make-buttons bright-blue

Blue #007BC2

Button Example

make-buttons outline

Blue outline #00437C

How to...

  1. In Page Designer ("Edit This Page") view, add and/or edit the HTML Content Item by adding/highlighting text intended to become a button, e.g. Button Example:

    sg4.png

  2. Next, italicize the text that was just hyperlinked:Screen_Shot_2021-11-16_at_11_55_59.png

  3. To enable the button design, select the HTML Content Item and in the Properties tab, add make-buttons to the "CSS Wrapper Class Name" field:

    sg3.png

  4. Save (Publish). Note, the styling will not show when in editing mode, you'll need preview or publish to see the button.

Note
  • The italic <em> tag must live outside the hyperlink <a> tag to enable styling:
    <p><em><a href="http://website.com">Button Example</a></em></p>

top

Edit the Community News Slider

Example

Screen_Shot_2022-05-17_at_16_33_44.png

How To...

  1. In the public hero or the member dashboard, select an HTML Content Item with the class community-news, or copy and paste an existing one:



  2. Edit the h3 and paragraph text:



  3. Edit the link URL and text:

top

Add a CTA Button

Example

Screen_Shot_2022-05-17_at_17_16_04.png

How To...

  1. Select an HTML Content Item with the classes callout-card bg-image p-large, or copy and paste an existing one:

    Screen_Shot_2022-05-17_at_17_25_32.png

  2. Replace the image, and edit the h3 and paragraph text:

    Screen_Shot_2022-05-17_at_16_39_34.png

  3. Edit the h3 link URL and text:

    Screen_Shot_2022-05-17_at_17_35_06.png

top

Add a CTA Card

Example

Screen_Shot_2022-05-17_at_17_16_04.png

How To...

  1. Select an HTML Content Item with the class card, or copy and paste an existing one:

    Screen_Shot_2022-05-17_at_17_25_32.png

  2. Replace the image:

    Screen_Shot_2022-05-17_at_16_39_34.png

  3. Edit the link URL and text:

    Screen_Shot_2022-05-17_at_17_35_06.png

top

Add a CTA Icon Card

Example

Screen_Shot_2022-05-17_at_17_16_04.png

How To...

  1. Select an HTML Content Item with the class tile, or copy and paste an existing one. Apply colour and icon classes from the table below:

    Screen_Shot_2022-05-17_at_17_25_32.png

  2. Edit the link URL and text:

    Screen_Shot_2022-05-17_at_17_35_06.png

Colour and Icon classes

Class Result Example
purple Icon will be purple
*Example tile
green Icon will be green
*Example tile
red Icon will be red
*Example tile
yellow Icon will be yellow
*Example tile
calendar Icon will be a calendar
*Example tile
card-icon Icon will be a card
*Example tile
books Icon will be a stack of books
*Example tile
question Icon will be a question mark
*Example tile

top

Edit the Homepage CTA

Example

Screen_Shot_2022-05-17_at_17_16_04.png

How To...

  1. Select the HTML Content Item with the classes bg-image bottom-cta make-buttons white p-large, or copy and paste an existing one:

    Screen_Shot_2022-05-17_at_17_25_32.png

  2. Swap out the image:



  3. Swap out the H2 and paragraph text:



  4. Edit the link URL and text:

    Screen_Shot_2022-05-17_at_17_35_06.png

top

Add a Quotation

Example

Screen_Shot_2022-05-17_at_17_16_04.png

How To...

  1. Select an HTML Content Item with the classes quote p-large, or copy and paste an existing one:

    Screen_Shot_2022-05-17_at_17_25_32.png

  2. Swap out the quotation in the Heading 3:

    Screen_Shot_2022-05-19_at_12_14_08.png

  3. Swap out the attribution in a paragraph block:

    Screen_Shot_2022-05-19_at_12_14_14.png

top

Add Mentor Messaging

Example

Screen_Shot_2022-05-17_at_17_16_04.png

How To...

  1. Select an HTML Content Item with the class my-mentor, or copy and paste an existing one:

    Screen_Shot_2022-05-17_at_17_25_32.png

  2. Add a CSS Wrapper Class that is the mentor's name, in all lowercase, with hyphens in place of spaces:

    Screen_Shot_2022-05-19_at_12_14_08.png

  3. Select an HTML Content Item with the classes user-key hidden, or copy and paste one:



  4. Add the same CSS Wrapper Class as in step 2:



  5. In a new tab, navigate to the mentor's profile:



  6. In the address bar, copy the user key from the URL:



  7. Return to the HTML Content Item with the class user-key, and paste the user key into the WYSIWYG editor:

top

Add a Member Dashboard Link

Example

Screen_Shot_2022-05-17_at_17_16_04.png

How To...

  1. Select an HTML Content Item with the class dashboard-link, or copy and paste an existing one. Apply an icon class from the table below:

    Screen_Shot_2022-05-17_at_17_25_32.png

  2. Edit the link URL and text:

    Screen_Shot_2022-05-17_at_17_35_06.png

Colour and Icon classes

Class Example
profile
*Example link
inbox
*Example link
contacts
*Example link
contributions
*Example link
networks
*Example link
communities
*Example link

top

Mentor Match Page

How to Add a Video Modal

Example: Video Headshot that triggers when Play Button is Pressed

Example: Video Modal Open after Play button is pressed

How To...

  1. Select an HTML Content Item with the class video-headshot, or copy and paste an existing one:

    Screen_Shot_2022-05-17_at_17_25_32.png
  2. Add a CSS Wrapper Class that is the mentor's name, in all lowercase, with hyphens in place of spaces:
  3. Select an HTML Content Item with the class video, or copy and paste an existing one:
    video-css-2.jpg
  4. Add the same CSS Wrapper Class as in step 2:

  5. Edit the video Content Item and Use the Insert/Edit Media Tool option to Upload a Video of the Mentor you would like to add


  6. Select 'Save' and 'Publish' To see the newly added Mentor headshot and video modal.

Edit Accordion/Expandable Text

Style (top) CSS Wrapper Class

Screenshot_2021-01-29_at_4_36_49_PM.png

accordion-heading
Style (bottom) CSS Wrapper Class
sg12.png

accordion-text container

How to...

Add two new HTML Content Items stacked together:

TOP

  • for an accordion to work, there needs to be text designated as a "button" to click on and trigger expansion of the bottom content

  • to create the accordion "button" edit the HTML Source code and add a <button type="button"> tag, eg. <button type="button">Creating An Account</button>Screenshot_2021-01-29_at_4_46_28_PM.png

  • Select the HTML Content Item and add accordion-heading into the CSS Wrapper Class Name field

BOTTOM

  • In the bottom HTML Content Item, add content such as text and photos but all of it must live within this one HTML Content Item

  • Select  the HTML Content Item and add accordion-text container into the CSS Wrapper Class Name field

Note

  • accordion/expandable text content requires two (2) stacked HTML Content Items with their respective CSS Wrapper Class names appliedScreenshot_2021-01-29_at_4_46_49_PM.png

  • the above steps must be repeated for each/every accordion
  • only one bottom content item may be associated with top item

Add A Mentor Community Link

Example: Mentor hasn't been requested

Example: Mentor request pending

request-mentor-pending.jpg
Example: Mentor request approved

How to...

  1. Add a Community List Widget
  2. Select the Appropriate Mentor Community in the Communities Dropdown
  3. Add the class mentor-community-list to the CSS Wrapper Class Name Field to the newly added Community List widget
  4. Select 'Save and then 'Publish' to see the Mentor Community List

To Create a Mentor Community

  1. Select 'Admin' in the Superadmin toolbar at the top of the page
  2. Navigate to the Communities List
  3. Select the + Symbol to add a new Community
  4. You will see a modal window pop up with Community Settings. 
    Here you can add the Community Name, What Features the Community has Dsicussions, Q&A and Library, Event Creation Permissions, etc.
    Mentor Communities need to have Coach Mentor Communities Selected for Type and Request to Join for Join Permissions

top

Add Mentor Automation

When there is a new mentor added to the team, make the following changes to automation rules:

1. Create a new security group called "NAME mentees" (see format of other coaching security groups)

2. In "Automation Rules - Coaching Type" copy one of the existing "Add to security group" rules and change the security group, the community, and rename it. Save.

3. Open the List Builder to the "Assigned Coaches" list. Add the new community to the list with the rule "Is a  member of the specified community". Save.

4. When you add a new "My Mentor" box on the Coaching homepage, change the view permissions to "NAME mentees" security group.

top