Used for displaying mass times on the Mass times/Office hours page.

1. format options (2nd parameter): column, condensed, or justmasstring
2. data (3rd parameter): one or more comma-separated time types or 'All' - * if using 'justmassstring' format only provide one time type

Used for displaying an image gallery on any page.

1. format options (2nd parameter): format1, animated, splash (only suitable when displaying the gallery on a page by itself!)
2. data (3rd parameter): the directory holding the images

Used for displaying audio players/content on any page.

1. format options (2nd parameter): n/a, just put 'format1'
2. data (3rd parameter): one or more comma-separated audio ids

Used for displaying video player/content on any page.

1. format options (2nd parameter): titleright, titleleft, titlebelow or justvideo
2. data (3rd parameter): one or more comma-separated video ids
3. # items across (4th parameter) optional: 1, 2, or 3. If not specified, will calculate based on number of videos. Only works with 'titlebelow' format.

Format Examples

Used for displaying the most recent blog post from the specified category id on any page.

1. format options (2nd parameter): 'titleteaser' or 'sidebyside' or 'imagetop'
2. data (3rd parameter): the blog category id or 'All'

Format Examples

Used for displaying blog posts for the specified category id on any page.

1. format options (2nd parameter): 'list' or 'carousel'
2. data (3rd parameter): the blog category id or 'All'
3. perPage (4th parameter): optional number of items to show on the embedded page, defaults to 10 if not provided

Used for displaying the events/announcements for the specified event category on any page.

1. format options (2nd parameter): 'noimage', 'imageleft', 'imageright', 'simplelist', 'carousel', 'calendar'
2. data (3rd parameter): a comma-separated list of event category ids or 'All'
3. perPage (4th parameter): number of items to show on the embedded page
4. type (5th parameter): 'E' for events only, 'A' for announcements only, or 'All'
5. title (6th parameter): optional, string to display in h2 before the events

Format Examples

Used for displaying splash banners in-between content on any page (instead of the top of the page).

1. format options (2nd parameter): n/a, just put 'format1'

Used for displaying blocks of html between specific dates. This could be useful for alerts, etc.

Used for displaying groups of content in various HTML structures without needed to write all the HTML cruft. The 'content group name' is the name you create using the Content Groups admin tool.

1. 2nd: 'gridbox'
   • 3rd: content group name
   • 4th: number of boxes across: 2, 3, 4, or 6
   • 5th: center title? Y or N
   • 6th: center caption text? Y or N
   • 7th: caption vertical justify - flex-start, flex-end, space-between
   • 8th: bordered? Y or N
2. 2nd: 'collapsepanel'
   • 3rd: content group name
3. 2nd: 'carousel'
   • 3rd: content group name
4. 2nd: 'featurephoto'
   • 3rd: content group name
   • 4th: number of boxes across: 2, 3, 4, or 6
   • 5th: vertical alignment: M or B or T
   • 6th: horizontal alignment: L or C or R

Used for embedding an rss feed url (like for flocknote).

1. format options (2nd parameter): 'simplecast', 'feedlist', 'flocknote'
2. data (3rd parameter): the feed URL
3. string to match in rssfeed $lt;title$gt; element

The first paragraph in the page should usually be larger than the other paragraphs. Use the lead class to do this.

Pull-quotes or block quotes are a great way to highlight a quote or bible passage. Wrap the block quote around a paragraph tag and if you want to include an attribution, put it in a <footer> tag.

You can right align the block quote by adding the blockquote-reverse class.

For a list without bullets, use the list-unstyled class.

A description list is a good way to list items that have titles and descriptions.

Add the table class to the table to make sure the table has the correct formatting. Also, always put the table in a div with the table responsive class <div class="table-responsive"> so the table resizes correctly.

Always use the <thead> and <tbody> parts of the table too.

When placing an image, don’t use an inline style to set it’s width, instead, always use the img-responsive class and it will fill the width of the div it is in.

To place an image in the flow of text, wrap the image with a div of the appropriate width and use either "pull-right" or "pull-left".

When using a popover, just use this code and replace the content for the title and data-content attributes. You can include html in the data-content area. If you put an image in the data-content, make sure the img has the img-responsive class.

Always wrap the iframe in a div with the Flexible-container class.

A popup box has 2 components: the button that triggers the pop-up and the contents of the pop-up box.

Button: make sure you use a unique value for the data-target attribute.

Contents: make sure you use the same unique value for the id of the div containing the content.

The large header area on pages and the splash carousel can both have captions styled to automatically resize based on the size of the viewport. This is done by using the following classes on the content in the splash overlay area and by selecting the positioning drop-downs on the header overlay (found in the page admin).

Horizontal positioning

Use these classes to position captions horizontally:

caption-l14 left 1/4 of the area

caption-l24 left 1/2 of the area

caption-l34 left 3/4 of the area

caption-c24 center 1/2 of the area

caption-c34 center 3/4 of the area

caption-r14 right 1/4 of the area

caption-r24 right 1/2 of the area

caption-r34 right 3/4 of the area

Vertical positioning

Use these classes to position captions vertically:

caption-valign-middle middle of the area

caption-valign-bottom bottom of the area

* use no class to position the caption at the top of the area

Text alignment

Use these classes to align text within the caption area:

text-left left alignment

text-center center alignment

text-right right alignment

Font sizing

By using these classes the font size will automatically scale based on the viewport:

caption-lg for the largest font size

caption-md for medium font size

* use no class to make the text a regular body size

Splash Caption Example

<div class="caption-l34 caption-valign-bottom">
<h2 class="animated slideInUp caption-lg">Effective counseling is rooted in truth</h2>
<h3 class="animated slideInUp caption-md">This truth must be unapologetic and blind to the constant blowing winds of change.</h3>
</div>