Style Guide

How To – Editing Essentials

Font Sizes & Styles

Styles Font Family/Size Color/HEX Color

H1 Title*

 Lato 48px Blue #002F6C

H2 Title

Lato 37px

Blue #002F6C

H3 Title

Lato 21px

Blue #002F6C

H4 Title

Lato 18px

Black #292929

Body/Paragraph

Lato 18px

Black #292929

Hyperlink

 Lato ~

Blue #0773BE

How to...

  • select and apply font styles via the Paragraph dropdown menu in the WYSIWYG ("What You See is What You Get") editor:

    Screen_Shot_2022-12-22_at_13_14_44.png

Note

  • *found on interior pages, H1 titles are reserved for the main header for web accessibility & SEO purposes

top

Button Styles

Styles CSS Wrapper Class Color/HEX

Button Example

make-buttons

Blue #017ACD

Button Example

make-buttons dark-outline

Blue #002F6C

How to...

  1. In Page Designer ("Edit This Page"), add or edit an HTML Content Item by creating a text link, e.g.:

    sg3.png

  2. Next, italicize the text that was just hyperlinked:sg5.png

  3. To enable the button design, select the HTML Content Item and in the Properties tab, add make-buttons or make-buttons dark-outline (depending on button style you want) 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:
    <em><a href="http://website.com">Button Example</a></em>

top

Image Management

Recommended Size Specifications

  • homepage hero size: minimum 2000px width x 400px height

Responsive Image Class

  • class="img-responsive"

Occasionally, after uploading & inserting an image, the image may be missing a snippet of code that would automatically resize it.

If your image is too large and your layout looks off, open the HTML Content Item that houses the image. Next, open the WYSIWYG editor and click on HTML:

Screenshot_2023-02-01_at_5_15_49_PM.png


This will pop open the Source code window.  Insert the following code, class="img-responsive". It will look something like this:

Screenshot_2023-02-01_at_5_15_23_PM.png

top

Social Media Icons & Links 

Example
social-links

How to... Add/Change Icons

  1. Select the Footer Top Content from Site Wide Content:
  2. Click Here to find the available icons & open the HTML editor:

  3. Select the icon you wish to use (example Twitter), being sure to include the opening and closing <li> tags, and copy the content:

    Screenshot_2023-02-08_at_2_43_18_PM.png

    Return to the page you wish to wish to add icons to and click to open and open the HTML editor, same as in step 2.

  4. Here, paste the copied code right before the closing <ul> tags:

  5. Save (Publish).

top

Embed a Video Clip

Example

How to...

  1. Find your video source and copy the URL - e.g., from YouTube the link will look like this: https://www.youtube.com/watch?v=Z12UNEgGYhE

  2. Next, visit the Embed Responsively website: http://embedresponsively.com

  3. Here, paste the video link into the field and click 'Embed':

    Screenshot_2021-01-29_at_5_08_32_PM.png

  4. A preview of your video will appear:

  5. Scroll down and copy the generated embed code:

    Screenshot_2021-01-29_at_5_08_52_PM.png

  6. Go to the HTML Content Item where the video will live on your webpage. Open the WYSIWYG editor and click HTML to open the Source code modal. Paste the code here:

    Screenshot_2023-02-08_at_1_14_05_PM.png

  7. Save/Publish.

Note

  • once embedded, the video code will appear as a dot surrounded by white space:

    Screen_Shot_2020-11-10_at_12_50_00_PM.png

  • after saving and previewing (or publishing) your page - the video should appear!

  • always use this method to ensure video content sizes & resizes and fit to any screen size (desktop, tablet, mobile)

Post a Blog

Example
Blog Style

How to...

  1. Click on the "Admin" menu (viewable to Site Admins only) and click on "Post to Latest News":

    Add Blog Post link

  2. Clicking on the link will open the Blog posting module. Here, add a title, body text and Save/Publish (or Schedule or Save as Draft)

    Screenshot_2021-02-01_at_12_48_27_PM.png

  3. Select options for "Who can ready your blog entry?" and "Who can make comments on this?":

    Screenshot_2021-02-01_at_12_43_52_PM.png

  4. Add a featured image. This image should be approximately 1200px wide and 600px tall.

  5. Save.

top

How To – Homepage Content

Hero

CSS WRAPPER CLASS: community-hero make-buttons overline
Screen_Shot_2023-02-01_at_13_17_53.png

HTML Source Example:

