Syndicated - Website Style Guide

Apply Font 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

 

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:

    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

Make a Button

Styles CSS Wrapper Class Color/HEX

Button Example

make-buttons

Blue #017ACD

Button Example

make-buttons dark-outline

Blue #002F6C

How to...

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

    sg3.png

  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 or make-buttons dark-outline (depending on button style you want) to the CSS Wrapper Class Name field:

    sg3.png

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

Edit the Homepage Hero Background

Example

How to...

  1. In Page Designer ("Edit This Page") view, select the content item with the class hero-bg:

    sg4.png

  2. Swap out the image:sg5.png

  3. Save (Publish). 

top

Edit the Homepage Hero Text

Example

How to...

  1. In Page Designer ("Edit This Page") view, select the content item with the class hero-text make-buttons:

    sg4.png

  2. Swap out the H1 text:sg5.png

  3. Save (Publish). 

top

Edit the Homepage Hero Buttons

Example

How to...

  1. In Page Designer ("Edit This Page") view, select the content item with the class hero-button:

    sg4.png

  2. Create a button, following the instructions above.

  3. Save (Publish). 

Note:

  • The first button in the hero will be green, and all subsequent buttons will be white outlines.

top

Edit the Homepage Hero News Carousel

Example

How to...

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

    sg4.png

  2. At the bottom of the right-hand column, click "Edit":

  3. Select an HTML content item with the classes news-slide make-link overline, or copy and paste to create a new one:
  4. Swap out the h6, h3, and paragraph text:
  5. Swap out the link, following the instructions above.

  6. Save (Publish). 

top

Edit a Promo Block

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

  1. In Page Designer ("Edit This Page") select an HTML Content Item with the classes make-buttons flex-box:

    sg4.pngAlternatively, on the homepage, hover over the dot in the top right corner and click on the pencil to edit:

  2. Swap out the h3 and paragraph text:
    Screen_Shot_2022-12-23_at_13_31_01.png
  3. Swap out the link, following the instructions above.

  4. Save (Publish). 

top

Edit a Quick Link

Example Class
quick-links make-buttons

How to...

  1. In Page Designer ("Edit This Page") select the Quick Links content item:

    sg4.pngAlternatively, on the homepage, hover over the dot in the top right corner and click on the pencil to edit:

  2. Swap out a link, or hit ENTER/RETURN to add a new one:
    Screen_Shot_2022-12-23_at_13_31_01.png
  3. Create the link, following the instructions above.

  4. Save (Publish). 

top

*SPONSORS

Example Class
flex-image

How to...

  1. In Page Designer ("Edit This Page") select the row with the class flex-image:

    sg4.png

  2. To change the image, select the HTML Content Item in the left column:
    Screen_Shot_2022-12-23_at_13_31_01.pngAlternatively, on the homepage, hover over the dot in the top right corner and click on the pencil to edit:
  3. Swap out the image:
  4. To edit the text, select the HTML Content Item on the right:
    Screen_Shot_2022-12-23_at_15_35_03.pngAlternatively, on the homepage, hover over the dot in the top right corner and click on the pencil to edit:
  5. Swap out the H2, paragraph text, and link (following the instructions above for a button):

  6. Save (Publish). 

top

Edit the Bottom CTA

Example Class
flex-image

How to...

  1. In Page Designer ("Edit This Page") select the row with the class flex-image:

    sg4.png

  2. To change the image, select the HTML Content Item in the left column:
    Screen_Shot_2022-12-23_at_13_31_01.pngAlternatively, on the homepage, hover over the dot in the top right corner and click on the pencil to edit:
  3. Swap out the image:
  4. To edit the text, select the HTML Content Item on the right:
    Screen_Shot_2022-12-23_at_15_35_03.pngAlternatively, on the homepage, hover over the dot in the top right corner and click on the pencil to edit:
  5. Swap out the H2, paragraph text, and link (following the instructions above for a button):

  6. Save (Publish). 

top

Post a Blog

