Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph

Heading 1 Link

Heading 2 Link

Heading 3 Link

Heading 4 Link

Heading 5 Link

Heading 6 Link

Paragraph Link

Paragraph <small> link

Paragraph .small link

Small styles can be applied to headers, paragraphs & links by adding the small tag or small class as displayed in the examples below.

Heading 1 <small>

Heading 2 <small>

Heading 3 <small>

Heading 4 <small>

Heading 5 <small>

Heading 6 <small>

Paragraph small <small>

Heading 1 .small

Heading 2 .small

Heading 3 .small

Heading 4 .small

Heading 5 .small

Heading 6 .small

Paragraph .small

Colors can be used with any element. Headers, links, paragraphs, etc. can all have their colors changed by adding the following classes displayed below.

.green

.mediumgreen

.darkgreen

.purple

.blue

.gold

.orange

.darkred

Subhead styles can be applied to headers, paragraphs & links by adding the .subhead classes as displayed in the examples below.

H1.subhead

H2.subhead

H3.subhead

H4.subhead

H5.subhead

H6.subhead

Paragraph .subhead

Paragraph link .subhead

H1.subhead--bold

H2.subhead--bold

H3.subhead--bold

H4.subhead--bold

H5.subhead--bold

H6.subhead--bold

Paragraph .subhead--bold

.subhead--bold does not work with paragraph links

H1.subhead--spaced

H2.subhead--spaced

H3.subhead--spaced

H4.subhead--spaced

H5.subhead--spaced

H6.subhead--spaced

Paragraph .subhead--spaced

Paragraph link .subhead--spaced

Heading 1 .school

Heading 2 .school

Heading 3 .school

Heading 4 .school

Heading 5 .school

Heading 6 .school

Paragraph text size variations can be applied by adding the following classes to paragraph tags as shown below.

Paragraph .intro

Paragraph .lead

***Noted below are the styles that are currently missing from the WYSIWYG global styles, or they need to be altered, or they are old ones we would like to keep rather than replacing.

Paragraph .quote – for slightly larger, lighter & more spaced text to be used for quotes for example

Paragraph .visually-hidden – for comments we want to display:none on the front end

Styles can be applied to sections of content to change the look of an entire area, or adjust the page layout. Use a blockquote tag or a div tag + the following classes as displayed below.

Paragraph class="green-border"           
Paragraph class="green-border"           
 

Paragraph class="jumbotron"           
Paragraph class="jumbotron"           
Paragraph class="jumbotron"           
 

blockquote

***Should we add flexbox grid, or any other column, block, div styles/classes to the CKeditor CSS?

<hr>

Use inline styling

<hr class="green">

<hr class="mediumgreen">

<hr class="darkgreen">

<hr class="purple">

<hr class="blue">

<hr class="gold">

<hr class="orange">

<hr class="darkred">

WYSIWYG IMAGE ADDING TOOLS:

***We need to fix the WYSIWYG image adding tools next. Examples that have been added using both tool options are shown below:

This image has been added via this tool

This is a caption has been added in a <p> under the image. The text does not stay within the width of the image if you add captions this way.

When using this tool to add images,  It allows you to choose the alignment, add a caption or a link to the image, but there is no option to adjust the image size unless you adjust in code view.

This image has been added via this tool

When using this tool to add images,  It allows you to choose the alignment, add a caption or a link to the image, and you can change the image size easily as well.

***We would like both of these image adding tools to have the same functions: the ability to adjust the image alignment, float, add a caption underneath that stays within the width of the image, add a link to the image, and we'd like to be able to adjust the image size. Currently some of these functions appear to be working when editing in the WYZIWIG editor, and some of them are actually working, but when the page is saved & viewed on the front end, then it's noticeable that some of the functions are broken... we need to test the alignment, float, caption & re-sizing functions in both image adding tools to make sure they are consistently working properly.

IMAGE STYLES:

The images can float & push them to the right or left of text blocks or other images.

This is a paragraph that is next to an image with data-align="left". When adding an image using the WYSIWYG image adding tool it allows you to choose the alignment & add a caption. This code works if you do not use the WYSIWYG image adding tool as well. There is padding automatically added when you use this image adding method & choose to float left or right.

