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.
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.
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'); ?>
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.