Style Guide

Editing Essentials

Font Styles

Your website theme font: #######

Styles Size Color/HEX Color

H1 Title

 42px Dark gray #272727

H2 Title

32px

Dark gray #272727

H3 Title

21px

Dark gray #272727

H4 Title

18px

Dark gray #272727
H5 Title

16px

Black #292929
H6 Title

14px

Black #292929

Body/Paragraph

16px

Gray #666666

Hyperlink

–

[dictated by brand colors]

How to...

The font type & size is controlled through your website's theme. To keep styles consistent throughout your site, use the Paragraph dropdown menu in the WYSIWYG ("What You See is What You Get") editor:

Note

  • H1 titles, found on interior page main banners, should be reserved for SEO & web accessibility purposes

top

Button Styles

Options CSS Wrapper Class

Primary Button

make-buttons

Secondary Button

make-buttons secondary-btn

Outline Button

make-buttons outline-btn

Arrow Link Example

make-arrow-link

Dark Button

make-buttons dark-btn

Gray Button

make-buttons gray-btn

White Button

make-buttons white-btn

White Button

make-buttons white-outline-btn

How to...

Start by creating a regular text link. Next, highlight and italicize the text that was just hyperlinked:sg5.png

To enable the design, add a make-buttons class to CSS Wrapper Class Name field:

Save (Publish).

Note

  • you'll need Preview or Publish to see the button (styling does not appear in editing mode)
  • if the button styling does not appear, check the HTML source code, the italic <em> tag must live outside the hyperlink <a> tag to enable styling.
  • Example: <em><a href="http://website.com">Button Example</a></em>

top

Background Styles

Style CSS Wrapper Class Description
bg-black black background
bg-primary-dark primary color with black overlay
bg-primary primary color
bg-primary-light primary color + white overlay
bg-primary-medium-gray primary color + dark gray overlay
bg-primary-light-gray primary color + light gray overlay
bg-secondary-dark secondary color + black overlay
bg-secondary secondary color
bg-secondary-light secondary color + white overlay
bg-white white background 

How to...

In Page Designer view, "Edit This Page", click the layout row that you wish to add a background color to.

Next, add your desired background color CSS class and set the row to Full-width row, example: sg5.png

Save (Publish).

Note

  • you'll need Preview or Publish to see the button (styling does not appear in editing mode)

top

Image Management

Component Recommended Size
homepage slider:
homepage hero:
promo cards:
staff/leadership headshots:
blogs:  
events:
sponsor sliders:
...and/or other site specific specs

Note

Occasionally, after uploading and 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 
  • in the the Source code window, insert the following code, class="img-responsive", example

top

Post a Blog

How to...

  1. Click on the "Admin" menu (viewable to Site Admins only) and click on Create > Blog Post:

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

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

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

  4. Save.

top

*******ADD EVENT

How to...

  1. Click on the "Admin" menu (viewable to Site Admins only) and click on Create > Blog Post:

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

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

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

  4. Save.

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:

    Scroll down and copy the generated embed code:

    Screenshot_2021-01-29_at_5_08_52_PM.png

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

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

Web Editor Training

Passcode: #####

*Link

Editing Essentials

Font Styles

Button Styles

Background Styles

Image Management

Post a Blog

***Add an Event

Embed a Video Clip

Theme Components

Timeline

CTA Tile

Leadership Title

Leadership Card

Cards

Featured Blogs

Featured Blogs Tile

Latest News List

Resources List Tiles

Featured Resources Slider

Leadership Bio

Promo Section

Sponsor

Resource List Tile

Featured Resource Tile

Social Media Icons & Links

Free Assets & Resources

Stock images – Unsplash

Online photo editor – iPiccy

Web icons – Font Awesome

Theme Components

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

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

  4. Save (Publish).

Timeline

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

HTML Source Example:

<h3>Placeholder Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dui ligula, ultrices a sem sed, consequat feugiat ex. Aenean dictum nisl eu massa consectetur, at dictum mauris imperdiet.</p>

How to...

  1. Select the milestone content item you would like to editsg5.png

  2. Use the WYSIWYG to edit the Content Itemsg5.pngMake sure the content item  has the CSS Wrapper Class milestone assigned.

  3. Save (Publish). 

CTA Tile

CSS WRAPPER CLASS: cta-tile icon
Screen_Shot_2023-02-01_at_13_17_53.png

HTML:

<p><i class="fa-solid fa-sparkles"></i></p>
<h3>This is a CTA tile with an icon</h3>
<p>Aenean in elit tempor, laoreet lorem vitae, commodo augue. Nulla tortor metus, vestibulum feugiat lorem eget, laoreet dictum odio.</p>
<p><em><a href="#">Link here</a></em></p>

