Concrete5 is a Content Management System that I actually stumbled upon accidentally. I say stumbled because for the most part they do not advertise and rely on word of mouth promotion. I have since built a couple of sites with the CMS and have been thrilled at its ease of use and robust functionality. One downside is that, being such a quiet endeavor, the community is nowhere near the size of some other fan bases, and thus 3rd party add-ons, including themes, are very limited. Seeing as how a big reason to use a CMS is for folks who are perhaps less code savvy to be able to handle their own stuff, the ability for a simple re-skinning would be nice, and my aim here is to bring that one step closer by helping others make more themes for Concrete5 to use. With that being said, lets get going!

Edit note: This post suffered most from my recent database crash, and it has lost some pieces, namely imagery and PHP snippets. I am super sorry about the inconvenience and am trying to piece it back together. Thank you for understanding.

In this tutorial I am going to take us from start to finish, beginning with a PSD template turning into active HTML and CSS, and in turn converting that into a Concrete5 theme. In hopes of helping people who have no experiece with any of this, I am going to go from scratch, so if you are only wanting to know how to go from an HTML site to a Concrete5 theme, go ahead and skip down to part three. The PSD file I am using is a simple theme I downloaded for free from PSDTemplates.com which I modified in Photoshop to alter the colors. Here is a preview of what we are working with, and now it is time to slice it.

If you have never chopped up a PSD file before, don’t worry, it is not hard at all, especially on a layout as straightforward as this one is. The goal here is simply to help familiarize you with the steps, not challenge you to frustration. So go ahead and hop into Photoshop and open up this template. The nice thing about it being a simple layout, is there are not many images we have to grab. Let’s start with the main picture in the header area, Make sure you have the pointer selected, and also have the auto select layer check box checked. Now just click on the picture and it will locate the layer in the layers pane. Bring your cursor to the layer, and while holding down CMD, (CTRL for windows) click once on the thumbnail image on the layer. This will outline and select that layer for you, now if it is just a simple image, you can hit CMD+C, {CTRL+C} to copy it, however if there are gradients or effects, be sure to hit SHIFT+CMD+C to copy merged layer. Now, type CMD+N to open a new file, the size of the layer image you copied will be set automatically, so just hit enter to open the file, followed by CMD+V to paste the image there. Head to the layers panel now and click the eyeball to remove the background layer. This will ensure that any transparency on the image you copy remains transparent. Now once that is done, save the image as a .png file, and name it something memorable. For example, I named this one headerPic.png because I knew I would be using it as an image in the header.

Now you can go ahead and grab the rest of the images using this same method, grabbing the logo, navigation, header and footer backgrounds, main body gradient, checkmark and all the little icons in the columns to complete the images you need. Or you can use the ones I will put in the download folder. Once you have all the images, save them in a folder named images and feel free to close out photoshop, we are done with it yay! Moving on, we now need to make these few images into a working website. Not much to start with, but here is the fun part, on to the HTML.

Part One

THE HTML

Try not to even think about the end result right now, yes we are making a theme, but the best way to make the theme is to make sure you have an HTML/CSS equivalent that runs perfect and is as cleanly put together as possible. So open up your favorite text editor, if you are on a Mac I highly recommend textmate if you are in the market. I like having an image in my head to go off of, so before closing Photoshop I saved the file as an image I could look at, it is called preview.png in the download folder. We can see by looking at the preview that the basic HTML structure is easy to follow. We have an upper navigation bar holding the logo and menu, a main header area followed by welcome content and then three columns holding lists sitting on top of a footer. Straightforward to code, so let’s start with the upper part, I will assume you have the HTML skeleton, if not make it or copy it from the index.html file in the download folder.

<div id="wrapper">

<div id="nav_bar">

<h1 id="logo">
	<a href="#">Logo!</a></h1>

<!-- #logo -->

<ul id="menu">

	<li><a href="#">Home</a></li>

	<li><a href="#">Services</a></li>

	<li><a href="#">About</a></li>

	<li><a href="#">Contact</a></li>

</ul>

<!--end #menu--></div>

<!-- #nav_bar --></div>

