Modules are simple ways to embed complex data in a web page. A module always starts and ends with @@
and contains pieces of information inside the @@
pairs separated by a |
character (shift-\ on the keyboard).
Used for building the staff page.
@@contacts|image|123456,8923402,73847284|modal-lg@@
@@contacts|list|123456,8923402@@
@@contacts|table|123456,8923402,73847284@@
@@contacts|imgbio|123456,8923402,73847284@@
Used for displaying mass times on the Mass times/Office hours page.
@@times|column|mass,confession@@ @@times|justmassstring|confession@@
Used for displaying an image gallery on any page.
@@gallery|format1|uploads/images/gallery1@@
Used for displaying audio players/content on any page.
@@audio|format1|546815574,81535451@@
Used for displaying video player/content on any page.
@@video|justvideo|2132451@@
@@video|titlebelow|2132451,12312312,45456456,5678564|3@@
titleright:
Video title
titleleft:
Video title
titlebelow:
Video title
Video title
justvideo:
Used for displaying the most recent blog post from the specified category id on any page.
@@latestblogpost|titleteaser|543154874@@
titleteaser:
POST TITLE
Blog post teaser content.....
sidebyside:
POST TITLE
Blog post teaser content.....
imagetop:
POST TITLE
Blog post teaser content.....
Used for displaying blog posts for the specified category id on any page.
@@blogposts|list|45654154|2@@ @@blogposts|grid|45654154|12@@ @@blogposts|carousel|45654154|9@@
Used for displaying the events/announcements for the specified event category on any page.
@@events|imageleft|62351542|5|E@@ @@events|noimage|All|10|All@@ @@events|imageright|62351542,894390234,8112320|5|E|March Events@@ @@events|imageleft|62351542|10|All|Some Weird Stuff@@ @@events|carousel|62351542|6|E|Featured Events@@
noimage:
EVENT TITLE
Event teaser content.....
imageleft:
EVENT TITLE
Event teaser content.....
imageright:
EVENT TITLE
Event teaser content.....
simplelist:
EVENT TITLE
Used for displaying splash banners in-between content on any page (instead of the top of the page).
@@banners|format1@@
Used for displaying blocks of html between specific dates. This could be useful for alerts, etc.
@@timedhtml|20190201|20190215| <p>put all your html here</p> @@
Used to display the results of a rssfeed embedded into a page.
@@rssfeedreader|format1|https://rss.flocknote.com/497009@@
Modules can be embedded in: Pages (page top and page content fields), Events (event description field), and Blog posts (content field)
The first paragraph in the page should usually be larger than the other paragraphs. Use the lead
class to do this.
<p class="lead">
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.
<blockquote> <p>…</p> <footer>…</footer> </blockquote>
You can right align the block quote by adding the blockquote-reverse
class.
<blockquote class="blockquote-reverse"> <p>…</p> <footer>…</footer> </blockquote>
For a list without bullets, use the list-unstyled
class.
<ul class="list-unstyled"> <li>…</li> </ul>
A description list is a good way to list items that have titles and descriptions.
<dl class="dl-horizontal"> <dt>the title here</dt> <dd>the description here</dd> <dt>another title</dt> <dd>the other description</dd> </dl>
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.
<div class="table-responsive"> <table class="table"> <thead> <tr> <th>…</th> </tr> </thead> <tbody> <tr> <td>…</td> </tr> </tbody> </table> </div>
You can easily make links look like a button by using the btn
classes.
<a class="btn btn-default" role="button" href="…">Button Text</a>
There are 6 different button colors you can use based on which class you use:
<a class="btn btn-primary" role="button" href="…">Button Text</a>
You can also adjust the size of the button using classes: btn-lg
, btn-sm
or btn-xs
.
<a class="btn btn-primary btn-lg" role="button" href="…">Button Text</a>
<a class="btn btn-primary btn-sm" role="button" href="…">Button Text</a>
<a class="btn btn-primary btn-xs" role="button" href="…">Button Text</a>
When you place a button in the sidebar, you can make the button the entire width of the sidebar by using the btn-block
class.
<a class="btn btn-primary btn-sm btn-block" role="button" href="…">Button Text</a>
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".
<img class="img-responsive" src="…">
<div class="col-sm-3 pull-right"> <img class="img-responsive" src="…"> </div>
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.
<a class="tooltippopover" data-toggle="popover" data-trigger="focus" tabindex="0" data-html=true title="Popover title" data-content='put the content here enclosed in quotes'>the link text</a>
Always wrap the iframe in a div with the Flexible-container
class.
<div class="Flexible-container"> <iframe src="…"></iframe> </div>
Or use this:
<div class="embed-responsive" style="height:400px;"> <iframe class="embed-responsive-item" src="..."></iframe> </div>
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.
<a data-target="#uniquevalue" data-toggle="modal" class="btn">Button Text</a>
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="uniquevalue" class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button> <h4 id="myModalLabel" class="modal-title">Pop-up box title</h4> </div> <div class="modal-body"> any content here </div> <div class="modal-footer"> <button data-dismiss="modal" class="btn btn-default" type="button">Close</button> </div> </div> </div> </div>