Syndicated - Website 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. Click Here to find the available icons & open the HTML editor:

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

    Screenshot_2023-02-08_at_2_43_18_PM.png

  3. 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).

How to... Add/Change Icon Links

  1. In the content item, hover over the dot in the top right corner and click on the pencil to edit:

    social-icon-edit

  2. Highlight the icon you want to change, and click the link button to change the link:

    Screen_Shot_2022-12-23_at_16_10_18.png

  3. Save (Publish).

top

Post a Blog to Latest News

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

Find Your Draft Blog Post(s)

Latest News draft blog posts are saved to your personal CFA Institute Community profile page:

View Your Community Profile

How to...

  1. To find your draft posts, first navigate to your Community profile. Your profile will open in a new window - note that you will now be in the CFA Institute Community website, not your Society site. 

  2. In the tabs bar, click on "My Contributions" to open the dropdown list, select "My List of Contributions"

  3. Find your blog post in the listed content and select "edit draft" to open your blog in the Blog Editor view to edit & save again as a draft, schedule for later, or publish immediately:

Learn More – scheduling or drafting blog content: https://support.higherlogic.com/hc/en-us/articles/360032700372-Schedule-Draft-Content

top

Add an Event

Style
Event Page Example

How to...

  1. In the "Admin" menu (visible only to Site Admins", select "Add and/or Manage 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

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)

top

Grey Backgrounds

Example Class
bg-grey

How to...

  1. In the Page Designer ("Edit This Page"), add a new single-column row:

  2. Tick the 'full-width row' checkbox:

  3. Add the class bg-grey to the CSS Wrapper Class field. If this row does not appear directly above the footer, it is advisable to add the margin-bottom-45 class to the row as well, to ensure there's adequate spacing between the grey row and the subsequent content:
  4. Nest another row with your preferred layout into this row:
  5. Add content to the nested row:

  6. Save (Publish). 

top

Log Out of Your Site

Tip! Without logging out, to quickly see what the public sees on your website, use the "Incognito" feature of your web browser. 

Your account will timeout and automatically log out if you are inactive after a period of time.

If you need to log out to switch accounts, you can do so by visiting the CFA Institute Community website:

Visit the CFA Institute Community

How to...

  1. In the upper right side of the CFA Institute Community website, if you are logged in there will be a circle with your account name's initials, e.g.:

  2. Click the circle to open the window. Click "Logout"

  3. To sign back in, visit your specific Society website and use the ADMIN link in the site footer

top

How To – Homepage Content

Hero Title & Background Image

Example
Screen_Shot_2023-02-01_at_13_17_53.png

How to...

  1. Hover over the dot in the right-hand corner of the title, and click to edit:

    sg4.png

  2. Swap out the image. Note that for best results the image should be at least 2000px wide and 400px tall, and will be cropped to different dimensions based on the screen size and the aspect ratio of the hero.sg5.png

  3. Swap out the H1 text:sg5.png

  4. Save (Publish). 

top

top

Hero Buttons 

Example
Screen_Shot_2023-02-01_at_13_17_53.png

How to...

  1. Hover over the circle in the top right corner of the button you wish to edit, and click to edit:

    sg4.png

  2. Create a button, following the instructions above.

  3. Save (Publish). 

Note:

  • The first button in the hero will be white, and all subsequent buttons will be transparent with white outlines.

top

Hero News & Announcements Slider 

Example
Screen_Shot_2023-02-01_at_13_17_53.png

How to...

  1. In "Edit Navigation", select the "Society News Carousel" page:

    sg4.png

    Alternatively, on the homepage, hover over the dot in the top right corner and click to edit, then skip to step 4:

  2. At the bottom of the right-hand column, click "Edit":

  3. Select an HTML content item with the classes news-slide make-link overline, or copy and paste to create a new one:
  4. Swap out the h6, h3, and paragraph text:
  5. Swap out the link, following the instructions above.

  6. Save (Publish). 

top

Flex/Promo Boxes

Example Class

Flex/Promo Box

Suspendisse placerat dignissim nisl, eu rhoncus nibh feugiat ut. Nunc sollicitudin nunc mauris, eget semper odio eleifend eu.

*Learn More
 make-buttons flex-box

How to...

  1. On the homepage, hover over the dot in the top right corner and click on the pencil to edit:

  2. Swap out the h3 and paragraph text:
    Screen_Shot_2022-12-23_at_13_31_01.png
  3. Swap out the link, following the instructions above.

  4. Save (Publish). 

top

Quick Links

Example Class
quick-links make-buttons

How to...

  1. On the homepage, hover over the dot in the top right corner and click on the pencil to edit:

  2. Swap out a link, or hit ENTER/RETURN to add a new one:
    Screen_Shot_2022-12-23_at_13_31_01.png
  3. Create the link, following the instructions above.

  4. Save (Publish). 

top

Sponsors

Example Class
 sponsor

How to...

  1. On the homepage, hover over the dot in the top right corner and click on the pencil to edit:sg4.png

  2. Swap out the image - either upload a new logo or navigate to the images folder and select a logo to replace the placeholder:

    Screen_Shot_2022-12-23_at_13_31_01.png

  3. Next, make sure the logo has a link directing to the sponsor's website. Click on the image and select the Insert/Edit Link icon to update it:

    Screen_Shot_2022-12-23_at_15_35_03.png

  4. Save (Publish). 

Notes

  • you must include a hyperlink for each logo to enable the background style - if a sponsor does not have a website, use a hashtag as a placeholder

  • although the theme will automatically resize your logo, for best results logos should be closely cropped (no extra white space), approximately 50px tall and between 75px - 250px wide

  • to add or remove sponsors, contact societysupport@cfainstitute.org

top

Bottom Feature Block

Example Class
flex-image

How to...

  1. On the homepage, hover over the dot in the top right corner and click on the pencil to edit:

  2. Swap out the image. For best results, this image should be approximately 1000px wide and 600px tall; as with the hero image, it will be cropped and resized based on the screen size.
  3. To edit the text, select the HTML Content Item on the right:
    Screen_Shot_2022-12-23_at_15_35_03.pngAlternatively, on the homepage, hover over the dot in the top right corner and click on the pencil to edit:
  4. Swap out the H2, paragraph text, and link (following the instructions above for a button):

  5. Save (Publish). 

top

 

How To...

Editing Essentials

Homepage Content

Content & Style References

Watch Admin Editor Training Videos »

View Interior Page Examples »

View Homepage Examples »

Higher Logic Resources

Knowledge Base Articles

Advanced User Articles