How to...

  1. Select the CTA tile content item you would like to edit

  2. Edit the Content Item using the WYSIWYG

  3. Make sure the content item  has the CSS Wrapper Class cta-tile icon assigned.

  4. Save (Publish). 

Cards

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

HTML:

<h2>Placeholder Content</h2>
<p>Nam tortor nunc, suscipit et tellus nec, aliquet ultrices tortor. Phasellus a dui porttitor, tincidunt orci a, semper leo.Nam tortor nunc, suscipit et tellus nec, aliquet ultrices tortor. Phasellus a dui porttitor, tincidunt orci a, semper leo. Nam tortor nunc, suscipit et tellus nec, aliquet ultrices tortor. Phasellus a dui porttitor, tincidunt orci a, semper leo.</p>

How to...
  1. Make sure the content item has the CSS Wrapper Class card assigned.
  2. Select the outer row and make sure/add the class cards to make sure all card are equal height
  3. Save (Publish). 

Notes:

  • Cards are built in a modular manner adding additional classes to a Content Item with the card class will add additional functionality

Make Entire Card Clickable

CSS WRAPPER CLASS: card clickable
Screen_Shot_2023-02-01_at_13_17_53.png

HTML Example with Header Link Markup:
<h3><a href="https://#needsLINK">Lorem Ipsum</a></h3>
<p>Nam tortor nunc, suscipit et tellus nec, aliquet ultrices tortor. Phasellus a dui porttitor, tincidunt orci a, semper leo.Nam tortor nunc, suscipit et tellus nec, aliquet ultrices tortor. Phasellus a dui porttitor, tincidunt orci a, semper leo. Nam tortor nunc, suscipit et tellus nec, aliquet ultrices tortor. Phasellus a dui porttitor, tincidunt orci a, semper leo.</p>

HTML Example with Link outside of of Header:
<h2>Lorem Ipsum</h2>
<p>Nam tortor nunc, suscipit et tellus nec, aliquet ultrices tortor. Phasellus a dui porttitor, tincidunt orci a, semper leo.Nam tortor nunc, suscipit et tellus nec, aliquet ultrices tortor. Phasellus a dui porttitor, tincidunt orci a, semper leo. Nam tortor nunc, suscipit et tellus nec, aliquet ultrices tortor. Phasellus a dui porttitor, tincidunt orci a, semper leo.</p>
<p><a href="https://#needsLINK">Edit Link</a></p>

How to...
  1. Make sure the content item has the CSS Wrapper Class card clickable assigned.
  2. Save (Publish). 

Note:

  • When the link is placed inside a content item that IS NOT an Header 3 it will be hidden when viewing the site
  • Adding the class link-text to the Content Item will make any link NOT  inside a Header 3 will also display

Make Entire Card Clickable

CSS WRAPPER CLASS: card clickable
Screen_Shot_2023-02-01_at_13_17_53.png

HTML Example with Header Link Markup:
<h3><a href="https://#needsLINK">Lorem Ipsum</a></h3>
<p>Nam tortor nunc, suscipit et tellus nec, aliquet ultrices tortor. Phasellus a dui porttitor, tincidunt orci a, semper leo.Nam tortor nunc, suscipit et tellus nec, aliquet ultrices tortor. Phasellus a dui porttitor, tincidunt orci a, semper leo. Nam tortor nunc, suscipit et tellus nec, aliquet ultrices tortor. Phasellus a dui porttitor, tincidunt orci a, semper leo.</p>

HTML Example with Link outside of of Header:
<h2>Lorem Ipsum</h2>
<p>Nam tortor nunc, suscipit et tellus nec, aliquet ultrices tortor. Phasellus a dui porttitor, tincidunt orci a, semper leo.Nam tortor nunc, suscipit et tellus nec, aliquet ultrices tortor. Phasellus a dui porttitor, tincidunt orci a, semper leo. Nam tortor nunc, suscipit et tellus nec, aliquet ultrices tortor. Phasellus a dui porttitor, tincidunt orci a, semper leo.</p>
<p><a href="https://#needsLINK">Edit Link</a></p>

How to...
  1. Make sure the content item has the CSS Wrapper Class card clickable assigned.
  2. Save (Publish). 

Note:

  • When the link is placed inside a content item that IS NOT an Header 3 it will be hidden when viewing the site
  • Adding the class link-text to the Content Item will make any link NOT  inside a Header 3 will also display

Leadership Bio Card

