Theme A Style Guide

Theme Colors

Style Color/HEX Color
Primary Color This should be a dark color. In this theme it's a dark blue, hex code #3D5463.
Secondary Color This can be a lighter color. In this theme it's teal, hex code #18BC9C.
Footer Background Color This should be a dark color. In this theme it's a dark gray, hex code #333333.

back to top

Typography & LOGO

Style Font Family/Size Color/HEX Color

H1 Title*

 Roboto 50px Dark Gray #484848
*H1/interior main page titles with a background image are set by enabling “Show page title?” in the Page Properties view (make sure it’s checked): Page Title Toggle
Style Guide Page Title

H2 Title 

 Roboto 24px Primary Color

H3 Title

 Roboto 20px Primary Color
Body/Paragraph Roboto 16px Dark Gray #484848
Hyperlink Verdana 16px Primary Color

Note
  • If Page Title field is left blank, it will show the Navigation Title (the menu link)
  • For best SEO (search engine optimization) results, ensure only one H1 title per page is used

Header/Website Logo

  • Constrained to max height of 55px

back to top

Buttons

Style CSS Wrapper Class Color/HEX
Contact Us make-buttons Secondary color background + White text

How to create a button:

  1. Add make-buttons to the CSS Wrapper Class Name Field. 

    CSS Wrapper Class Name Field

  2. Highlight the text intended to become a button and insert a URL. 

    Insert Link

  3. Italicize the text that was just hyperlinked.

  4. Save (Publish).

Note
  • Italic <em> tag must live outside the hyperlink <a> tag to enable styling:
    <p><em><a href="http://website.com">Button Text</a></em></p>

back to top

Interior H1 Banners

Example
H1 Banner


How to add a background image to the header banner:

  1. To add a pre-populated background image, add a syndicated widget

  2. In the widget, select "The Current Site" in the "Syndicated from Site" dropdown

  3. Next, select a related page in the "Syndicated Page" dropdown (based on page codes):Screen_Shot_2020-04-14_at_14_56_48.pngPre-populated background image page codes:
    Search: search-header
    Discussion: discussion-header
    Directory: directory-header
    Library: library-header
    Blog: blogs-header
    Community: communities-header

  4. OR, to add a unique background image, create an HTML content item on the page and upload the image to it. For non-syndicated background images, make sure the CSS wrapper class for the content item has the class page-bg

  5. Save(Publish)

back to top

Homepage Hero

CSS Wrapper Class: hero make-buttons
Screen_Shot_2020-04-14_at_15_20_01.png
HTML Source Example:
<img src="image.jpg" caption="false" class="img-responsive"/>
<h1>Title</h1>
<p>Text</p>
<em><a href="pagecode" title="Click Here">Example</a></em>


How to edit the hero:

  1. View Home Page Folder, find associated content item. 

  2. Edit the hero using the content editor (or view HTML Source Code).

  3. Make sure the image has the CSS Wrapper Class hero make-buttons assigned.

back to top

Top Tiles

CSS Wrapper Class: top-tile
Homepage Top Tiles


How to edit in a Top Tile:

  1. From the homepage navigation view, find the content item you wish to edit, example CONNECT

  2. Here, change the title you wish to display in the "Name or Title" section and ensure "Show title?" is ticked:Screen_Shot_2020-04-15_at_12_13_30.png

  3. You can also update the image and paragraph text. Make sure "More Info" text is italicized. Highlight the italicized text and wrap it in a link pointing to the appropriate page. 

  4. Ensure the CSS Wrapper Class, top-tile, has been added.

  5. Save (Publish).

back to top

Quick Links

CSS Wrapper Class: quick-link
Screen_Shot_2020-04-15_at_12_54_06.png


How to edit the Quick Links:

  1. Navigate to the Quick Links folder in the Navigation:

    Quick Links Folder Demo

  2. Here, select 3 - 5 buttons from the following list you'd like to display on the homepage, the rest should be hidden:
    4-4.png

  3. To hide or unhide a button, open a content item and toggle "visible on page" on or off:
    5.png

  4. Save (Publish).

Note
  • If button has an asterisk in the title, e.g. *Sponsors, there is no default Higher Logic page
  • For these buttons, you'll need to edit the link and/or create the page for the content:
    5-5.png

back to top

Responsive Videos

Example
Embedded Video


To embed an online video:

  1. Go to this website: 

    http://embedresponsively.com/

  2. Paste source URL into the field and click 'Embed'.

    Youtube Page URL

  3. Copy the generated embedded code.

    Embedded Code to Copy

  4. Paste the code into the content item in HTML source code.
    Source Code

Note:
  • embedresponsively.com generates responsive embed code (makes content scaleable based on screen size and orientation) for Youtube, Vimeo, Google Maps, iFrames, etc. 
  • It is important to embed responsively so the content resizes and fits to any screen size.

back to top

How to...

Higher Logic Resources

The following resources require a Higher Logic User Group (HUG) account to access:

Higher Logic Academy Online
  • Higher Logic offers free self-paced tutorials that cover a single topic so you can discover what you need and get on with your day.
Super Admin Path
  • This path is designed for learners that have Super Admin rights on their community site and are the "go to" person for all things Higher Logic.
Additional HUG Resources