CodeBlog.ch

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

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

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

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

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

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

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 😀

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.

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

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