Custom Baptism Section

Individual Dark Options

For the section to show elements with both the dark and light section options you will want to publish the section without the "dark" option and a manual class will need to be added to individual tags in order to show them as the dark option.

Below is a html example for displaying both the large icon and the primary button on the vision section as dark.

<div style="text-align: center;" class="large-icon dark"><span class="icon icon-droplet"></span></div>

<p style="text-align: center;" class="dark"><a class="btn btn-sm btn-primary" target="_blank" href="https://beltwaypark.ccbchurch.com/goto/forms/872/responses/new" rel="noopener">Take a Baptism Class</a></p>

Large Icon

To display an icon in a large size with a rounded border you will need to insert a div tag from the editor and add the class "large-icon".  You can then add a span tag with the class "icon" with the additional icon class of the image you would like to show eg. "icon-droplet".

Below is a html example.

<div style="text-align: center;" class="large-icon dark"><span class="icon icon-droplet"></span></div>

A full list of custom icons is available here: http://beltway.monkpreview3.com/_assets/fonts/icons/

Section Monklet - Vision Stats

This monklet will display a row of stat links in even sized columns.  The link list can be setup under Content > Link Lists. The icon class field is for the top icon, the description will display in the larger blue text under the icon followed by the name field displayed in the smaller gray text.


When using this monklet, you will need to use the "find" parameter to tell the monklet which link list to display. An example would look like this: {{section-monklet-vision-stats|find="vision-stats"}}.

*Note - sections that use this monklet will have the rellax/parallax squares hidden.


Section Monklet - Vision Chart

This monklet will display a percentage chart.  The link list can be setup under Content > Link Lists. There should only be 2 link entries for this list.  The first link entry must be labeled "Current" and the second link entry must be labeled "Total".  The description field for the current must contain a number for the current numeric option.  The description field for the total must contain a number for the total numeric option.  The percent if figured by dividing the current number by the total.  To display an icon next to the percent an icon class can be entered into the current link entry.


When using this monklet, you will need to use the "find" parameter to tell the monklet which link list to display. An example would look like this: {{section-monklet-vision-chart|find="vision-chart"}}.

*Note - sections that use this monklet will have the rellax/parallax squares hidden.