All we do here is open up a wrapping div to hold all our content then create a navigation bar holder and the logo and menu areas. Underneath the nav bar we have the featured header area which will house an image and a bit of text, so I came up with this,

<div id="header">

<div id="text">

<h2>Title</h2>

<h4>Sub Title</h4>

Lorem ipsum dolor sit amet.</div>
</div>

<!-- #header -->

Very simple just a div and couple of lines, see there is really not much to it right!? Now simply add an area for the main content and its text like so, and you can obviously fill in the p tags with whatever you like. The intro div is to separate the full width upper half content from the tri-column area below.

<div id="main_content">

<div id="intro">

Lorem ipsum

ex ea commodo consequat.</div>

<!-- #intro --></div>

Now a part that may be new to some is using classes mixed in with ID’s. Classes are what you want to use when there will be more than one element that is identical on the same page. For example, these three columns here will all share most of the same properties, so for the upcoming CSS if I used ID’s on them, they would all need to have different names and I would be rewriting the same code over three times. But if I use a class, I can write the CSS once and apply it to all the elements that will have that behavior, so look at this code,

<div id="column_wrapper">

<div class="main_column">

<h2 class="review">Customer Review</h2>

<ul id="review">

	<li><span>Alex</span> says:</li>

	<li>“Lorem ipsum dolor sit amet”</li>

	<li><span>John</span> says:</li>

	<li>“Lorem ipsum dolor sit amet, consecteturDonec pharetra molestie nunc. ”</li>

</ul>

<!--end #review--></div>

<!-- .main_column -->

<div class="main_column">

<h2 class="feature">Features</h2>

<ul id="feature">

	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>

	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>

	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>

	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>

</ul>

<!--end #review--></div>

<!-- .main_column -->

<div class="main_column">

<h2 class="price">Prices</h2>

<ul id="prices">

	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>

	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>

	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>

	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lectus.</li>

</ul>

<!--end #review--></div>

<!-- .main_column --></div>

<!--end #column_wrapper-->

<!-- #main_content -->

Ok I know that was a big one, but it’s over now. I am sure you can see the repetition in there right? This is the beauty of using the classes for CSS, because we gave each div a class name of “main_column” we can write one set of CSS code to apply to all three of these columns. So bear this in mind on bigger projects where you will be using the same styling on more than just a couple of lists.

One last bit of info we need to build into our page here, and that is the footer, and you certainly know how to do that by now, so go ahead… Ok, I will post it here just in case.

<div id="footer">
<span>Orange</span> © - <a title="PSDTemplate.com" href="http://psdtemplate.com">PSDTemplate.com</a>. All rights reserved.</div>

<!-- #footer -->
<!--end #wrapper-->

And there we go. A div to contain the footer with a class of copy inside so that we can easily position all the copyright text at the bottoms of the page, then we close up the footer, close the page wrapper and that is that. Note that I left the text in showing the copyright of where I got the PSD template from. You can obviously change this information to your own site providing you own the rights. Don’t want to step on any toes now do we.

Part Two

THE CSS

So now if you are daring, feel free to view the HTML file you just made in your browser, you will see a breathtaking display of,

well, text…How boring, we have not styled it yet! So now on to the CSS. Begin by once again hopping to your favorite editor and create a new file called main.css and save it next to where you saved your index.html file. We are going to concentrate on the main parts here, styling our main div and block areas, once again my complete CSS file is in the downloads folder. This may be a habit of mine, but when I write my CSS I like to go from the top down, and left to right on as the page requires. So lets start with the upper sections,

