Web 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:

Note

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

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:

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

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

In Page Designer ("Edit This Page"), add or edit an HTML Content Item. The button should be the only element in the widget, no other text or images should be added to it.
Add the button text and link for it:
Next, italicize the text that was just hyperlinked:
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:
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  tag must live outside the hyperlink <a> tag to enable styling:
<a href="http://website.com">Button Example</a>

Social Media Icons & Links

Example

How to... Add/Change Icons

Click Here to find the available icons & open the HTML editor:
Select the icon you wish to use (example Instagram), being sure to include the opening and closing <li> tags, and copy the content:
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.
Here, paste the copied code right before the closing <ul> tags:
Save (Publish).

How to... Add/Change Icon Links

In the content item, hover over the dot in the top right corner and click on the pencil to edit:
Highlight the icon you want to change, and click the link button to change the link:
Save (Publish).

top

Post a Blog to Latest News

Example

How to...

Click on the "Admin" menu (viewable to Site Admins only) and click on "Post to Latest News":
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)
Select options for "Who can ready your blog entry?" and "Who can make comments on this?":
Add a featured image. This image should be approximately 1200px wide and 600px tall.
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...

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.
In the tabs bar, click on "My Contributions" to open the dropdown list, select "My List of Contributions"
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

How to...

In the "Admin" menu (visible only to Site Admins", select "Add and/or Manage Events::
Add a title and select the appropriate event type.
Fill out the content & save/publish. Learn more about publishing an event.

top

Embed a Video Clip

Example

How to...

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
Next, visit the Embed Responsively website: http://embedresponsively.com
Here, paste the video link into the field and click 'Embed':
A preview of your video will appear:
Scroll down and copy the generated embed code:
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:
Save/Publish.

Note

once embedded, the video code will appear as a dot surrounded by white space:
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...

In the Page Designer ("Edit This Page"), add a new single-column row:
Tick the 'full-width row' checkbox:
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:
Nest another row with your preferred layout into this row:
Add content to the nested row:
Save (Publish).

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

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.:
Click the circle to open the window. Click "Logout"
To sign back in, visit your specific Society website and use the ADMIN link in the site footer

Accordion Settings

Drop down “Accordion Headings” functionality on Connexions Microsite

To achieve the below result with the drop-down functionality "Accordion Headings"

A screenshot of a computer

AI-generated content may be incorrect.

The Design Services Team has already created a microsite template, our custom-built accordions are already set up on site!

If you edit the page, then you will see how the accordions are set up. First, you have the "accordion-heading" HTML widget followed by the "accordion-text" HTML widget. Each accordion must follow this pattern in order for the accordion to work correctly!

Here is a screenshot of the "accordion-heading" HTML widget:

A screenshot of a computer

AI-generated content may be incorrect.

Here is a screenshot of the "accordion-text" HTML widget:

A screenshot of a computer

AI-generated content may be incorrect.

There is an alternate way to add the according settings to the body text as follows:

To build the markup for an HTML accordion, use the <details> element. Use a <summary> tag to provide the title for the accordion. Add your content, and you're done!

HTML code:

<details>

<summary>Section title</summary>

Here is the content!

</details>

top

How To – Homepage Content

Hero Title & Background Image

Example

How to...

Hover over the dot in the right-hand corner of the title, and click to edit:
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.
Swap out the H1 text:
Save (Publish).

top

Hero Buttons

Example

How to...

Hover over the circle in the top right corner of the button you wish to edit, and click to edit:
Create a button, following the instructions above.
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

How to...

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

Alternatively, on the homepage, hover over the dot in the top right corner and click to edit, then skip to step 4:
At the bottom of the right-hand column, click "Edit":
Select an HTML content item with the classes news-slide make-link overline, or copy and paste to create a new one:
Swap out the h6, h3, and paragraph text:
Swap out the link, following the instructions above.
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...

On the homepage, hover over the dot in the top right corner and click on the pencil to edit:
Swap out the h3 and paragraph text:
Swap out the link, following the instructions above.
Save (Publish).

top

Quick Links

Example	Class
Volutpat ac arcu Dignissim commodo viverra Erat velit viverra Ultricies fermentum vitae *Neque nec sit	quick-links make-buttons

How to...

On the homepage, hover over the dot in the top right corner and click on the pencil to edit:
Swap out a link, or hit ENTER/RETURN to add a new one:
Create the link, following the instructions above.
Save (Publish).

top

Example	Class
	sponsor

Bottom Feature Block

Example	Class
	flex-image

How to...

On the homepage, hover over the dot in the top right corner and click on the pencil to edit:
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.
To edit the text, select the HTML Content Item on the right:
Alternatively, on the homepage, hover over the dot in the top right corner and click on the pencil to edit:
Swap out the H2, paragraph text, and link (following the instructions above for a button):
Save (Publish).