Style Guide

Editing Essentials

Font Sizes & Styles

Styles Font Family/Size Color/HEX Color

H1 Title*

 Inter 42px Dark Grey #272727

H2 Title

Inter 32px

Dark Grey #272727

H3 Title

Inter 21px

Dark Grey #272727

H4 Title

Inter 18px

Dark Grey #272727
H5 Title

Inter 16px

Black #292929
H6 Title

Inter 14px

Black #292929

Body/Paragraph

Inter 16px

Grey #666666

Hyperlink

 Inter 16px

[Dictated by Color Picker Options]

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

[Dictated by Color Picker]

Button Example

make-buttons secondary-btn

[Dictated by Color Picker]

Button Example

make-buttons gray-btn

[Dictated by Color Picker]

Button Example

make-buttons white-btn

[Dictated by Color Picker]

Button Example

make-buttons outline-btn

[Dictated by Color Picker]

Button Example

make-buttons white-outline-btn

[Dictated by Color Picker]

How to...

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

  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 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 <em> tag must live outside the hyperlink <a> tag to enable styling:
    <em><a href="http://website.com">Button Example</a></em>

top

Background Styles

CSS Wrapper Class Style Example

bg-white

Row with white background

bg-black

Row with black background

bg-primary

Row with primary background

bg-primary-light

Row with primary background with white overlay (#FFF) at 85% opacity

bg-primary-dark

Row with primary background with black overlay (#000) at 30% opacity

bg-primary-light-gray

Row with primary background with gray overlay (#F5F5F5) at 97% opacity

bg-primary-medium-gray

Row with primary background with gray overlay (#F4F4F4) at 85% opacity

bg-secondary

Row with secondary background

bg-secondary-light

Row with secondary background with white overlay (#FFF) at 85% opacity

bg-secondary-dark

Row with secondary background with black overlay (#000) at 20% opacity

How to...

  1. In Page Designer ("Edit This Page"), click the row of the content item you want to add a background color to 

  2. Next, add your desired background color class and set the row to full-width row:sg5.png

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

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

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

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

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.

top

Interior Page Content

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

top

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

top

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

top

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

top

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

top

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

top

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

top

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

top

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

top

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

top

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

top

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

top

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

top

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

top

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

top

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

top

Web Training

Content Editor Webinar

Passcode: &R1=T^xQ

Editing Essentials

Content Resources

Photos & Imagery: Unsplash
Web Icons: Font Awesome

Interior Page Content