To make sure there is a line break between 2 rows of floating elements add a div class="clearfix" between rows.

This is a paragraph that is next to an image with data-align="right".

This paragraph was added after the "clearfix" so it does not not float next to the image, it shows up inline with the image.

CAPTION STYLES:

These images, including their captions below, were added in the code editor and they are each within divs that have .col-sm classes added. The 1st image caption has the .small class applied to the <p> tag, and the 2nd image caption is within a <small> tag.

This is a caption with the .small class applied. This is a caption with the .small class applied. This is a caption with the .small class applied. This is a caption with the .small class applied. This is a caption with the .small class applied.

This is a caption within a small tag. This is a caption within a small tag. This is a caption within a small tag. This is a caption within a small tag. This is a caption within a small tag.

HEADING STYLES

Heading 1 Link

Heading 1 (subhead class)

Heading 1 (subhead--bold class)

Heading 1 (subhead--spaced class)

Heading 1 (subhead and blue classes)

Heading 1 (school class)

Heading 1 (small class)

Heading 2

Heading 2 Link

Heading 2 (subhead class)

Heading 2 (subhead--bold class)

Heading 2 (subhead--spaced class)

Heading 2 (subhead and blue classes)

Heading 2 (school class)

Heading 2 (small class)

Heading 3

Heading 3 Link

Heading 3 (subhead class)

Heading 3 (subhead--bold class)

Heading 3 (subhead--spaced class)

Heading 3 (subhead and blue classes)

Heading 3 (school class)

Heading 3 (small class)

Heading 4

Heading 4 Link

Heading 4 (subhead class)

Heading 4 (subhead--bold class)

Heading 4 (subhead--spaced class)

Heading 4 (subhead and blue classes)

Heading 4 (school class)

Heading 4 (small class)

Heading 5

Heading 5 Link

Heading 5 (subhead class)

Heading 5 (subhead--bold class)

Heading 5 (subhead--spaced class)

Heading 5 (subhead and blue classes)

Heading 5 (school class)

Heading 5 (small class)

Heading 6

Heading 6 Link

Heading 6 (subhead class)

Heading 6 (subhead--bold class)

Heading 6 (subhead--spaced class)

Heading 6 (subhead and blue classes)

Heading 6 (school class)

Heading 6 (small class)Headings

Heading 1 Link

Heading 1 (subhead class)

Heading 1 (subhead--bold class)

Heading 1 (subhead--spaced class)

Heading 1 (subhead and blue classes)

Heading 1 (school class)

Heading 1 (small class)

Heading 2

Heading 2 Link

Heading 2 (subhead class)

Heading 2 (subhead--bold class)

Heading 2 (subhead--spaced class)

Heading 2 (subhead and blue classes)

Heading 2 (school class)

Heading 2 (small class)

Heading 3

Heading 3 Link

Heading 3 (subhead class)

Heading 3 (subhead--bold class)

Heading 3 (subhead--spaced class)

Heading 3 (subhead and blue classes)

Heading 3 (school class)

Heading 3 (small class)

Heading 4

Heading 4 Link

Heading 4 (subhead class)

Heading 4 (subhead--bold class)

Heading 4 (subhead--spaced class)

Heading 4 (subhead and blue classes)

Heading 4 (school class)

Heading 4 (small class)

Heading 5

Heading 5 Link

Heading 5 (subhead class)

Heading 5 (subhead--bold class)

Heading 5 (subhead--spaced class)

Heading 5 (subhead and blue classes)

Heading 5 (school class)

Heading 5 (small class)

Heading 6

Heading 6 Link

Heading 6 (subhead class)

Heading 6 (subhead--bold class)

Heading 6 (subhead--spaced class)

Heading 6 (subhead and blue classes)

Heading 6 (school class)

Heading 6 (small class)

Paragraph (subhead class)

Paragraph (subhead--bold class)

Paragraph (subhead--spaced class)

Paragraph (subhead and blue classes)

PARAGRAPH STYLES

Paragraph (intro class) - A professional development certificate from the Chicago Botanic Garden shows that you have drive, commitment, and an in-depth, up-to-date understanding of a subject. Graduates have used their certificates to help them get a new job, raise, or promotion—or simply as a starting point to pursue a passion.