CSS WRAPPER CLASS: team bio-1
Screen_Shot_2023-02-01_at_13_17_53.png

HTML:

<p><img src="https://higherlogicdownload.s3.amazonaws.com/ECONVERSETEST/c1b65cc9-eb19-48eb-9619-1c784c9c7071/UploadedImages/Photos/christina-wocintechchat-com-0Zx1bDv5BNY-unsplash.jpg" class="img-responsive" data-mce-hlimagekey="cf9fbba7-0146-319a-5aaf-980a41c2c7a7" data-mce-hlselector="#TinyMceContent_077e46ed-c486-71b4-46ec-747e878ab601-tinyMceHtml"></p>
<h3>Name</h3>
<h4>Position</h4>

How to...

  1. Select the Card content item you would like to edit

  2. Add an Html Content Item in the Same Column as the above card

  3. Make sure that the Bio Modal Content Item has the same last class as the same card in the column

  4. Make sure the content item  has the CSS Wrapper Class bio team-# assigned.

  5. Match the CSS Wrapper Class Name to the bio of the card you I would like to pop up

  6. Save (Publish). 

Leadership Card

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

HTML:

<h3 style="text-align: center;"><a onclick="scrollToLocation('.level1');"><i class="fa-regular fa-stars"></i>Level 1</a></h3>

How to...

  1. Select the Card content item you would like to edit

    Make sure the content item  has the CSS Wrapper Class card link-card assigned.

  2. Save (Publish). 

Featured Blogs

CSS WRAPPER CLASS: featured-tile-slider
Screen_Shot_2023-02-01_at_13_17_53.png

Text Parameters:

DescriptionLength="125" PageSize="4" ShowContributor="false" ShowContributorPicture="false" ShowParentLink="false" IncludeAll="false" IncludeExternalAll="false" IncludeBlogs="true" UseTimeAgoFormat="false" ShowDate="false" FilterByTags="Feature"

How to...

  1. Make sure that the Filter By Formal Tags field is set to Featuresg5.png

  2. Make sure that Blog Entries that you want to feature are tagged with the Feature tag

  3. Select the Featured Blogs content item you would like to edit

    Make sure the content item  has the CSS Wrapper Class featured-tile-slider assigned.

  4. Save (Publish). 

Promo Section

CSS WRAPPER CLASS: promo-section make-buttons
Screen_Shot_2023-02-01_at_13_17_53.png

HTML:

<h2 style="text-align: center;">Optional Page Anchor Promo</h2>
<p style="text-align: center;">Mauris hendrerit eu ipsum non gravida. Vivamus lacinia nisl nulla. Morbi sagittis faucibus nibh vitae eleifend. Integer a risus ac neque pellentesque efficitur vel sed dolor.</p>
<p style="text-align: center;"><em><a href="#">Button here</a></em></p>

How to...

  1. Select the Promotion Section content item you would like to edit

  2. Edit the Content Item using the WYSIWYG

  3. Make sure the content item  has the CSS Wrapper Class promo-section make-buttons assigned.

  4. Save (Publish). 

Featured Blogs

CSS WRAPPER CLASS: featured-blogs tile
Screen_Shot_2023-02-01_at_13_17_53.png

Text Parameters:

IncludeExternalAll="false" IncludeAll="false" IncludeBlogs="true" PageSize="3" ShowParentLink="false" ShowDate="false" ShowContributorPicture="false" ShowContributor="false" UseTimeAgoFormat="false" DescriptionLength="94" FilterByTags="Feature" DaysBack="99999"

How to...

  1. Select the Featured Blogs content item you would like to edit

    Make sure the content item  has the CSS Wrapper Class featured-blogs tile assigned.

  2. Make sure that the Filter By Formal Tags field is set to Featuresg5.png

  3. Make sure that Blog Entries that you want to feature are tagged with the Feature tag

    Make sure the content item  has the CSS Wrapper Class featured-tile-slider assigned.

  4. Save (Publish). 

Sponsors

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

HTML:

<p><a href="#needslink"><img src="https://higherlogicdownload.s3.amazonaws.com/ECONVERSETEST/c1b65cc9-eb19-48eb-9619-1c784c9c7071/UploadedImages/Placeholder_Logos/logo-24.png" class="img-responsive"></a></p>

How to...

  1. Select the Sponsor content item you would like to edit

  2. Edit the Content Item using the WYSIWYG

  3. Make sure the content item  has the CSS Wrapper Class sponsor assigned.

  4. Make sure the outer row has the class sponsors

  5. Save (Publish). 

Latest News

CSS WRAPPER CLASS: latest-news-list
Screen_Shot_2023-02-01_at_13_17_53.png