body {
font-family: "Lucida Grande",Lucida,Verdana,sans-serif;
background-color: #9d9d9d;
}
#wrapper {
width: 960px;
margin: 0 auto;
background: #f5f3f3;
}
#nav_bar {
width: 960px;
height: 93px;
background-image: url(images/nav_bar_bg.png);
}
#logo {
width: 108px;
height: 44px;
margin: 20px 0 0 20px;
float: left;
display: block;
text-indent: -9999px;
background: url(images/logo.png)no-repeat;
}
#logo a {
width: 108px;
height: 44px;
display: block;
}
ul#menu {
width: 400px;
height: 20px;
margin-top: 20px;
float: right;
}
ul#menu li {
list-style: none;
display: inline;
}
ul#menu li a {
font-size: 14px;
color: #c1c1c1;
margin-left: 10px;
padding: 4px;
text-decoration: none;
border: 1px solid #303123;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
ul#menu li a:hover {
color: #fff;
border: 1px solid #aaa;
background: #41422f;
}
#header {
width: 960px;
height: 234px;
margin-top: 1px;
position: relative;
background: url(images/header_bg.png)no-repeat;
}
#header img {
position: absolute;
left: 45px;
bottom: 0;
}
#header #text {
width: 380px;
position: absolute;
right: 80px;
top: 50px;
}
#header h2 {
font: 36px "Lucida Grande",Lucida,Verdana,sans-serif;
text-align: center;
}
#header h4 {
width: 320px;
margin: 0 auto 10px auto;
padding-bottom: 10px;
text-align: center;
border-bottom: 1px solid #303123;
font: 13px "Lucida Grande",Lucida,Verdana,sans-serif;
}
#header p {
font-size: 11px;
color: #ffffff;
font-style: italic;
line-height: 14px;
width: 320px;
margin: 10px auto;
}

Ok welcome back, that was a lot of brackets and semi-colons eh? Well, all we did there was create some styling for the navigation bar where the logo and menu will be, as well as the header area. I created a separate section in the main header for an image to be on the left, and an area for text to be on the right, this way the information can be changed relatively easy. If you have never seen CSS before, don’t freak out about what you just read, it literally just tells the browser what to make things look like and where they should be in the window. Do make sure that you are setting the paths correctly, notice where is says

background: url(images/SOME_NAME.png)no-repeat;

That is the CSS file telling the browser that it needs to go to the folder named images, get the image named, in this case, SOME_NAME, and display it as the background for that particular element. If the path is wrong or the image not present, it will default to either a set background color, or nothing at all. These are what are known as relative paths because instead of providing an entire URL address, the give a shorter address in relation to the current CSS file and reduces the http requests made. If, for example, all of the images were not in a folder, and were in the same directory, sitting right next to the CSS file then the relative path would simply be SOME_IMAGE.png.

Following in the same direction, let’s go ahead and style the rest of the page here, remember we made a div called main_content that would hold everything in the large area under the header, so everything will sit inside that, including our three columns, this ensures that nothing goes overflowing out of our main wrapper of 960px.

#main_content {
font-size: 12px;
color: #a7a7a7;
text-indent: 20px;
line-height: 18px;
height: 530px;
margin-top: 1px;
background-image: url(images/main_content_bg.png);
}
#main_content h3 {
font-size: 22px;
color: #909090;
}
#main_content #intro {
width: 820px;
padding-top: 25px;
margin: 0 auto;
}
#column_wrapper {
clear: both;
width: 960px;
margin-top: 20px;
padding: 20px 0;
}
.main_column {
width: 30%;
float: left;
color: #686868;
margin-left: 32px;
}
.main_column h2 {
font-size: 20px;
color: #303123;
margin-bottom: 20px;
}
.main_column ul {
text-indent: 0;
padding: 10px;
list-style: none;
}
.main_column ul li {
font-size: 14px;
margin-bottom: 10px;
line-height: 18px;
}
.main_column ul#review span {
font-weight: bold;
font-style: italic;
}
.main_column ul#feature {
list-style-image: url(images/check.png);
}
.main_column ul#prices {
list-style-image: url(images/money.png);
}
h2.review {
padding-left: 45px;
background-image: url(images/review.png);
background-repeat: no-repeat ;
}
h2.feature {
padding-left: 30px;
background-image: url(images/feature.png);
background-repeat: no-repeat ;
}
h2.price {
padding-left: 30px;
background-image: url(images/prices.png);
background-repeat: no-repeat ;
}

Once again, notice that most of what we are setting in here is font styling and element position, we add a few more background images as well. A few things I would like to point out, first remember the discussion on classes earlier? Here is it put into practice, you can see the styles for

