CodeBlog.ch

Concrete5 Theme erstellen

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php
defined('C5_EXECUTE') or die(_("Access Denied."));
$this->inc('elements/header.php');
?>
<div id="outercontainer1">
<div id="outercontainer2">
<div id="container">
<div id="logo">
            <img src="<?php echo $this->getThemePath()?>/images/logo.png" alt="Logo"/></div>
<div id="picture"></div>
<div id="content">
<div id="column_1"></div>
<div id="column_2">
         	<?php
         	$menu = new Area('Menu');
         	$menu->setBlockLimit(1);
         	$menu->display($c);
         	?></div>
<div id="column_3">
         	<?php
         	$content = new Area('Content');
         	$content->display($c);
         	?></div>
<div style="clear:both;"></div>
</div>
</div>
</div>
</div>
<?php
$this->inc('elements/footer.php');
?>

34 Responses to 'Concrete5 Theme erstellen'

Subscribe to comments with RSS or TrackBack to 'Concrete5 Theme erstellen'.

1. Pritam said,
   
   

   on März 2nd, 2009 at 22:24:03

   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

2. Laubi said,
   
   

   on März 2nd, 2009 at 22:35:17

   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

3. Hi Laubi said,
   
   

   on März 3rd, 2009 at 09:28:11

   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

4. Pritam said,
   
   

   on März 3rd, 2009 at 09:45:09

   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

5. Laubi said,
   
   

   on März 3rd, 2009 at 09:56:32

   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!

6. Pritam said,
   
   

   on März 3rd, 2009 at 18:39:58

   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 !!

7. wonderul! said,
   
   

   on April 7th, 2009 at 08:39:08

   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?

8. CodeBlog.ch » Concrete5 - Drop Down Menü Navigation said,
   
   

   on April 11th, 2009 at 09:28:46

   [...] Tutorial werde ich aber das Theme verwenden, welches ich für ein früheres Tutorial erstellt habe: http://www.codeblog.ch/de/2009/01/concrete5-theme-erstellen/ Wichtig ist lediglich, dass das Theme genügend Platz hat, um eine Drop Down Navigation [...]

9. CodeBlog.ch » Concrete5 - CSS features [typograhy.css, customize themes] said,
   
   

   on Mai 3rd, 2009 at 12:45:03

   [...] If you ever built your own Concrete5 theme you might have wondered why there are usually two css files – main.css and typography.css. In this tutorial I’ll show you some possibilities of typography.css. You should have basic knowledge about building a theme for Concrete5. Read this tutorial in case you never built one before: http://www.codeblog.ch/de/2009/01/concrete5-theme-erstellen/ [...]

10. Felix said,
    
    

    on Juni 1st, 2009 at 22:28:38

    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 {}
    …

11. Felix said,
    
    

    on Juni 1st, 2009 at 22:37:47

    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>

12. Bill said,
    
    

    on Juni 12th, 2009 at 02:45:01

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

13. marco said,
    
    

    on Juni 23rd, 2009 at 16:38:20

    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!

14. Remo Laubacher said,
    
    

    on Juni 23rd, 2009 at 16:43:13

    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

15. marco said,
    
    

    on Juni 23rd, 2009 at 16:45:21

    Danke das nenn ich mal FIXER SERVICE! Danke

16. Nige said,
    
    

    on Juli 15th, 2009 at 10:21:36

    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

17. Remo Laubacher said,
    
    

    on Juli 15th, 2009 at 16:14:17

    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

18. Nige said,
    
    

    on Juli 15th, 2009 at 21:45:12

    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

19. In choosing a CMS: 40+ Great CMS Theming Tutorials | Noupe said,
    
    

    on Juli 21st, 2009 at 01:35:05

    [...] Concrete5—Create your own theme [...]

20. Wordpress Blog Services - In choosing a CMS: 40+ Great CMS Theming Tutorials said,
    
    

    on Juli 21st, 2009 at 14:02:52

    [...] Concrete5—Create your own theme [...]

21. In choosing a CMS: 40+ Great CMS Theming Tutorials | SeanBurdick said,
    
    

    on Juli 21st, 2009 at 14:14:14

    [...] Concrete5—Create your own theme [...]

22. In choosing a CMS: 40+ Great CMS Theming Tutorials - Programming Blog said,
    
    

    on Juli 22nd, 2009 at 00:13:40

    [...] Concrete5—Create your own theme [...]

23. MisrIT Reader (Beta) » Blog Archive » In choosing a CMS: 40+ Great CMS Theming Tutorials said,
    
    

    on Juli 30th, 2009 at 07:16:53

    [...] Concrete5—Create your ow&#110&#32&#116heme [...]

24. Concrete5 | CMS网 said,
    
    

    on Juli 30th, 2009 at 11:49:54

    [...] Concrete5主题制作教程 Tagged with: 文章索引模板 [...]

25. AMB Album » In choosing a CMS: 40+ Great CMS Theming Tutorials said,
    
    

    on Oktober 15th, 2009 at 18:42:14

    [...] Concrete5—Create your own theme [...]

26. ukwebguy said,
    
    

    on Oktober 31st, 2009 at 19:23:35

    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

27. Pablo Molina said,
    
    

    on November 6th, 2009 at 22:12:57

    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

28. Remo Laubacher said,
    
    

    on November 7th, 2009 at 11:00:50

    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)..

29. Pablo Molina said,
    
    

    on Dezember 3rd, 2009 at 01:15:30

    Hello Remo:

    Post feature not working in your blog http://www.codeblog.ch/de/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