Coding and more – Concrete5, Flex, JavaScript

Concrete5 – Create your own theme

Your own site with your own layout – you want to be unique, don’t you?
This tutorial will show you, how you can create a Concrete5 Theme within a few minutes.

You should have basic HTML and CSS knowledge. PHP experience isn’t required, I’ll explain all the PHP code.

In this tutorial, I’ll start with a photoshop file which I already converted to and HTML/CSS file. If you don’t have one yet – find, build or download one before you continue.

Elements of a theme

A little overview of all the elements you’ll find in a theme:

  • elements – Die directory contains the elements for a template like the header and footer
  • images – Sometimes, you’ll put pictures, like a background image, into a theme which you can’t edit. Save them here
  • default.php – This is the default file, for pages without a specific page type
  • description.txt – Put the name and a short description in this file, just needed to make sure you’ll recognize your theme in concrete5
  • full.php – Same as default.php, but this one is used by the pages of where you selected the page type “full”
  • home.php – Another layout for page type “home”
  • main.css – Save all your CSS rules in main.css
  • thumbnail.png – An icon with the dimension 120×90 pixels which shows your theme
  • typography.css – A second CSS with is used by the wysiwyg editor
  • view.php – the layout for “single pages”.

All the files of your theme will be saved in a directory. This makes is quite easy, to copy a theme. You can install a theme by copying a directory and a single click in the dashboard.

Pages: 1 2 3 4 5 6

