Converting an HTML Template into a C5 Theme — CMS Class

5 min readSep 15, 2017

4/24/17

I took a free, single-scroll HTML template off of the Internet to use while working with Concrete5 (C5). I already had an existing C5 account from when my DMD3998 team did work on SkydiveCT’s new website, but I had never used C5 before that. Even for that project, I only went into C5 for about an hour total, so it was still very unfamiliar.

First, I downloaded C5 onto my computer to use it locally. I ran MAMP on the concrete5–8.1.0 folder and opened it up in my browser to set up. For “Starting Point,” I created an empty site to use the unstyled Elemental Theme. Then, I entered in the name of my server and made a MySQL database for this project.

This is what my theme looked like when it first installed:

Next I went into: Dashboard > System & Settings > Optimization > Cache & Speed Settings. I turned everything off for performance reasons.

To get my own theme to show up. I went into the concrete5–8.1.0 folder > application > themes, which was an empty directory so I made a new folder for this theme called “michelle.” Similarly to WordPress for when you need a style.css file to act as a template for a new theme, I created a txt file (“description.txt”) that gives a name and description to my new theme. I also took a screenshot of the template that I used and named it “thumbnail.png” inside my “michelle” folder. Then, when I refreshed my page, C5 recognized my new theme ready to be installed, so I clicked install and then activated it.

After that, I had to create a page template, specifically the full page template, so I took the index.html file (renamed to “full.php”) from the HTML template folder and pasted it into my “michelle” folder. So, when I went back to the home page, it looked like this:

I copied over the rest of the files from the HTML template folder (css/js/img/font folders) into my “michelle” folder. This didn’t help out the home page on C5, so it was time to add in some code into full.php. After each href (minus the links), I added in <?=$view->getThemePath()?>/ because “view” is a variable that automatically gets injected into the page template. It has information about the current theme and what the user views. “getThemePath()” will automatically figure out which theme is currently loaded. For the images directory, I added in the same code after each src=“.

Once I got all the code pasted in, I refreshed the page and the C5 page looked exactly like the HTML template, except the toolbar up top was missing. This was because I hadn’t done anything to inject the CSS and JS that C5 needs in order to include the toolbar. So, in the head tag, I added in <?php Loader::element(‘header_required’); ?> which includes that file in the C5 elements directory. Also, the title tag is controlled by C5 so I deleted it from full.php. Right before the closing body tag, I wrote <?php Loader::element(‘footer_required’); ?> because it’s necessary for C5.

After refreshing the page, the toolbar popped up and the panel worked just as it should. However, usually when I opened up a panel, the website would shift to the side, but as of this point, the website would stay in place and would be partially hidden by an open panel. Next, I needed a special container class — <div class=“<?=$c->getPageWrapperClass()?>”> - that would wrap around all of the content on the page which would solve the panel problem. This div was entered right after the body tag and ended right before the footer_required code.

Lastly, now that I got my HTML template imported in, I wanted to make the page editable. I wanted to get rid of the content within the big blue hero area, so I deleted everything within that div (highlighted below) and pasted <? $a = new Area (‘Hero’); $a->display($c); ?>. The first line defines the name of an area and the second area tells the area to display with content from the current page.

From here I was able to drag in my own content usings “blocks” and play around with my theme. I added in a few more new “Area”s as well, just to get the hang of it.