.main_column

and each selector applied to it, those styles are the same for all three of our main columns, and by making them classes we saved having to triple type this information. Also, notice how each of the h2 selectors are also attached to a specific class? I did this so that I had a way to lock on to them in their respective lists in order to apply their corresponding icons.

Last thing to add once again is our footer decoration, identical to what we have done multiple times now, and remember in the HTML we included a class name copy so that we could precisely position the copyright information;

#footer {
margin-top: 1px;
background-image: url(images/footer_bg.png);
clear: both;
width: 960px;
height: 42px;
position: relative;
}
#footer .copy {
font-size: 12px;
color: #fff;
position: absolute;
bottom: 10px;
left: 20px;
height: 20px;
}
#footer .copy span {
font-size: 16px;
}
#footer .copy a {
text-decoration: none;
color: #e3e3e3;
}

Simple right? And guess what, that marks the end of our HTML and CSS markup! Make sure you save you brand new main.css file then go ahead and refresh that preview we had earlier with all the super fancy text, and with any luck, it should look a lot better than before… What do you mean it didn’t work? Very good, we need to tell our HTML that it has styles it can use! I mean, the internet is smart, but it certainly can’t read our minds! Luckily, this is really easy, so open up your index.html file and inside the head section, somewhere before the closing head bracket, insert the link to it.

Fancy it starts with the word link, because that is precisely what it does, it links the file we named main.css into the HTML file so they will now become best friends, unless of course their “friend” IE6 comes to play…but that is another story. Now you can refresh your page and marvel at it’s beauty, we are on the home stretch now friend!

Part Three

THE THEME

The moment you have been waiting for? Unless of course you chose the skip to here option up above, so here is the part where we finally turn this beast into a fully working theme to skin your Concrete5 site. The awesome news is that, by going through this way, we have this about 98% completed. We are about to introduce a new language here, PHP, but C5 thought this out well and make the function very easy for us to use.

First we need to break up our main index.html file, you can copy all of its content into a new file, and name it default.php. This will serve as the main file for the theme. Now create two new files, named header.php and footer.php, and place them inside of a new folder named elements. This is for C5 to use. Head into you newly made default.php file, and copy everything from the tippy top down to where the header ends, delete it from default.php and paste it into header.php.
Save header and do the same thing for footer.php, copy and delete everything from the beginning of the footer to end of page in default.php and paste it into footer. You now have three files that make up one page, header.php for the top, default.php for the middle and footer.php for the bottom.

Open up header.php, we have some magic to add to it. Up at the very top of the page, before anything else, simply copy and paste this in;

And still inside of header.php, before the closing head tag, and preferably after any specific scripts or files you are including on your own, add this,

This is essential for the proper functionality of the Concrete5 editing system, basically this tells the CMS that you have requested to have your header file appear, and allows Concrete to append their editing bar up at the top of the page. You will see this in action soon enough. While we are here, open up footer.php and at the very top of this file, we need to add the same functionality,

Now we have succesfully broken up what was our index.html file, and so the top and bottom of our pages know how to act, however, they do not know when to act, so now we need to call them in order to get them to display. Recall that the middle hunk of our index file was turned into default.php, so hop back into that file and tell it that it needs to get the header. Once again, at the top above anything else, drop this in,

inc('elements/header.php');
?>

You can guess what is being accomplished here, and take note of the path for the include, the header.php resides in the directory, [folder] named elements. I suggest leaving them where they reside by default for now. Go ahead and include the footer at the bottom of the page as well.

$this->inc('elements/footer.php');

Don’t forget to wrap the line in PHP tags. And here we are now with a skeleton that would actually function, of course it wont do much unless we hard code in the content, but that is not the point of a nice CMS is it? So for the home stretch, we are going to work top-down and make things happen. By now you have accumulated a few files, default.php, main.css, and header/footer.php in a folder named elements, so open up header and let’s get our style sheet linked in there. Inside of the head tag paste this line,

[/html]

