Description

This Framework is to be used when starting a new site. Contained in these folders are all the files and folders typically copied over on a fresh Contao install.

Before Contao Installation

1. Set up a new account on any given server while following Andy's Contao Installation Instructions.
2. Using terminal, make sure the default folder for the new site is “public_html\web”
3. Set the highest compatible version of PHP you can
4. Make sure the SSL certificate is being installed correctly under “Manage AutoSSL”

During Contao Installation

1. During the System Check step, the Server Configuration line will show a button on the right labeled “Change”, click it
   • Server Configuration: You should point to the php binary for the version being used. We now use PHP 8.1, so the line would read “/opt/cpanel/ea-php81/root/usr/bin/php”.
   • Uncheck “Use the Composer Resolver Cloud” option. Our servers have enough memory.

After Contao Installation

After Contao’s installation has finished, install specific modules. Here is a list of modules install on nearly every site:

• zyppy_class
• zyppy_popup
• dklemmt/contao_dk_mmenu

Here is a list of other commonly used modules depending on the site

• zyppy_page
• zyppy_redirect
• codefog/contao-news_categories
• isotope/isotope-core
• terminal42/contao-leads

Using the Framework

There are two main folders, “Things to Upload” and “Things to Copy Over”. The folder “Things to Upload” contains folder structures and files used on nearly every site. The contents need to be compressed, uploaded onto the new site, and extracted. The folder “Things to Copy Over” contains folder structures with files who’s content needs to be copied into the same files found on the new site.

Directions for “Things to Upload”

1. Compress the contents of the "public_html" folder. Upload onto the new site and extract it inside the new sites "public_html" folder.
2. In the "templates" folder, update the folder named "site_name" with the new sites name (Example: "bright_cloud_studio").
3. In the "files/structure/scss" folder, change the file named "site_name.scss" with the new sites name (Example: "bright_cloud_studio.scss").
4. In the "_variables.scss" file, update the "Site Specific" variables like the font family and color.

Directions for “Things to Copy Over”

1. After installing the “zyppy_class” module, on the sites server open the “system/config/localconfig.php” file and copy over the needed contents from the framework’s “system/config/localconfig.php” file.

Starting Within Contao

After Contao and the BCS Framework have been installed, these are the basic directions for getting started within Contao.

1. Set up a Theme
   1. Under “LAYOUT > Themes” click “(+) New” to create a new theme
      1. For “Theme Title”, use the sites name (Example: “Bright Cloud Studio”)
      2. For “Author”, use “Bright Cloud Studo”
      3. For “Folders”, select the “structure” folder we uploaded from the framework
      4. For “Templates folder”, select the “site_name” folder we renamed and uploaded from the framework

Add Front End Modules

Now that we have our new theme, we need to add front end modules and page layouts. First, lets add the front end modules.

1. Add a “Header – Wrapper” front end module:
   1. Click “(+) New” to create a new front end module
   2. Change “Module type” to “Custom HTML”
   3. For “Title”, use “Header – Wrapper”
   4. Copy the contents from “Header – Wrapper.html” in the “Front End Modules” folder into the “HTML code” section
   5. Click “Save and Close”
2. Add a “Footer – Wrapper” front end module:
   1. Click “(+) New” to create a new front end module
   2. Change “Module type” to “Custom HTML”
   3. For “Title”, use “Footer – Wrapper”
   4. Copy the contents from “Footer – Wrapper.html” in the “Front End Modules” folder into the “HTML code” section
   5. Click “Save and Close”

Add a Page Layout

Now that we have the minimum needed Front End Modules we can set up our first Page Layout. Under the “LAYOUT > Themes” section click on the green and white icon to the right of the gears to edit Page Layouts

1. Add a “Default” page layout
   1. Click “(+) New” to create a new page layout
   2. For the title, use “Default”
   3. For “Rows”, select the last option which is a green rectangle above and below a white rectangle
   4. For “Columns”, select the first option which is just a blank white square
   5. For “CSS framework”, uncheck all option as we are using our own
   6. For “External style sheets”, click “Change selection”
      1. Navigate to the “structure/SCSS” folder we uploaded and select the necessary files
         1. _variables.scss
         2. standard.scss
         3. structure.scss
         4. “site_name.scss” which would be renamed to the specific sites title (Example: “bright_cloud_studio.scss”)
         5. header.scss
         6. footer.scss
      2. Drag to reorder the files into the order listed above
   7. For “Included modules”, click the green “+” button twice so there are three options
      1. For the top option select “Header – Wrapper” in the first box and “Header” in the second
      2. For the middle option leave the first box “Articles” and the second box “Main column”
      3. For the bottom option select “Footer – Wrapper” for the first box and “Footer” for the second.

1. Under “jQuery”, select “Include jQuery”
2. Under “Expert settings”
   1. For “Page template”, select “fe_page (site_name)”
   2. For “Viewport tag” use “initial-scale=1, maximum-scale=5”
   3. For “Body class” use “default”

1. Click “Save and close”

Setting up Site Structure

Now that we have our minimum needed front end modules and a page template, we can set up the Site Structure and set up our first page.

1. Set up our Website Root
   1. Click “(+) New”, then click the orange box with the white arrow to the right of the gray “Site structure” line
   2. For “Page name”, use the site’s name (Example: “Bright Cloud Studio”)
   3. Under “Language settings”
      1. For “Language” use “en”
      2. Check “Language fallback”
   4. Under “Website settings”
      1. For “Favicon”, click “Change selection”
         1. Navigate to the “structure/images” folder we uploaded and select the “favicon.svg” file
         2. Click “Apply”
      2. Under “Global settings”
         1. For “Date format”, use “F j, Y”
         2. For “Time format”, use “g:i a”
         3. For “Date and time format”, use “F j, Y”

1. Under “Layout settings”
   1. Check “Assign a layout” and make sure “Page layout” is set to the “Default” page layout we created earlier
2. Under “Publish settings”
   1. Check off “Publish page”
3. Click “Save and Close”

Now that we have set up our website’s root, we need to add our first page.

2. Add our first page
   1. Click “(+) New” then click the orange box with the right facing arrow on the lighter gray line with the site’s name
   2. For “Page name”, use “Home”
   3. Under “Expert settings”
      1. For “CSS class”, use “home”
      2. Check “Hide in navigation”
   4. Under “Publish settings”
      1. Check “Publish Page”
   5. Click “Save and close”

We’re Up and Running

If you visit the new site now, it will successfully load and display our newly created “Home” page.