Style Guide

How To – 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

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 grey-btn

[Dictated by Color Picker]

Button Example

make-buttons white-btn

[Dictated by Color Picker]

Button Example

make-buttons white-outline-btn

[Dictated by Color Picker]

Button Example

make-buttons dark-outline-btn

[Dictated by Color Picker]

Button Example

make-buttons cta-btn

[Dictated by Color Picker]

Button Example

make-buttons cta-btn small

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

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

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

bg-primary-medium-grey

Row with primary background with grey 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.

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

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

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

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.

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)

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.

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

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

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

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

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

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

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

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

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

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

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

Conference Treatment

Screen_Shot_2023-02-01_at_13_17_53.png

HOW TO…
To make a new section using the conference treatment you will want to start by going to the Conference Template folder under News & Events.

  1. Copy the all 5 pages in the folder, if you copy Conference Home and select to copy children this is the easiest way.
  2. Edit the Page Properties of all 5 pages to the title of the new section. You will want to make sure the page codes match with the new title. The titles for the Banner and Navigation pages are especially important to search for them when swapping them on the syndication content block.
  3. Edit the Home, Schedule, and Page Template pages to use the correct Banner and Navigation for that section.
    You can start typing the title of the Banner and Nav and it will bring you to those pages.
  4. You can start building out what pages you’d like by copying the Page Template with the new Banner and Nav.
  5. Once you have all the pages you’d like then you can edit the Nav page to add them in. Just add the Title and page code to the list. The title does not have to match the page code anymore!
  6. If you want to copy the existing Annual Meeting instead of the Conference Template that will work just as well, however you’ll need to go through each page and change the Banner and Nav to the new one and then change all the page codes in the Nav page to be correct.

Editing the Schedule:

  1. Editing the Schedule Tabs
    Make them the day, title or whatever you’d like. The link should contact a hashtag and then the class name of whatever you have used on the respective ROW you want to correlate to it. In the template the tabs use tab1, tab2, tab3 etc. The links are then #tab1, #tab2, #tab3.
  2. If you would like to add a new tab then:
    1. add a bullet with the date
    2. link it to the URL #tab5
    3. copy the row with tab4 as the wrapper class
    4. change the new row to have the wrapper class tab5
  3. Editing Announcements
    The links are scroll to links on the schedule for that day. They are similar to the Schedule tab in that they need a hashtag. The text for the link can be whatever you’d like and the class name for the URL can be anything as long as you match the URL to the class name on the HMTL block. You can add as many links and tables to scroll as you’d like, but keep the new HTML block in the respective row you’d like it to be in.

*The wrapper classes do not need a hashtag only the links*

My only note for copying this template is that sometimes Higher Logic will scramble a page when it is copied if there are multiple HTML blocks in a singular row. The schedule rows will never move but the HTML blocks in one day might so just put the announcement first and then each in respective order.