[/php]
It is not as freaky as it looks, you recognize the file being called as our main.css and the way it is called we use the PHP function to grab the location of our theme path, keep in mind this will only work if you are maintaining the same file hierarchy as I am. Anytime we are making a call to a location or image in what was our index.html page, we need to address those locations so that Concrete knows where to find them, and they are dynamically adjustable. So notice in the logo id, we would input a static absolute URL and type in our site name. What if we want to change it next week? It would be a pain, so let’s make it adjustable via the CMS. Inside the h1 tag, replace the entire anchor link with

<a href="<?php echo DIR_REL ?>/"></a>

In this fashion we use a dynamic PHP call to get both our sites location and name, thus making it dynamic. Yay! Now along those same lines, we do not know how many or what pages we may have on our site, so our navigation menu should definitely be easily adjustable, go ahead and delete everything inside the menu id list. We are going to use a special function here to create our first editable area, by putting this in the menu id area, we will have a “block” we can edit with a click and drop in a menu that is generated for us.

display($c);
?>

You can put these wherever you want to make an area editable but a few things you need to pay attention to. The variables we create, in this example it is $navigation, you can make these up as you wish, but it helps to try and name them relevant to what they will be doing. The part = new Area() creates a new object and assigns it to the variable we just made. So here we are making an object named “Header Nav” and storing it in a variable named navigation. The following line is the Concrete call to make the object display on the page, simply type the variable you created followed by ->display($c) because that is what C5 expects. Now inside the text id, add another editable block.

Taking another look at the preview picture, we see that our main page will have one big main area and three columns under it, so that tells me our default.php page we need to add four editable areas to it. Inside the intro div, erase what is there and add your block function call. Remember to name it accordingly and then repeat for the columns below. Even though the columns all share the same class, each of their block area must have a different variable and area name. What I did was name the main_left, main_center and main_right to help me remember what each one does. Now you can add an editable area to the footer if you want, or just leave it as is, just remember that wherever you add an area it will take on the attributes of the div it is enclosed in, so when we add a list to one of our columns, the styles we defined for lists in our main.css will apply to the content we add to the editable areas.

Almost there! We have two files to add, but don’t worry one we wont even touch. First make a file named typography.css, this one we will not touch yet, but it will be useful in a later tutorial. Create a new file named view.php, this is required for Concrete5 themes in order to handle single pages and those created by users. Easier still is that you can basically just copy your default.php file, we only need to make one little change to the intro div. Remove the call to build an edit area there, and replace it with this special call,

This is another Concrete specific function that tells the page to basically grab whatever was added by the user and put it right there. This allows you to control where it will appear, for example you could stuff it into the left column if you wish, though I don’t recommend it. If you wish, you can change this page further on your own.

It is near time to upload our new theme, so we need to add some final pieces to fill it out. Make a simple text file named description.txt, and inside type the name of your theme on one line, and on the next type your name or credits to identify your theme. Accompany this with a screenshot of what the theme actually looks like, make the picture 120×90 pixels, and name it thumbnail.png. Include both of these in the root of the folder, then go ahead and upload it to your server. You will want to put it into the themes folder in the root of the concrete folder.

Once that is done, log into your dashboard and go to the pages and themes tab. You should now see an image of your new theme with the description right with it! Click on install and then activate it, it is now time to peek at what we have accomplished. Once activated click return to website and marvel. Yeah it may be a little sparse, but remember all those editable blocks you made? Click edit page in the upper left and watch all your blocks appear, start adding your content.

Let’s first click on one of our three columns, choose to add a block and add an HTML block like so.

Now what I did here was jump back into our original index.html page, and simply copy the code from one of our columns to paste in here. Easy right? We took care of all the styling, and since this is a block of HTML we are adding, everything will behave the same way, so go ahead and paste it in there then click add.

Exit edit mode and publish changes, you should have a pretty column now matching what we made earlier.

I hope you found this helpful, there is so much more that you can do with a C5 theme, including custom pages and styles that are editable from within the CMS itself. I will do a writeup on these extra aspects very soon, please let me know if this helped you and feel free to share your site link so I can see! Thanks for reading.

Download Folder: thatryan Concrete5 Theme

About the Author: thatryan