<p><img src="https://higherlogicdownload.s3.amazonaws.com/CFAI/fc956f97-7209-4d4a-86ca-e7ca8baf70af/UploadedImages/Community_Site/public-hero.png" alt="CFA Institute Volunteer Community" caption="false" class="img-responsive"></p>
<p><strong>CFA Institute Community</strong></p>
<h1>Engage and network with your peers in the investment industry</h1>
<p><em><a href="https://www.cfainstitute.org/Account/CreateAccount?returnUrl=https%3A%2F%2Fwww.community.cfainstitute.org%2Fhome">Create An Account</a></em></p>

How to...

  1. Select the homepage on the navigation panel on the Admin control panel

    sg4.png

  2. Select the hero content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Itemsg5.png

  4. Make sure the content item  has the CSS Wrapper Class community-hero make-buttons overline assigned.

  5. Save (Publish). 

Add an Event

Style
Event Page Example

How to...

  1. In the "Admin" menu (visible only to Site Admins, select "Add an Events")

    Screen_Shot_2023-02-01_at_14_14_33.png

  2. Add a title and select the appropriate event type.

  3. Fill out the content & save/publish. Learn more about publishing an event.

top

Quicklinks

CSS WRAPPER CLASS: quick-links-title
Screen_Shot_2023-02-01_at_13_17_53.png

HTML Source Example:

<h2>QUICK LINKS</h2>

How to...

  1. Select the homepage on the navigation panel on the Admin control panel

    sg4.png

  2. Select the quick link title content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Itemsg5.png

  4. Make sure the content item  has the CSS Wrapper Class quick-links-title assigned.

  5. Save (Publish). 

Quicklinks

CSS WRAPPER CLASS: quick-link
Screen_Shot_2023-02-01_at_13_17_53.png

HTML Source Example:

<p><i class="fa-light fa-globe"></i><a href="https://www.cfainstitute.org/en/societies/directory#sort=%40itemheadertitle%20ascending" target="_blank" rel="noopener">Find a Society</a></p>

How to...

  1. Select the homepage on the navigation panel on the Admin control panel

    sg4.png

  2. Select the quick link content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Itemsg5.png

  4. Make sure the content item  has the CSS Wrapper Class quick-links assigned.

  5. Save (Publish). 

top

Discussions

CSS WRAPPER CLASS: discussions
Screen_Shot_2023-02-01_at_13_17_53.png

Parameters:

IncludeExternalAll="false" IncludeAll="false" IncludeDiscussions="true" ShowParentLink="false" ShowMoreLink="true" DaysBack="9999" DaysForward="9999" ContributorLabel="By:" PageSize="7" MoreLinkText="See More" MoreLinkUrl="allrecentposts"

How to...

  1. Select the homepage on the navigation panel on the Admin control panel

    sg4.png

  2. Select the All Content List you would like to editsg5.png

  3. Update the parameters

  4. Make sure the content item  has the CSS Wrapper Class discussions assigned.

  5. Save (Publish). 

top

Volunteer Opportunities

CSS WRAPPER CLASS: volunteer-opportunities
Screen_Shot_2023-02-01_at_13_17_53.png

Parameters:

IncludeExternalAll="false" IncludeAll="false" ShowParentLink="false" ShowMoreLink="true" MoreLinkText="See More" IncludeDiscussions="false" IncludeVolunteerOpportunities="true" PageSize="3" ShowContributor="false" ShowContributorPicture="false" DaysBack="9999" DaysForward="9999" MoreLinkUrl="opportunities-list-public"

How to...

  1. Select the homepage on the navigation panel on the Admin control panel

    sg4.png

  2. Select the All Content List you would like to editsg5.png

  3. Update the parameters

  4. Make sure the content item  has the CSS Wrapper Class volunteer-opportunities assigned.

  5. Save (Publish). 

top

Upcoming Events

CSS WRAPPER CLASS: n/a
Screen_Shot_2023-02-01_at_13_17_53.png

Parameters:

ShowCalendarThumbnail="true" ShowLinkToCalendar="true" LinkToCalendarText="See More" NumberToShow="3"

How to...

  1. Select the homepage on the navigation panel on the Admin control panel

    sg4.png

  2. Select the Upcoming Events Listsg5.png

  3. Update the parameters

  4. Save (Publish). 

top

Suggested Contacts

CSS WRAPPER CLASS: n/a
Screen_Shot_2023-02-01_at_13_17_53.png

How to...

  1. Select the homepage on the navigation panel on the Admin control panel

    sg4.png

  2. Select the People You May Know widgetsg5.png

  3. Update the parameters

  4. Save (Publish). 

