Basic Theme Development: Part One


With concrete5 you can go from a static html build to a fully functioning theme in a very short time. The first thing you'll need is a fresh concrete5 install. When creating your first theme, installing with sample content can be helpful. As you become more familiar with the process you can choose the blank installation method if you find that easier for your process. Once that is installed, you can follow the following steps to get your theme up and running: 


Create a folder inside your root themes folder (not the concrete themes folder) and name it whatever you like. 
Inside your theme folder, create a text file called description.txt. Inside there, on the first line you will put the title of the theme, and on the second line include a brief description of the theme.  

My Theme
My Description

Next, give it a thumbnail. Make it 120x90px like the one below and save it as thumbnail.png in the theme directory. Below is the thumbnail image for the core theme Greek Yogurt. 

Theme Thumbnail

Before the closing head tag, include:

<?php Loader::element('header_required'); ?>

This grabs a file called header_required from the concrete elements directory which inserts the page title, the content type, and the character set.

Create default.php (the default page type template file). This has to be in there in case someone creates a page type that doesn't actually have a matching page type template. You don't want to use default.php for the home page. Later, you will turn index.html into a home page type (which you will probably only use once). 

Copy in your default html file and rename it to default.php. You can now apply your theme at this point. You won't have any editable areas, but it just serves to demonstrate how easy it is to get started. If c5 finds other page type files, it will offer to include them during installation. After you've installed it, then you still have to activate it (this is important to remember). Now your site will just have the html without CSS applied and no edit bar. We will get to that later. 

Copy over the styles section of the site. Then, in your theme template, add this code to dynamically grab the location of the style sheet. In this instance, it would look like this:

<link rel="stylesheet" href="<?php echo $this->getThemePath(); ?>/styles/layout.css" />

This is a function that says "I want to get the path of the current theme in front of the path styles/layout.css. Now it will update to get the css correctly. 

Right before the final body tag, we will include: 

<?php Loader::element('footer_required'); ?>

This grabs a file called footer_required.php. This will include the concrete5 tracking code if you enable it, and many javascript assets are included in the footer as well so that page load speeds are quicker, as the page will load prior to the javascripts, not having to wait for them to load visual page content. Remember that both of these includes for header_required and footer_required are (for lack of a better term) required. Omitting them will cause your theme to function improperly, break addons, and just generally cause trouble.  

At this point, check and make sure that your theme does not collide with styles of the concrete5 in-context user-interface. Below is an example of a theme using too broadly scoped of a style, making all elements with a .btn class, commonly used in Twitter Bootstrap, 1000px wide.


Some ways to get past this is to apply a class to the body tag and then within the styles, you can make sure that all your classes are prepended by that class and therefore won't interfere with the concrete5 editing user interface.

Recent Discussions on this Topic

Keep Theme Styles from Interfering with concrete5

Can someone please explain this to me, as I have a few sites that I have built where the theme does interfere with the Concrete5 Interface. ----------------------- From C5 Documentation: Keep Theme Styles from Interfering with concrete5 When c…

how to call the controller from theme header

Hi, I am developing web application by using the concrete5, First i try to implement multilingual in single pages, its work sample i attached my screen shots image. pfa. Now i want to this in my theme, how to do this. experts help me. than…

Package attribute

For a new theme I want to have a pagelist install with it which shows up thumbnails of pages, I have this all sorted but I have no idea how to install the 'thumbnail' attribute with my theme, I have looked at other packages but cant find any examples wher…

Location of Installed Themes

I have been searching for an answer to where installed themes get placed after being downloaded and installed from the dashboard. What is the directory? I am trying to design a theme from the skeleton theme: "Stripped" by Steven Braun at …

Custom Maintenance Mode in v5.7

Another day another C5 question.. I have followed 5.7 guidance on customising system single pages (link below) and have had no issues... that is until I got to the maintenance page. The article kind if implies this should follow the same process but I …