Bootstrap 4 template for CMSMS

This is my generic Bootstrap 4 template for use with CMSMS. It provides a central settings file to easily change the template, as well as a flexible template with 9 content sections. Sections can be styled through the Content Manager using the Bootstrap classes. It has the following dependencies:

Recommended CMSMS modules:

• CGSmartImage
• CGExtensions
• CSSPreProcessor
• SitemapMgr
• Markdown¹

Optional CMSMS Modules

• FormBuilder
• Captcha

Links to the template, stylesheets and required UDTs:

Template Files:

• Bootstrap4 AppManifest
• Bootstrap4 Blank
• Bootstrap4 Core
• Bootstrap4 Nav
• Bootstrap4 Nonuple Cols
• Bootstrap4 Nonuple Cols + Jumbotron
• Bootstrap4 Settings
• Bootstrap4 Triple Cols

CSS Files:

• Bootstrap4 bootstrap.css
• Bootstrap4 custom.css

Optional Module templates:

• Formbuilder: Contact form using reCaptcha

Smarty plugins:

• function.fa.php - For easily embedding FontAwesome icons in your page.
• function.content_type.php - For changing the pages content-type on the fly, originally written by Rolf@CMSCBS.

Setting up CMSMS

We need to adjust some settings within CMSMS for the template to work correctly. Once you have installed the required modules listed above set them up as follows:

Installing the Smarty Plugins

This is ideally done via FTP.

• Save the Smarty plugins linked above.
• Upload them to /assets/plugins
• Use the names specified in the link. The format of the name is important.

Adjusting Global Settings

We need to remove the default globallly applied meta tags to avoid duplication.

• Head to Admin > Site Admin > Settings - Global Settings
• Remove the following meta tags from the "Global Metadata" section:
  • <meta name="generator"...
  • <meta httpequiv="Content-Type"...
    Both of these tags are already included in the template and are now redundant.

Setting up Markdown

The default settings for the Markdown module are unsuitable for this template. Adjust them as follows:

• Head to Admin > Extensions > Markdown
• Set "Automatic Processing of Content Blocks" to "No"
• Set "Active the security" to "Nope"
• Set all three of the "patch me" values beneath to "Nope"
• Save your changes
• Ignore the warning stating "This javascript shouldn't be executed"

You also need to change your CMSMS profile settings to use the Markdown Editor.

• Head to Admin > My Preferences > My Account > User Preferences
• Set "Select WYSIWYG to use" to "Markdown"
• Save your changes.

You may also wish uninstall the MicroTiny module if you no longer intend to use it.

Note: installing Markdown can break existing content. You may need to edit the pages and remove the excess HTML formatting. Here's a simple Markdown Cheatsheet.

Setting up CSSPreProcessor

CSSPreProcessor has no settings by default and must be configured. Note, this is highly dependent on your server configuration. This guide assumes you are using a box that you have control over, and as such we will be installing SCSS via gem.

Install either SCSS (instructions below) then do the following:

• Head to Admin > Layout > CSS Preprocessor
• Set your preprocessor to be Sass (from command line)
• Leave the rest of the options blank.
• You can tick minify if you like but it won't do anything.

Installing SCSS via gem:

• Open an SSH window to your server
• Type: sudo gem install sass
• If it completes, we're done. If it fails chances are you need to also install gcc:
• Type: sudo yum install gcc -y

Installing less via npm (optional, usually not needed):

• Open an SSH window to your server
• Type: sudo npm install -g less

Installing Bootstrap4, jQuery and lightbox2, Popper.js, FontAwesome

• Open an SSH window to your server
• Navigate to: /assets (not /assets/node_modules)
• Type: npm install bootstrap jquery@3 lightbox2 popper.js font-awesome
• Wait for it to finish. Warnings here are usually fine.
• The installed files should now be at /assets/node_modules/..

Configuring CGSmartImage

• Head to Admin -> Extensions -> CG Smart Image Toolkit
• Go to the "Embedded Images" tab
• Change "Image embedding mode" to: "Smart mode but limit image size"
• Set the "Embeddable image size limit" to 32, or smaller.

This is done so that the source code does not become overly bloated and unresponsive when viewed during development. This is due to the excessive source code length from having all images in the page embedded as base64 encoded strings. This setting enforces large images to be embedded as traditional links and only images smaller than the specified limit will be embedded in the page source.

Configuring Captcha module

• Go to https://www.google.com/recaptcha/admin
• Create or obtain the reCaptcha keys for your website
• Go back to your CMSMS admin panel
• Go to Admin > Extensions > Captcha
• Set "Active library" to "reCaptcha"
• Click Submit
• Go to the "reCaptcha" tab
• Enter your secret and site_key
• Click Submit again

Configuring FormBuilder

• Go to Admin > Extensions > Form Builder
• Click "Add New form"
• Set "Form name" to "Contact Form with Captcha"
• Set "Form alias" to "contact-captcha"
• Leave "CSS Class for this form" as the default value
• Do not enable inline mode.

Under the tab Form Submissions:

• Ensure "After form is submitted" is set to "Display 'Submissions template'"
• Ensure "Page to redirect to after form submission" is set to "None"

Under the tab Captcha Settings:

• Check "Use Captcha to protect form submissions"
• Set "Help text for Captcha:" to "" (blank)

Under the Form Template tab:

• Insert the code linked above.

Add fields. Recommended fields follow in a name:type,property format.

• "Your Name": Email "From Name" Field, populate "Reply-To" email address, required
• "Email address": Email "From Address" Field, populate "Reply-To" email address, required
• "Subject": Email "Subject" Field
• "Message": Text area, non-wysiwyg, 5 rows, 60 cols, required
• "Send To": Email Results to set Address(es), enter your email here. Enter valid sender info.

Note: When embedding this form on your page you must disable Markdown Parsing for the content block that it is part of. This may mean moving the form to it's own content block.