top

Member Directory Button

CSS WRAPPER CLASS: make-buttons suggested-contacts-btn
Screen_Shot_2023-02-01_at_13_17_53.png
HTML Source Example

<p><em><a href="directory">Member Directory</a></em></p>

How to...

  1. Select the homepage on the navigation panel on the Admin control panel

    sg4.png

  2. Select the Member Directory Content Itemsg5.png

  3. Use the WYSIWYG to update the Member Directory 

  4. Make sure the content item  has the CSS Wrapper Class make-buttons suggested-contacts-btn assigned.

  5. Save (Publish). 

top

Logged Out Stats Section

CSS WRAPPER CLASS: overline stats-section-title

HTML Source Example:

<p><strong>About CFA Institute</strong></p>
<h2>Positively impacting the investment profession since 1947</h2>

How to...

  1. Select the homepage on the navigation panel on the Admin control panel

    sg4.png

  2. Select the quick link content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Itemsg5.png

  4. Make sure the content item  has the CSS Wrapper Class overline stats-section-title assigned.

  5. Save (Publish). 

Logged Out Stats

CSS WRAPPER CLASS: statistic-heading p-large

HTML Source Example:

<h2>160+</h2>
<p>Local Societies Worldwide</p>

How to...

  1. Select the homepage on the navigation panel on the Admin control panel

    sg4.png

  2. Select the quick link content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Itemsg5.png

  4. Make sure the content item  has the CSS Wrapper Class statistic-heading p-large assigned.

  5. Save (Publish). 

top

Member Dashboard Link 

CSS WRAPPER CLASS: icon profile col-sm-6 dashboard-link

HTML Source Example

<p><a href="profile">My Profile</a></p>

How to...

  1. Select the member dashboard on the navigation panel on the Admin control panel (Located underneath the Home Page)

    sg4.png

  2. Select the content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Item

  4. Make sure the content item  has the CSS Wrapper Class icon profile col-sm-6 dashboard-link assigned.

  5. Save (Publish). 

Member Dashboard Link 

CSS WRAPPER CLASS: icon notifications col-sm-6 dashboard-link

HTML Source Example

<p><a href="inbox">My Notifications</a></p>

How to...

  1. Select the member dashboard on the navigation panel on the Admin control panel (Located underneath the Home Page)

    sg4.png

  2. Select the content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Item

  4. Make sure the content item  has the CSS Wrapper Class icon notifications col-sm-6 dashboard-link assigned.

  5. Save (Publish). 

Member Dashboard Link 

CSS WRAPPER CLASS: icon contacts col-sm-6 dashboard-link

HTML Source Example

<p><a href="contacts">My Contacts</a></p>

How to...

  1. Select the member dashboard on the navigation panel on the Admin control panel (Located underneath the Home Page)

    sg4.png

  2. Select the content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Item

  4. Make sure the content item  has the CSS Wrapper Class icon contacts col-sm-6 dashboard-link assigned.

  5. Save (Publish). 

Member Dashboard Link 

CSS WRAPPER CLASS: icon communities col-sm-6 dashboard-link

HTML Source Example

<p><a href="mycommunities">My Communities</a></p>

How to...

  1. Select the member dashboard on the navigation panel on the Admin control panel (Located underneath the Home Page)

    sg4.png

  2. Select the content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Item

  4. Make sure the content item  has the CSS Wrapper Class icon communities col-sm-6 dashboard-link assigned.

  5. Save (Publish). 

Member Dashboard Link 

CSS WRAPPER CLASS: icon network col-sm-6 dashboard-link

HTML Source Example

<p><a href="networks">My Networks</a></p>

How to...

  1. Select the member dashboard on the navigation panel on the Admin control panel (Located underneath the Home Page)

    sg4.png

  2. Select the content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Item

  4. Make sure the content item  has the CSS Wrapper Class icon network col-sm-6 dashboard-link assigned.

  5. Save (Publish). 

Member Dashboard Link 

CSS WRAPPER CLASS: icon settings col-sm-6 dashboard-link

HTML Source Example

<p><a href="preferences">My Settings</a></p>

How to...

  1. Select the member dashboard on the navigation panel on the Admin control panel (Located underneath the Home Page)

    sg4.png

  2. Select the content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Item

  4. Make sure the content item  has the CSS Wrapper Class icon settings col-sm-6 dashboard-link assigned.

  5. Save (Publish). 

top

Member Dashboard Second Column Title

CSS WRAPPER CLASS: second-column small-h2

