Theme Designer

How to create a simple theme

Watch the tutorial video now!

Login into your dashboard. Navigate to “Pages & Themes” – “Themes” – “Theme Designer”. This is where the magic will happen. We start with the first tab: “Basics”. Make sure you’ve got your HTML/CSS ready, either provided by your developer, made by yourself or downloaded from the internet.

  • You start by thinking of a name for your theme. Enter that in the “Name” field (make sure it’s unique, not “Elemental” or any other already installed theme in your concrete5 install);
  • Based on this name, you can enter a “Handle” in the Handle field. This is mostly a lowercased version of your name (where spaces will be underscores). So if your name was “Awesome Theme”, you could use “awesome_theme” as your handle;
  • After this, enter a “Description” for your theme. Something simple, something easy. It will be displayed under “Themes” later on;
  • Most themes/HTML templates ship with a CSS framework. These could be “Bootstrap”, “Foundation”, “960 grid” or something else. Select this in the “Grid Framework” field. If it’s not using any, just don’t select one. Yours not available? Select other and enter the handle for it;

Moving on to the “Elements” tab now.

  • Each HTML template has a <header> section, where some code is entered. We need to enter that as an element. Copy everything in between your <header> starting point and </header>, without including these tags themselves and paste that into the “Header” field;
  • Do the same for the footer, although mostly a footer is called <footer> of <div class=”footer”>. Make sure you also copy along any JavaScript scripts that may come afterwards. To make it more easy, just copy everything that belongs to your footer until the closing </body> tag;
  • Optionally add extra elements by clicking the “Add Element” button. Think of a quotes slider you’ll be using on multiple pages, or breadcrumbs or anything alike. Anything that’s going to be used on more than just 1 page (template). Upon adding an element, you can enter a “Handle” and the contents of this element. After entering your handle, you will see what code you can use later on, to paste in your page template;

OK, so we’re done with elements too. Next up are “Assets”. Assets are your images, stylesheets (.css files), javascript (.js files) and others. Mostly these are located in /img, /css and /js. Archive these directories/files into one single .zip file.

  • The “Zipped Files” field is where you select your .zip archive for the zipped assets. Make sure you keep the file below your maximum upload size though;
  • The “Delete Zipped Files if it exists” field is there if you load back in a configuration and don’t want to unpack the zipped archive (so basically “delete” the assets). Upon creating a new theme, just leave this checkbox unchecked;
  • Optionally you can also upload your assets and enter this URL into the “Assets URL” field. This way you can let someone else upload the assets for you or have the assets stored in a location so you can easily get back to them. Never lose your assets this way!;
  • Optionally add custom assets in the “Custom Assets” tab by clicking “Add Custom Asset”. Enter a handle, the type of asset (.css/.less/.js) and paste in your contents into the “Content” field. This may be useful for free downloaded themes where you’d want to overrule specific CSS or just add extra functionalities;
  • The “Register Assets” is for the more advanced users, knowing how to require/provide assets. If you’re not familiar with these terms within concrete5, just leave them all at “Automate” and let the Add-On do the work for you! Easy as that;

We’re almost there. If you got this far already, you could hit “Make the theme” button, as you have filled in all required fields. But, to those wanting to edit their default page template, we move on to the “Page Templates” tab.

  • Upon creating a new theme, there’s already 1 page template available: default. This is the Page Template that will be used in case there is no page template found for a page or you just have the default one selected. In most cases, just displaying the “Main” area will do the job. It may be necessary though for specific themes to add additional div elements or wrap the area with div classes. Think of something like this: “
    <div class=”my-container”>
    <?php
    $a = new Area("Main");
    $a->display();
    ?>
    </div>
    Perfectly fine if you’d want to do that. You can even add other HTML elements, although the “Elements” tab should be a better fit to do so and include that element in the Page Template using the PHP code provided right under the “Element” you want to include. For example:
    <?php $this->inc('elements/breadcrumbs.php'); ?>
  • You can also add extra Page Templates by clicking the “Add Page Template” button. Enter a handle for the template and paste in the contents you need for it.

You’re really finished now if you want the basics of creating a theme using Theme Designer. You can hit “Make the theme!” button at the very bottom of the page. Just wait for it and it should be installed right away. After creating and installing, you can navigate to “Pages & Themes” – “Themes” and click on the “Active” button right after your theme name.