Style Guide

How To – Editing Essentials

Font Sizes & Styles

Styles Font Family/Size Color/HEX Color

H1 Title*

Objektiv 42px Dark gray #272727

H2 Title

Objektiv 30px

Dark gray #272727

H3 Title

Objektiv 21px

Dark gray #272727

H4 Title

Objektiv 18px

Dark gray #272727

H5 Title

Objektiv 16px

Black #292929

H6 Title

Objektiv 14px

Black #292929

Body/Paragraph

Objektiv 16px

Gray #666666

Hyperlink

Objektiv 16px

[Dictated by Color Picker Options]

*H1 titles, found on interior pages, should be reserved for a webpage's top-of-page main header, for web accessibility & SEO purposes.

How to...

    • in the WYSIWYG ("What You See is What You Get") editor, use the dropdown "Paragraph" menu to select and apply font styles:

      Screen_Shot_2022-12-22_at_13_14_44.png

Button Styles

Styles CSS Wrapper Class Color/HEX

Button Example

make-buttons

[Dictated by Color Picker]

Button Example

make-buttons outline-btn

[Dictated by Color Picker]

make-arrow-link

[Dictated by Color Picker]

Button Example

make-buttons secondary-btn

[Dictated by Color Picker]

Button Example

make-buttons dark-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 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>

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.

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)

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

Theme Components

Cards

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

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 flex-cards to set cards as 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

Promo Section

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

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

Leadership Bio Card

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

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

Featured Blogs

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

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

CTA Tile

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

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

Sponsors

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

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

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

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

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.