College Marketing
Back to All Babson Back to All Babson
Close
Babson CollegeBabson College logo Centers & Institutes
High School Programs

STYLE GUIDE

TinyMce Formats

Below are examples of the available Custom Formats

Located within the TinyMCE ribbon, the Format menu item > Formats > Custom Formats

Intro text is usually placed at the top of the page.

small-subtext-12px - when you need smaller text.

small-subtext-14px - when you need slightly smaller text.

no-margin-bottom when you need the item below to be as close as possible.

more-margin-bottom when you need the item below to be farther away.

less-margin-bottom when you need the item below to be as closer.

This link has chevron + link >>

This link has chevron image + link
The "has-chevron-image" adds an image of the green chevron at the end the link.

Title With Top Border - combo with more margin bottom

Arial Text

Arial Text with H2 custom format

Arial Text with H3 custom format

Arial Text with H4 custom format

Arial Text with H5 custom format
Arial Text with H6 custom format

Arial Text with no H tag assigned
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, nemo, quae, veniam aspernatur magnam nobis expedita deserunt voluptatibus possimus nulla illo eum totam harum blanditiis itaque dolorum dolore.

  • Bullets
  • Bullets
  • Bullets

Buttons

To create a button:

  1. Select the LINK first by clicking on the chain icon
  2. Within the TinyMce ribbon, under the Format menu item, Format > Custom Formats > button style

Courtyard Green

White With Gold Border

Tag Link

White Buttons on a Dark Background

White Button

White Border With No Fill

Tag Link

Bullets

Bullets with span

  • Bulleted list of items
  • Bulleted list of items
    • Bulleted list of items
    • Bulleted list of items
      • Bulleted list of items
    • Bulleted list of items
  • Bulleted list of items
  1. Numbered list of items
  2. Numbered list of items
    1. Numbered list of items
    2. Numbered list of items
      1. Numbered list of items
    3. Numbered list of items
  3. Numbered list of items

Paragraph with no-margin-bottom that has a bulleted list of items within it, but doesn't want a margin-bottom at the last bullet.

  • Bulleted list of items
  • Bulleted list of items
  • Bulleted with no-margin-bottom

Paragraph right after a bulleted list that has no-margin-bottom.

Extra Large Text

Extra Large H1

Extra Large Zilla Slab

Extra Large Oswald

Different font colors can be chosen within formats

Grey Babson Green

Courtyard Green Grey

Babson Green Courtyard Green

Tables

courtyard-green-table Column 2 Column 3 Column 4 Column 5
Cell Cell Cell Cell Cell   Cell Cell Cell Cell
Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
Cell Cell Cell Cell Cell

More Custom Formats

Bibliography text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

u-text__color Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

alignment--center-block Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Add classes directly to the HTML

The following are classes that can be added to the Source Code of the TinyMce within Content Types.
To edit the source, within the TinyMce click on Tools then <> Source Code:

TinyMce instructions

To create an intro paragraph, add class="intro-text" to any

Intro Pagraph Text is larger then body text

Body Text has a font-size of 20px or 2rem

Intro Pagraph Text is larger then body text

Body Text has a font-size of 20px or 2rem

Within the General Content Block (or General Content content type, but this is being phased out), to add a top border to text, add class="title-with-top-border-lt-blue" to any tag. You can add this within Tools > Source code.

<h2 class=”title--understated-under-line”>Text Here</h2>
<h3 class=”title--understated-under-line”>Text Here</h3>
<h4 class=”title--understated-under-line”>Text Here</h4>

 

Only for Heading 2 (a legacy class)

  • Adding the class title--understated-under-line to just a Heading 2 will makes the font-size: 20px. 
    <h2 class=”title--understated-under-line”>.
  • Adding the class title--understated-under-line-large to just a Heading 2 will makes the font-size: 30px. 
    <h2 class=”title--understated-under-line-large”>.

Heading 2 with title--understated-under-line

H2 with title--understated-under-line-large

H2 with title-with-top-border-lt-blue

H3 with title-with-top-border-lt-blue

H4 with title-with-top-border-lt-blue

To remove the margin below any text tag, add class=”no-margin-bottom” with Tools > Source code

Body text <p class=”no-margin-bottom”>TEXT</p>

Text underneath has no space above

Heading 2 <h2 class=”no-margin-bottom”>TEXT</h2>

Text underneath has no space above

Margin bottom has been removed by adding class no-margin-bottom

  • Margin bottom has been removed

Margin bottom has been removed

More Margin Bottom has margin-bottom: 30px

Less Margin Bottom has margin-bottom: 10px

Line underneath has normal margin: 25px

Custom Formats Test Page