Paragraph (quote class) - A professional development certificate from the Chicago Botanic Garden shows that you have drive, commitment, and an in-depth, up-to-date understanding of a subject. Graduates have used their certificates to help them get a new job, raise, or promotion—or simply as a starting point to pursue a passion.

Paragraph (lead class) - A professional development certificate from the Chicago Botanic Garden shows that you have drive, commitment, and an in-depth, up-to-date understanding of a subject. Graduates have used their certificates to help them get a new job, raise, or promotion—or simply as a starting point to pursue a passion.

Paragraph (no adjustments) - Colors can be used with any element. Headers, links, paragraphs, etc. can all have their colors changed by adding the following classes displayed below.

Paragraph (small tag) - A professional development certificate from the Chicago Botanic Garden shows that you have drive, commitment, and an in-depth, up-to-date understanding of a subject. Graduates have used their certificates to help them get a new job, raise, or promotion—or simply as a starting point to pursue a passion.

Paragraph (small class) - A professional development certificate from the Chicago Botanic Garden shows that you have drive, commitment, and an in-depth, up-to-date understanding of a subject. Graduates have used their certificates to help them get a new job, raise, or promotion—or simply as a starting point to pursue a passion.

COLORS

Colors can be used with any element. Headers, links, paragraphs, etc. can all have their colors changed by adding the following classes displayed below.

class="green"

class="mediumgreen"

class="darkgreen"

class="purple"

class="blue"

class="gold"

class="orange"

class="darkred"

LISTS

• List item 1
• List item 2
• List item 3

1. List item 1
2. List item 2
3. List item 3

• List item 1 with small tag
• List item 2 with small tag
• List item 3 with small tag

Definition List

This is a term.

This is the definition of that term, which both live in a dl.

Here is another term.

And another definition too.

TAB LISTS

Secondary tabs

• Secondary Tab 1
• Secondary Tab 2

BUTTONS

TABLES

Basic table class="table"

Another option for table class="table table-striped"

MODALS

McGinley Pavilion

This dramatic canopied terrace is a breathtaking setting for a summer party, dance, meeting, or reception.

Located at the water's edge across from the Garden's Theodore C. Butz Memorial Carillon, McGinley Pavilion is available for rentals from May through October (heaters and clear side walls are available).

McGinley Pavilion's Waterfront Patio has spectacular views of Evening Island.

CAPACITY
Sit-down dinner with dance floor	230
Sit-down dinner	270
Cocktail reception	350
Wedding ceremony	125
Theater	148
Classroom	96

McGinley Pavilion

English Walled Garden

For old-fashioned romance, nothing rivals the secluded charm of the Helen and Richard Thomas English Walled Garden. A variety of English gardening styles are demonstrated in this lovely space, ideal for a cocktail party before dinner in McGinley Pavilion. The English Walled Garden is also an exquisite site for a wedding ceremony. An indoor back-up space is always reserved when this space is requested. Available May through October, evenings only.

CAPACITY
Cocktail reception	250
Wedding ceremony	175*

* Unique seating arrangement

English Walled Garden

McGinley Pavilion

This dramatic canopied terrace is a breathtaking setting for a summer party, dance, meeting, or reception.

Located at the water's edge across from the Garden's Theodore C. Butz Memorial Carillon, McGinley Pavilion is available for rentals from May through October (heaters and clear side walls are available).

McGinley Pavilion's Waterfront Patio has spectacular views of Evening Island.

CAPACITY
Sit-down dinner with dance floor	230
Sit-down dinner	270
Cocktail reception	350
Wedding ceremony	125
Theater	148
Classroom	96

McGinley Pavilion

English Walled Garden

For old-fashioned romance, nothing rivals the secluded charm of the Helen and Richard Thomas English Walled Garden. A variety of English gardening styles are demonstrated in this lovely space, ideal for a cocktail party before dinner in McGinley Pavilion. The English Walled Garden is also an exquisite site for a wedding ceremony. An indoor back-up space is always reserved when this space is requested. Available May through October, evenings only.

CAPACITY
Cocktail reception	250
Wedding ceremony	175*

* Unique seating arrangement

English Walled Garden