Example
Blog Style

How to...

  1. Navigate to the Chapter News landing page and scroll down to find "Post a Blog" button, viewable to logged in Site Admins only:

    Add Blog Post button

  2. Clicking on the button will open the Blog posting module. Here, add a title, body text and Save/Publish (or Schedule or Save as Draft)

    Screenshot_2021-02-01_at_12_48_27_PM.png

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

    Screenshot_2021-02-01_at_12_43_52_PM.png

  4. Optional - If you leave the "Associate this post with a community" as blank, the post will publish to the default/Michigan Society of Associate Executive community. Alternately, blogs can be published to specific community through the drop down list:

    Screenshot_2021-02-01_at_12_43_52_PM.png

Note
  • The Blog Categories list in the right column requires manual updates (tag links are not auto-generated). To edit a new tag, use the "edit/insert link" option in the WYSIWYG editor.

    Screenshot_2021-02-01_at_3_33_03_PM.png

  • To add a new tag, first create the tag in Admin > Settings > Tags and Mentions > Tags.
  • Once a formal tag has been added, insert a link using the following format to created an executed search link (replace bold text with tag name): 
    • Single word tag link example:
      /search?executeSearch=true&SearchTerm=tag:MSAE&l=1
    • Multiple word tag link example:
      /search?executeSearch=true&SearchTerm=tag:MSAE+News&l=1

top

Add an Event

Style
Event Page Example

How to...

  1. Select the "Add Event" button:

  2. Add a title and select the appropriate event type.

    • If the event is specific to a particular community and you'd like it to be only visible to members of that community, then select the community in the drop down. 

  3. Fill out the content & save/publish. Learn more about publishing an event.

top

Change a Social Media Link

Example
Screen_Shot_2022-12-23_at_16_02_55.png

How to...

  1. In the content item, hover over the dot in the top right corner and click on the pencil to edit:
    Screen_Shot_2022-12-23_at_15_51_40.png
  2. Highlight the icon you want to change, and click the link button to change the link:
    Screen_Shot_2022-12-23_at_16_10_18.png

  3. Save (Publish). 

top

Embed a Video Clip

Example

How to...

  1. Add an HTML Content Item to your page layout where you wish the video to be added.

  2. Next, with the video link ready (e.g. https://www.youtube.com/watch?v=LRGC5DtINLw), visit the Embed Responsively website to generate an embeddable code: http://embedresponsively.com

  3. Here, paste the video URL (e.g. https://www.youtube.com/watch?v=LRGC5DtINLw) into the field and click 'Embed':
    Screenshot_2021-01-29_at_5_08_32_PM.png

  4. Next, copy the generated embedded code:
    Screenshot_2021-01-29_at_5_08_52_PM.png

  5. Return to the HTML Content Item where the video is to live. Open the WYSIWYG editor and topn the HTML source code modal. Paste the code here:

  6. Save/Publish.

Note
  • Use this method to ensure video content sizes & resizes and fit to any screen size (desktop, tablet, mobile)

  • When editing the HTML Content Item, the video code will appear as a dot surrounded by white space:
    Screen_Shot_2020-11-10_at_12_50_00_PM.png
    Once saved and the WYSIWYG editor is closed, the video will appear if the embed code was copied/pasted correctly:
    Screenshot_2021-01-29_at_5_15_10_PM.png

top

How To...

Find it Fast

Content & Styles - Homepage

Content & Styles - Interior Pages

Resource Library - Admin Training

Image Management

Occasionally, after uploading & inserting an image, the image may be missing a snippet of code that automatically resizes 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 with the snippet of HTML that missing the code. Insert 

Insert: class="img-responsive"



Sometimes when uploading a new image to your site, the will automatically resize to accommodate a specific screen size (desktop/tablet/ mobile)

*Recommended Size Specs
  • homepage hero: 
  • sponsor sliders: 
  • blogs:  
  • events: 
  • staff/leadership headshots: 
  • ...and/or other site specific specs