Coding and more – Concrete5, Flex, JavaScript

Concrete5 Theme erstellen

Published on under Concrete5, PHP

Die Seitenelemente header und footer

Der Kopf von Concrete5 enthält ein paar Anweisungen die zwingend vorhanden sein müssen. Sicherheitshalber den Text bzw. die Datei jeweils kopieren.

header.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
 
<!-- Site Header Content //-->
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('main.css')?>";</style>
<style type="text/css" media="screen">@import "<?php echo $this->getStyleSheet('typography.css')?>";</style>
 
<?php
Loader::element('header_required');
?>
 
</head>
<body>

Diese Datei ist “Standard”, sie kann für weitere Projekte 1:1 kopiert werden, sofern keine zusätzlichen JavaScripts eingebunden werden müssen oder andere Anpassungen im Head Bereich der HTML Datei gewünscht sind.

  • Zeile 1 – dient wie bei default.php nur zum Schutz
  • Zeile 8,9 – stellt sicher, dass die CSS Dateien eingebunden werden
  • Zeile 11-13 – diese Zeilen werden benötigt, damit die Seite direkt im Browser bearbeitet werden kann. Diese Zeilen sind zwingend!

Der Fussbereich ist sogar noch einfacher:

footer.php

1
2
3
4
5
6
7

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
require(DIR_FILES_ELEMENTS_CORE . '/footer_required.php');
?>
 
</body>
</html>
  • Zeile 2 – wieder nur zum Schutz
  • Zeile 3 – einfügen, damit Concrete5 automatisch den Tracking Code aus dem Dashboard einfügen kann

Pages: 1 2 3 4 5 6

35 Responses to “Concrete5 Theme erstellen”

  • 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 :D

  • 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

    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?

    • Leave a Reply