Text Parameters:

PageSize="12" ShowByLine="false" ShowPicture="false" ShowDescription="true" ShowStats="false" DescriptionLength="115"

How to...

  1. Select the Featured Resources content item you would like to edit

    Make sure the content item  has the CSS Wrapper Class latest-news-list assigned.

  2. Save (Publish). 

Resources List

CSS WRAPPER CLASS: resources-list
Screen_Shot_2023-02-01_at_13_17_53.png

Text Parameters:

DaysBack="9999" ShowItemRating="false" ShowLibraryName="false" ShowMoreLink="false" ShowPostDateTime="false" DescriptionLength="75"

How to...

  1. Select the Featured Resources content item you would like to editsg5.png

    Make sure the content item  has the CSS Wrapper Class resources-list assigned.

  2. Save (Publish). 

Featured List

CSS WRAPPER CLASS:  featured-tile-slider
Screen_Shot_2023-02-01_at_13_17_53.png

Text Parameters:

DescriptionLength="125" PageSize="4" ShowContributor="false" ShowContributorPicture="false" ShowParentLink="false" IncludeAll="false" IncludeExternalAll="false" UseTimeAgoFormat="false" ShowDate="false" IncludeBlogs="false" IncludeLibraryEntries="true" FilterByTags="Feature"

How to...

  1. Select the Featured Resources content item you would like to edit

  1. Make sure that the Filter By Formal Tags field is set to Featuresg5.png

  2. Make sure that Blog Entries that you want to feature are tagged with the Feature tag

    Make sure the content item  has the CSS Wrapper Class featured-tile-slider assigned.

  3. Save (Publish). 

Resources List

CSS WRAPPER CLASS: resources-list
Screen_Shot_2023-02-01_at_13_17_53.png

Text Parameters:

DaysBack="9999" ShowItemRating="false" ShowLibraryName="false" ShowMoreLink="false" ShowPostDateTime="false" DescriptionLength="75"

How to...

  1. Select the Featured Resources content item you would like to editsg5.png

    Make sure the content item  has the CSS Wrapper Class resources-list assigned.

  2. Save (Publish). 

Featured Resources

CSS WRAPPER CLASS: featured-resource
Screen_Shot_2023-02-01_at_13_17_53.png

Text Parameters:

IncludeExternalAll="false" IncludeAll="false" PageSize="3" ShowParentLink="false" ShowDate="false" ShowContributorPicture="false" ShowContributor="false" UseTimeAgoFormat="false" DescriptionLength="125" IncludeBlogs="false" IncludeLibraryEntries="true" FilterByTags="Feature"

How to...

  1. Select the Featured Resources content item you would like to editsg5.pngMake sure that the Filter By Formal Tags field is set to Featuresg5.png

  2. Make sure that Library Entries that you want to feature are tagged with the Feature tag

    Make sure the content item  has the CSS Wrapper Class featured-resource assigned.

  3. Save (Publish). 

Replace Content in the WYSIWYG

Example
Screen_Shot_2020-04-14_at_15_20_01.png

How to open the WYSIWYG editor:

  1. Click on the content item you wish to edit.
  2. Click on the 'Edit' icon to open the WYSIWYG editor.
  3. Alternatively, for some content items you will see a translucent white circle in the top right corner on the front end of the site. For these HTML content items, you can hover over the circle and click the pencil icon to edit:

How to replace an image:

  1. Click on the image, then click the 'Insert/Edit Image' icon.
  2. Click on the icon to open the image folder view.
  3. Click 'Upload' to upload a new image from your hard drive.
  4. Select the desired image and click 'Insert'.
  5. Click 'Save'.

Images have a maximum size of 5MB; images larger than this will not upload.

How to replace text:

  1. Highlight the text you wish to replace.
  2. Type in your new text.
    How to edit a bullet list:
  1. Highlight and replace existing text as above.
  2. To add a new list item, move your cursor to the end of the list and tap Shift + Enter.

How to replace button text and links:

  1. Replace the link and text for a button by highlighting on the button text, then clicking on the 'Insert Link' icon.

    Swap out the button link and text in the modal that appears.

When you have finished replacing content, remember to save the content item and publish the page.

Page Title Backgrounds

CSS WRAPPER CLASS: page-title-bg
Screen_Shot_2023-02-01_at_13_17_53.png

How to...

  1. In the page you would like the page title to have a background image, add an HTML content item

  2. Click the HTML content item and link your image or upload your own

  3. On the HTML content item, in the CSS Wrapper Class Name field add a class of page-title-bg

  4. Save (Publish).