48 Responses to “Concrete5 – Create your own theme”

  • Pritam

    Hi Laubi,

    I was desperately looking for a tutorial for making themes for Concrete 5 and came across your site, although i cannot understand german , however i used google translate to translate your post.

    I downloaded the html files and also the final C5’ed theme however when i installed it on the Concrete 5 instance that i have installed on my local host, and activate this theme it gets the theme however it does not get the navigation or the content bar.

    Help would be appreciated.

    Thanks for your great effort ­čśÇ

  • Laubi

    Hey Pritam,
    the content is not part of the theme. I put some block in to make sure it doesn’t look empty. I should probably have added some notes about it tho..
    Just click on “Add to…” and select “Content” or “Auto Nav” or anything else you’d like to add!
    It’s pretty intuitive, just click around and you’ll get it!
    Best,
    Laubi

  • Hi Laubi

    Hey Laubi,

    Thanks a million tons, i followed your work around and i was able to get that theme to work perfectly. I highly appreciate your effort.
    Later i tried to make a C5 theme of an html template following you tutorial, i made but it does not work, Here you can download the theme and tell me what wrong i am doing http://tinyurl.com/b4c7xx , Please forgive for my ignorance but i am a NUB.

    Thanks in advance

    Pritam

  • Pritam

    Hey Laubi,

    Thanks a million tons, i followed your work around and i was able to get that theme to work perfectly. I highly appreciate your effort.
    Later i tried to make a C5 theme of an html template following you tutorial, i made but it does not work, Here you can download the theme and tell me what wrong i am doing http://tinyurl.com/b4c7xx , Please forgive for my ignorance but i am a NUB.

    Thanks in advance

  • Laubi

    That theme looks fine, just one mistake. Make sure every area has a unique name (Content and $content are used twice)!

    Not sure about this, but does your theme directory have spaces in the name? If yes, try removing them..

    After copying the directory, don’t forget to active the theme in the dashboard!

  • Pritam

    Hey Laubi,

    Thanks for the prompt responses, I gave both the areas their unique names and also removed the space from the theme director name and it started giving me resuls, i have yet to figure out how the footer would come up.

    But, your help has given me a direction and i think i will try to figure it out myself. Would love to have more of such tutorials, coz they should be really helpful for more new concrete users as there is not much comprehensive help as of now.

    Cheers !!

  • wonderul!

    i have’t tried this yet, but I came across your site tonight, after using c5’s tutorial and failing to do it correctly, resulting in me needing to reinstall
    Are you available for freelance work?

  • Felix

    Vielen Dank f├╝r die hilfreiche Anleitung. Habe danach problemlos ein YAML-Layout unter c5 implementieren k├Ânnen. :)

    Da bei diesem Hight-End-CSS-Framework eine ganze Reihe von CSS-Bausteinen einzubinden sind, sollte man auf jeden Fall einen Ordner /css/ anlegen. In main.css packt man dann das zentrale Stylesheet, ├╝ber das die einzelen CSS-Bausteine wiederum via @import eingebunden werden. Da in dem YAML-Layout auch ein Druckstylesheet bereit gestellt wird, muss head.php entsprechend modifiziert werden:

    @import “getStyleSheet(‘main.css’)?>”;

    Bei der Organisation der CSS-Dateien kann man auf die CSS-Ordnersktruktur zur├╝ck greifen, die sich f├╝r den produktiven Einsatz von YAML bew├Ąhrt hat. Den yaml-Ordner habe ich allerdings auch in css gepackt, er enth├Ąlt die Grundfunktionalit├Ąten des Frameworks, die dann mit eigenem CSS modifiziert bzw. erg├Ąnzt werden.

    css/navigation/ -> CSS f├╝r horizontale und vertikale Navigation
    css/patches/ -> layoutspezifische Anpassungen f├╝r den IE
    css/print/ -> Druckstylesheet
    css/screen/ -> basemod.css f├╝r Spaltenanordnung etc. & content.css f├╝r die Formatierung der Inhalte
    css/yaml/ -> CSS-Framework, Bereitstellung der Grundfunktionen, sollte nicht ver├Ąndert werden.

    Sehr hilfreich ist auch die Datei typography.css im Hauptverzeichnis des Themes. Hier kann man dann z.B. die class-Selektoren auflisten, die ein Redakteur dann im Editor unter styles ausw├Ąhlen kann. Da es sich hierbei um eine Funktionalit├Ąt des CMS handelt, w├╝rde ich in dieser Datei keine CSS-Regeln schreiben (CSS-Regeln werden nur in den CSS-Dateien im Ordner CSS definiert), d.h. die geschweiften Klammern leer lassen, z.B.:

    .note { }
    .warning {}
    .float_left {}
    .float_right {}
    .kontakt {}

  • Felix

    Nachtrag: Die betreffende Zeile in head.php lautet nat├╝rlich:

    <style type="text/css " media= "screen,print ">@import "<?php echo $this->getStyleSheet(‘main.css’)?> ";</style>

  • Bill

    Thank you, Laubi, this is an excellent tutorial!
    Cheers to your for your effort!

  • marco

    huhu, nettes Tut, danke. trotzdem w├╝rd ich gern wissen warum ich auf Seite 5 jede Menge Fehlermeldungen bekomme:

    Da steht:
    Warning: array_keys() [function.array-keys]: The first argument should be an array in /home/usr/codeblog/public_html/wp-content/plugins/wp-syntax/geshi/geshi.php on line 1904

    und davon jede Menge. das geh├Ârt sicher nicht zum Tut oder soll das so sein?^^ w├Ąre nice wenn ihr den teil mal reparieren k├Ânnt damit ich wei├č wie es an der Stelle weitergeht. Danke!

  • Remo Laubacher

    Hey Marco danke f├╝r’s Feedback!
    Das ist ein Problem das wohl mit dem Update nach WordPress 2.8 entstanden ist.. Hab’s geflickt

  • marco

    Danke das nenn ich mal FIXER SERVICE! Danke

  • Nige

    Hi Remo,

    I have admired your work and comments on the concrete5 site which I am now getting into.

    I am following your tutorial for creating a theme and it looks great.

    One question I have: When I created my html file from photoshop I sliced up my psd and saved for web with html and css.

    I got something similar to yours but also a table at the top. I would normally create my css in Dreamweaver and would create wrappers and outer containers etc. My css doesnt have these just divs for the slices.

    I notice that you have these in your sample css file. How did you define those outer wrappers and your css generally in photoshop?

    I could only think of doing it with slices and then exporting it. But somehow I dont think this is how you have done it.

    Could you shed some light on this please? As usual people like me are eternally grateful for people like you. I want to learn to write css by hand.

    Nige

  • Remo Laubacher

    Hi Nige,
    I’m creating my css and html files manually. No dreamweaver or anything like it… My process is therefore a bit different but also allows me to do whatever I want. I guess I can’t give you a great answer in this situation. If you want to follow my approach – learn css and get used to write it by hand (:
    Remo

  • Nige

    Thanks, I figured that. But I can read the files so I guess its not too much to learn how to write them. Im working on it!

    I am using your tutorials though, theyÔÇÖre very good.

    Thanks again.

    Nige

  • ukwebguy

    This is good work and very much appreciated – I’ve tried to work through several other tutorials and still been left confused at the end. Your explanation is clear and easy to understand – makes me wonder why the folks over at Concrete haven’t written something like this.

    Keep up the good work- and thanks again.

    ukwebguy

  • Pablo Molina

    Hello: installed the menu in a template I customized, and worked right away for the first level menu; but, when adding pages to the second level menu, pages do not display in menu. I think issue is related to an area limitation, but could not find the problem.

    Please advice. Thanks.

    Dinamicor

  • Remo Laubacher

    I’m not sure about which menu you talk. This tutorial is about creating a theme!

    If you don’t see all pages in your autonav block it’s usually because of it’s parameters.. Try selected “All” pages”, there are just three drop down box you have to play around with.

    Areas usually don’t have a limitation. You can restrict the number of blocks per area but you only need one for a navigation (autonav)..

  • Pablo Molina

    Hello Remo:

    Post feature not working in your blog http://www.codeblog.ch/2009/04/concrete5-drop-down-menu/ so I need to post this here.

    Menu in vertical form working fine; but a GAP present exclusive in IE7, when using second and third level. IE7 bug, I guess.

    Please look up http://www.phplistguru.com/concrete/ and advice. Thanks

    Below the code:

    Inicio
    Qui├â┬ęnes somos<!–

    Nuestro origen<!–

    Que hacemos
    Nuestra visión
    Nuestra misión


    Como somos


    Nuestra visión
    Donde estamos
    A dónde vamos
    Contacto

  • Pablo

    Hello Remo:

    Talking about the menu that comes with template. It works fine, but has a bug only in IE7.

    When using second level, it creates a space (more than a space it is a line) underneath the upper link. See in this site (between 2d and 3th in IE7): http://www.phplistguru.com/concrete/

    Any hack for this bug? Thanks

  • Paul

    This is a great tutorial. I created my template right away.

    The autonav installation (in this other great tutorial http://www.codeblog.ch/2009/04/concrete5-drop-down-menu/) works and looks beautiful; only a bug in IE7, and only 7, not 6 nor 8. Not a problem with other browsers.

    There is a space, actually a line, which apperas between the 2nd and 3th menus when using 2nd level nav. Here the site http://www.phplistguru.com/concrete/

    Any one knows a IE7 hack for this. Thanks

  • Paul

    Thanks Remo: now you can remove this and prior post.

    I found the problem; a float:left instruction in menu li was missing, and that caused the bug.

  • Geoff B

    Hi Remo,

    Thanks for this tutorial! Is it available in a “Printer Friendly” format?

  • alex

    Thank you for this great tutorial, Remo – it really helped a lot. I have a question to page types – i’ve found following lines in the documentation:
    “Since every page type can map to a specific template file in a chosen theme, it’s easy to see page types as primarely form factors. Left side bar vs. right side bar. The only difference between these page types is the positioning of the DIV’s in the template files.”

    How exactly can i map different page types to template files?

  • Andrew Flatters

    For some reason not sure why my CSS wouldn’t connect with many tries later having exactly the same code as in the tutorial I worked out because my theme has spaces or capitals it won’t load the CSS file as was “Raywell Park” changed to “rpark” and all works now, anyone tell me a reason for this or shall I just accept this and move on ­čśÇ

  • Remo Laubacher

    I haven’t tried that and I’d never recommend to use spaces for something like this, whether it be an add-on or a theme. If I find some time I’m going to check but I’d just accept this anyways and keep avoiding spaces ­čśë

  • Mike

    Wow. Thank you,

    This tutorial is literally the be-all-end-all of concrete 5 tutorials. you described exactly how to create a theme in as little as 6 steps. thanks to you, struggling with CMS is a thing of the past, and concrete5 is my new best friend.

  • c5enthusiast

    awesome tutuorial !!! the explanation was simple and clear… looking forward to more tutorials from you..

  • Steffi

    Das ist echt ein gutes Tutorial.

    Leider habe ich das Problem (Version 5.6.0.2), dass ich zwar “Add To Content” habe, wenn ich aber auf der Website darauf klicke erscheint nicht das Men├╝ “Add Block” etc.
    Hat jemand eine Idee woran es liegen kann?

  • Remo Laubacher

    Danke Steffi! Vergiss aber bitte nicht, dass dieses Tutorial auch schon ein paar Jahr auf dem Buckel hat..
    Ich nehme an es passiert ├╝berhaupt nichts bei einem Klick auf “Add To Content”? Kennst du dich mit Firebug & Co aus? Gibt’s irgendwo ein JavaScript Fehler?

  • Steffi

    Danke f├╝r die schnelle Antwort.

    Mittlerweile funktioniert es, nachdem ich typography.css leer ├╝bernommen habe.

  • Rumpel

    Hallo Laubi

    Sehr gute Anleitung!

    Hab allerdings zwei Probleme:

    – Gr├Âsseres: Habe einen ganz neuen Install von Concrete 5.6.2.1 und im wesentlichen nichts anderes gemacht als das codeblog.zip heruntergeladen und das Theme installiert. Die Site funktioniert aber ich kann mich nicht mehr einloggen! Selbst index.php?login funktioniert hier nicht, was mir in einem ├Ąhnlichen Fall schon mal rausgeholfen hat. Kann das Theme so auch nicht mehr deaktiveren. Was mache ich falsch?

    – Kleineres: auf Seite 5 kommen wieder lauter Fehler (wurde auch schon am 23 Juni 2009 von marco gemeldet und von dir sogleich gefixt). Seither ist wohl wieder WordPress upgedatet worden…

    Gr├╝sse,
    Rumpel

  • Remo Laubacher

    Hi Rumpel! Das Tutorial ist inzwischen ziemlich alt – einiges hat sich inzwischen ge├Ąndert. Allerdings kann ich das von dir beschriebene Problem nicht reproduzieren, einloggen geht ohne Probleme. Ist es m├Âglich, dass du in site_theme_paths.php gewisse Eintr├Ąge gemacht hast? Kannst du die mal tempor├Ąr entfernen?

  • Rumpel

    Hallo Laubi

    Danke f├╝r die schnelle Antwort.

    Nein habe wirklich nichts ge├Ąndert (schon gar nicht in site_theme_paths.php). Habe DB und ganzen concrete/… -Pfad komplett gel├Âscht und alles komplett neu installiert und dann nur codeblog.zip heruntergeladen und das Theme installiert und aktiviert. Der Effekt war dann so, dass beim Aufruf von …/index.php/login einfach die Seite neu geladen wurde aber kein Admin/Edit-Bar erschien. Ich habe auch keine Fehlermeldungen gesehen (weder im Dashboard noch in der Javascript-Console noch im Apache-Log).

    Inzwischen habe ich das Problem allerdings soweit umgehen k├Ânnen, dass ich ein anderes Template ├╝ber den Ordner concrete/themes/codeblog kopiert habe. Das hat mich dann wieder in den Edit/Admin-Mode reingelassen und ich bin zur├╝ck im Spiel!

    Gr├╝sse,
    Rumpel

  • Kelly

    I’m made a template using w3.css but when I installed my theme, the rest of concrete is distorted. I can’t even access my nav.

  • Remo Laubacher

    That’s a problem you have with an in-site editing concept like concrete5 uses. You have to wrap your CSS styles. I’d always recommend to use a pre-processor like LESS, SCSS to do this!
    Check these pages for a slightly longer explanation of the issue
    http://documentation.concrete5.org/developers/designing-for-concrete5/building-a-concrete5-theme/converting-an-html-template-to-a-concrete5-theme
    http://documentation.concrete5.org/developers/designing-for-concrete5/building-a-concrete5-theme/common-pitfalls

  • Leave a Reply