CodeBlog.ch

Concrete5 – Create your own theme

Thumbnail, Description

We already created to most important files, now we just make sure that our theme looks good in the concrete5 dashboard. We open our layout in photoshop and create a little picture with the size of 120×100 pixels and save it as thumbnail.png in our theme folder.

Now, we create a file called description. On the first line, we’ll put the title of our theme and in the second line, the description.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45

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


Seguir leyendo: 1, 2, 3, 4, 5, 6

48 Comments

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 😀

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

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

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

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!

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

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?

[…] 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/2009/01/concrete5-theme-erstellen/ […]

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

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>

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!

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

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

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

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

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

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

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

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

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

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.

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?

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 😀

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 😉

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.

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

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?

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?

Danke für die schnelle Antwort.

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

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

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?

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

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.

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

Your email address will not be published. Required fields are marked *



CodeBlog.ch, 2024. Theme Material for Coders