Template in PSD und in Contao umsetzen - wie fang ich an?

[isarc]

Hallo,

ich habe grundlegend Contao installiert und nutze das Standard Template.

Ich habe zusätzlich ein neues Template in Photoshop entworfen. Nun stellt sich die Frage, wie ich dieses in Contao umsetze.

Ich habe bisher noch kein Tutorial gefunden. Vielleicht kann man mir jemand einen Tip geben.

Vielen Dank!

Andi

[InitArt]

Allem voran solltest du dir CSS anschauen, damit bestimmst du am Ende das komplette Design. Gegebenenfalls müssen Elemente aus der PSD welche nicht in CSS umgesetzt werden können in Form von Bildern eingebunden werden. Diese kannst du einfach ausschneiden oder das "Slice"-Tool von Photoshop verwenden - zu letzterem kann ich allerdings nicht viel sagen da ich es nicht verwende.

Explizit für Contao gibt es hier auch Bücher, ich selbst habe sie nicht gelesen aber sie scheinen einen guten Ruf zu genießen:
http://contaobuch.de/

[isarc]

Hallo

vielen Dank.

Mir geht es hauptsächlich darum, wie ich die einzelnen Module einbinde (Header, nav, usw..)
So das diese dann im Backend zum pflegen sind..

Mein PSD Template kann ich auf alle Fälle in CSS komplett umsetzen.

Wie nun die Integration in Contao stattfindet ist die Frage: )

Danke..

[Doro]

unter Themes » Seitenlayouts
legst Du fest wie Du Deine Aufteilung Header, Footer und Spalten anlegst,
dort kannst Du dann auch bestimmen ob Du das Contao-CSS-Framework nutzt, kannst deine vorher angelegten CSS einbinden

schau mal hier rein http://de.contaowiki.org/Die_erste_Webseite
Gruß Doro

[css-umsetzung]

Ich finde, der beste weg wäre, bei den ersten Umsetzungen,
dass du erst das Grundgerüst machst, body/wrapper breite schriftformatierung usw.

Dann arbeitest du dich langsam vom header zum footer, also beispielsweise das modul der navigation einbinden, im quellcode schauen welche Klassen benutzt werden, navigation dann mit den Klassen die du dort siehst, stylen.

Es macht keinen Sinn, das layout erst zu erstellen und dann einzupflegen, da du die klassen ja nicht kennst.

Du wirst schnell merken, das da ein wenig system drin steckt

mod_navigation, mod_breadcrumb, ce_list, ce_table, ce_text..... also recht leicht zu merken.

[isarc]

Hallo

erstmal vielen Dank für Ihre Tips.

Habe noch eine letzte Frage: Ich habe bereits ein Template komplett in Bootstrap umgesetzt.

Aber ich denke, das wir mir relativ wenig helfen, da ja die ID´s und class´s anders lauten?

Oder lieg ich falsch?


Muss ich jetzt alle nach Contao umbennen ?

[css-umsetzung]

ja, ist besser als zu versuchen, contao mit deinen klassen Arbeiten zu lassen.

für Bootstrap gibt es aber für Contao einige sehr Sinnvolle erweiterungen.
Ich nutze eine, die mit subcolumns zusammen arbeitet und recht leicht zu bedienen ist.