How to...

  1. Select the member dashboard on the navigation panel on the Admin control panel (Located underneath the Home Page)

    sg4.png

  2. Select the content item you would like to editsg5.png

  3. Use the Name or Title Field to Edit the Title for the Second Column

  4. Make sure the content item  has the CSS Wrapper Class second-column small-h2 assigned.

  5. Save (Publish). 

Member Dashboard Second Column Button

CSS WRAPPER CLASS: make-buttons second-column

Html Example Source

<p><em><a href="https://community.cfainstitute.org/profile">Add Profile Photo</a></em></p>

How to...

  1. Select the member dashboard on the navigation panel on the Admin control panel (Located underneath the Home Page)

    sg4.png

  2. Select the content item you would like to editsg5.png

  3. Use the WYSIWYG to Edit the Content

  4. Make sure the content item  has the CSS Wrapper Class make-button second-column assigned.

  5. Save (Publish). 

Volunteer Video Text Section

CSS WRAPPER CLASS: overline banner-text

HTML Source Example:

<p><strong>Build Your Network</strong></p>
<h2>How to Volunteer</h2>
<p><span>Through short-term engagements, project-based opportunities, committee appointments, and more, volunteering can equip you with new professional networks, refined skills, strengthened competencies, and, in many cases, professional learning credit.</span><br><br><span>Select your categories of interest and view open opportunities below.</span></p>

How to...

  1. Select the Volunteer Profile on the navigation panel on the Admin control panel

    sg4.png

  2. Select the content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Itemsg5.png

  4. Make sure the content item  has the CSS Wrapper Class overline banner-text assigned.

  5. Save (Publish). 

Volunteer Video Button Section

CSS WRAPPER CLASS: overline banner-text

HTML Source Example:

<p><em><a onclick="openInterestsModal();">Categories of Interest</a></em></p>

How to...

  1. Select the Volunteer Profile on the navigation panel on the Admin control panel

    sg4.png

  2. Select the content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Itemsg5.png

  4. Make sure the content item  has the CSS Wrapper Class make-buttons interests-button banner-text cta-buttons white assigned.

  5. Save (Publish). 

Volunteer Video Section 

CSS WRAPPER CLASS: banner-video

How to...

  1. Select the homepage on the navigation panel on the Admin control panel

    sg4.png

  2. Select the content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Item

  4. Make sure the content item  has the CSS Wrapper Class banner-video assigned.

  5. Save (Publish). 

Member Dashboard Announcements

CSS WRAPPER CLASS: third-column

Text Parameters

DaysBack="9999" NumberToShow="3" ShowAddEditDelete="false" ShowReadMoreLink="true" ReadMoreText="Learn More" CommunityKey="d0147d42-30c6-427c-86a9-01850e2c2788" ReadMoreUrl="announcements" NumOfCharsToDisplay="100" ShowAuthor="false" ShowPublishDate="false"

How to...

  1. Select the member dashboard on the navigation panel on the Admin control panel (Located underneath the Home Page)

    sg4.png

  2. Select the Announcements List Widget to editsg5.png

  3. Update the Parameters you would like

  4. Save (Publish). 

To Add an Announcement

  1. Select "Update Dashboard Announcements" from the Admin Dropdown
  2. Use the Add button to add an anouncement
  3. Fill Out the Modal with your new announcements
  4. Select "Save"

Logged Out Video Text Section

CSS WRAPPER CLASS: video-cta-text overline make-buttons

HTML Source Example:

<p><strong>Global Network of Volunteers</strong></p>
<h2>Volunteers provide $1M+ and 25,000+ hours in value annually</h2>
<p>We aim to create an environment where investors’ interests come first, markets function at their best, and economies grow.</p>
<p><em><a href="https://community.cfainstitute.org/volunteeropportunities/i-volunteer">Get Started</a></em></p>

How to...

  1. Select the homepage on the navigation panel on the Admin control panel

    sg4.png

  2. Select the content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Itemsg5.png

  4. Make sure the content item  has the CSS Wrapper Class video-cta-text overline make-buttons assigned.

  5. Save (Publish). 

Logged Out Video 

CSS WRAPPER CLASS: video-container

How to...

  1. Select the homepage on the navigation panel on the Admin control panel

    sg4.png

  2. Select the content item you would like to editsg5.png

  3. Use the WYSIWYG to edit the Content Item

  4. Make sure the content item  has the CSS Wrapper Class video-container assigned.

  5. Save (Publish). 

top

Editing Essentials

Homepage Content

Volunteer Video

Training Call Recording

Click here