HTML/CSS und Contao (CSS Zengarden)

**TheTom** · 25.11.2011, 14:48

Hallo!

Ich bin überzeugter Anhänger von Designs (HTML) mit CSS wie in CSS Zengarden (http://www.csszengarden.com/) beschrieben und arbeite mich gerade mit dem Buch "Websites erstellen mit Contao" von Peter Müller in die Thematik CMS und Contao ein.
Bei meinen bisherigen Projekten (statische XHTML-Sites) habe ich immer wieder mit Wrappern und Extradivs (innerhalb und außerhalb des Content-Containers), absoluter und relativer Positionierung sowie floats gearbeitet, um bestimmte Design-Effekte, Bildpositionierungen oder Hintergründe zu ermöglichen. Beispielsweise ein Verlauf oder Abschlussbild, welcher/s immer am unteren Bildschirmende erscheint (egal ob das Fenster vergrößert oder verkleinert wird). Ganz nach den "Lehren" des CSS Zengarden. Ist eine solche Design-Arbeitsweise auch mit Contao möglich? Wie weit lassen sich flexible Layouts (Länge von verschiedenen Inhaltselementen je nach Schriftgröße) mit Contao umsetzen? Muss ich hierzu ein eigenes Template erstellen? Wenn ja, wie gehe ich hier am besten vor?

Ich weiß, viele Neulingsfragen ... Aber das Problem ist, dass ich mit der Einarbeitung in Contao auch schon versuche, ein Kundenprojekt umzusetzen.

MfG, Thomas

**wiese** · 25.11.2011, 15:02

Ich benutze das Contao Framework gar nicht, sondern arbeite mit http://www.inuitcss.com oder http://foundation.zurb.com/.

Du kannst eigentlich alles anpassen, was in Contao passiert.

Ich weiß jetzt gar nicht genau, was deine Frage ist. Hast du dir Contao schon installiert und dich mal in den Templates / CSS umgeschaut?

csszengarden fand ich früher auch recht interessant, wird aber gar nicht mehr aktualisiert oder?

**psren** · 25.11.2011, 17:11

Mit Contao ist eigendlich jedes Design möglich. Das HTML lässt sich über Templates anpassen und wer CSS kann, der hat dann gute Karten :-D

**TheTom** · 28.11.2011, 07:34

Danke für die Antworten - meine Frage ist, was mit CSS möglich ist (was mittlerweile ja schon beantwortet wurde: ALLES), wie weit eigene Layoutbereiche nutzbar sind und ab wann ich direkt ins Template eingreifen muss. Oder ist es am sinnvollsten, wenn ich lokal einmal das HTML-Grundgerüst der Site baue und dann die Contao-Template-Inhalte integriere, als Template speichere und per internem CSS style?

Contao ist bereits installiert und ich habe schon ein wenig mir dem integrierten CSS-Framework (Formularbasierend) gearbeitet/herumprobiert, mir aber ziemlich schnell eine CSS-Erweiterung (rein Text basierend) integriert. Mit der Bearbeitung von Tempates habe ich noch keine Erfahrungen gemacht, da ich nicht weiß, wie "mächtig" eigene Layoutbereiche sind - oder ich gleich das Template bearbeiten soll.

MfG, Thomas

***hofff*** · 28.11.2011, 07:46

Hallo,

theoretisch brauchst du fast keine Templateanpassungen machen. In 99% der Fälle reicht ein überlegtes Anlegen der Inhalte in Contao --> Nutzung von Modulen - Artikeln - Inhaltselememten

Ich würde auch nicht erst ein html schreiben mit dem CSS dazu und es dann in Contao integrieren, das bringt viele Nachteile mit sich.

Ich arbeite stets nach folgendem Ablauf: Inhalte des Designs in Contao einpflegen, CSS schreiben und CSS-Klassen in Seiten, Modulen, Artikeln und Inhaltselementen anpassen. Nur im Notfall würde ich Templates anpassen, aber das wird gerade am Anfang schwierig, jedoch mit der Zeit unproblematisch! ;-)

fg
nicky

von meinem iPad mit Tapatalk gesendet.

**Thomas** · 28.11.2011, 08:05

Hallo, Thomas!

Erstmal herzlich Willkommen bei Contao.

So langsam wird es hier voll, mit diesem Vornamen.

Ich lasse die Aussage von hoff mal nicht ganz so stehen!

Ich nutze zu 98% YAML, Du siehst also, man kann unter Contao alle Fassetten verwenden.

Die Aussage von hoff ist in sofern völlig ok, solange man keine komplexen Abläufe integrieren muss, die oftmals einen Eingriff in die Templates erfordern.
Für viele Scenarien gibt es Erweiterungen oder man greift auf kommerzielle Angebote zurück, immer in Abhängigkeit der umzusetzenden Seite. Man kann sich auch eigene Templates oder Erweiterungen schreiben. Eben diese Flexibilität macht Contao aus und unterscheidet sich oft von anderen Systemen.

Welches CSS-Framework Du dabei verwendest ist Dir überlassen.

Ich mache es hin und wieder auch so, dass ich mir eine HTML-Seite erstelle und diese dann portiere. So gefährlich, wie beschrieben, ist das auch nicht.
Natürlich, am Anfang steht immer das Kennenlernen des Systems und der Philosophie, die dahinter steckt. Aber Du wirst es ganz schnell raus haben! Peters Buch ist da eine große Hilfe und Du findest damit einen gelungenen Einstieg.

Ich wünsche Dir jedenfalls viel Spaß und Freude an Contao.

Auch diese Community ist nicht zu verachten, mit all den freiwilligen Helfern, die Du zu jeder Tages und Nachtzeit behelligen kannst.

**TheTom** · 28.11.2011, 15:03

So, nachdem ich mich den ganzen Tag reingehängt habe, ist das Grundgerüst so wie ich es haben will. Bin eigentlich wie vorher geschrieben vorgegangen: HTML und CSS vorher geschrieben und dann integriert. Zusätzlich habe ich das Standard-Template und meine HTML-Datei kombiniert. Und siehe da, es funktioniert. Also mit Kenntnissen in HTML, CSS und PHP kommt man ja weiter.

@ Thomas: Nachdem in meinem Team mit 4 Personen der Name "Thomas" 3x vorkommt, ist alles möglich...
Was die Bücher betrifft ist neben dem Buch von Peter Müller auch das Buch "Mit Contao Webseiten erfolgreich gestalten" hinzugekommen. :-)

Danke für eure Einträge!

**pmmueller** · 28.11.2011, 19:39

Hallo TheTom,

schön, dass du vorankommst, und deine Fragen sind ja weiter oben eigentlich schon beantwortet, aber hier trotzdem noch ein paar wohlgemeinte Anmerkungen.

Zitat von TheTom

Ich bin überzeugter Anhänger von Designs (HTML) mit CSS wie in CSS Zengarden ... Ganz nach den "Lehren" des CSS Zengarden.

Grins. Gott sei Dank hast du "Lehren" in Anführungsstriche gesetzt, denn der Zengarden ist ja nun nicht so sehr zum Lernen oder gar als religiöse Gemeinschaft gedacht. Ursprünglich war es nur ein Showcase, wie man mit einem vorgegebenen HTML per CSS sehr verschiedene Websites gestalten kann, denn das war so mit den damals noch weit verbreiteten tabellenbasierten Layouts nicht möglich.

Im Laufe der Zeit ist dieser ursprünglich zentrale Punkt etwas aus dem Blickfeld geraten und der Zengarden mutierte immer mehr zu einer Photoshop-Image-Replacement-Orgie, in dem es mehr und mehr um das möglichst Jaw-Dropping-Grafikdesign ging als um die Idee 1-HTML mit x-CSS-Designs.

Wie weiter oben erwähnt kann man mit Contao alles machen. Auch eine "Design-Arbeitsweise", wie du es nennst, und auch flexible Layouts (em-basiert, wenn ich dich richtig verstehe). Aber du hast dabei eigentlich zwei Baustellen: 1. das HTML und 2. das CSS.

1. HTML
Contao erzeugt das HTML mit Hilfe der Templates. Das Wort bedeutet in Contao viele verschiedene Dinge, aber man kann es umschreiben, als "etwas das eine HTML-Ausgabe im Quelltext erzeugt". Das Seitentemplate fe_page ist das wichtigste Template, da es die Grundstruktur erzeugt, und innerhalb dieser Grundstruktur werden per Seitenlayout und anderen Mechanismen diverse andere Modul- und Subtemplates platziert.

Die Versuchung, die HTML-Ausgabe (insbesondere Extra-DIVs und Klassennamen) an die eigenen Gewohnheiten und Bedürfnisse anzupassen ist anfangs relativ groß, aber spätestens beim nächsten Update bereut man jedes angepasste Template. Wie sagte xchs hier im Forum irgendwann: "Wer Templates bearbeitet bzw. ändert ist ab diesem Zeitpunkt selbst für diese verantwortlich".

Thomas Weitzel und ich haben auf unserer CK2011-Session "Best Practice mit Contao" aus dieser Einsicht den Satz abgeleitet: "Templates ändern? Nur wenn es wirklich wirklich sein muss". Oder so ähnlich.

Gerade beim Lernen von Contao ist man besser dran, wenn man die Aufgabenstellung so sieht wie ursprünglich beim Zen Garden: "Nimm das vorgegebene HTML und schreibe dazu das passende CSS". DAS ist meiner Ansicht nach die Kernaussage vom Zen Garden.

2. CSS
Ich konnte als überzeugter CSS-Coder weder mit dem Contao-CSS-Framework noch mit dem internen Editor etwas anfangen. Also habe ich anfangs beides links liegen lassen und little-boxes.de mit dem mir vertrauten YAML-CSS-Framework und einem externen Editor gebaut. Dazu ist unter anderem eine Anpassung der fe_page an die Namenskonventionen von YAML nötig, aber es entsprach meiner Gewohnheit. Viel später habe ich dann begriffen, dass Gewohnheit und Bedürfnis zwei verschiedene Dinge sein können. Heute würde ich das ziemlich sicher anders machen, und inzwischen nutze ich sogar den internen CSS-Editor von Contao.

Fazit:
Versuche dein Ziel anfangs mit möglichst wenig Änderungen an den gegebenen Strukturen zu erreichen. Contao lässt dir alle Freiheiten, aber versuche, zuerst die "Best Practices" zu verstehen, und passe diese dann falls nötig an die eigenen Bedürfnisse an.

Oder etwas zen-mäßig ausgedrückt: "Der Weg ist das Ziel", zumindest beim Lernen, denn sonst verändert sich der Satz sehr schnell zu "Das Ziel ist im Weg".

***hofff*** · 29.11.2011, 06:59

@pmmueller

Like it! :-)

von meinem iPad mit Tapatalk gesendet.

**TheTom** · 01.12.2011, 08:22

Nochmals danke für eure Hilfe - ich muss wirklich sagen, Contao ist ein super CMS. Wirklich übersichtlich und nach einer kurzen Einarbeitung leicht zu bearbeiten. Bis auf eine einzige, kleine Bearbeitung des Templates kann man alles mögliche per CSS gestalten. Ich bin wirklich begeistert!

Aber natürlich bleibt es als Anfänger nicht aus, dass es immer wieder irgendwo nicht ganz so funktioniert wie es eigentlich soll. Und so muss ich euch wieder mal mit zwei Fragen nerven... (und eure Geduld mit strapazieren)

1) Fett ist nicht Fett
Wenn ich in meinem Artikel per Button bzw. direkt im HTML-Code eine Schrift auf Fett setze, wird diese zwar im Quelltext mit formatiert, jedoch nicht fett dargestellt... Der Absatz ist mit in den Stylesheets formatiert, font-weight mal mit normal angegeben, mal gar keine Angabe. Es wird einfach nicht fett dargestellt. Zur Sicherheit habe ich gleich mal ein HTML-Dokument mit Blindtext erstellt und im gleichen Browser getestet - hier wird's richtig dargestellt.

2) Schriftgrößen-Änderung durch Besucher
Im Forum habe ich den EfA-Fontsizer (Thread von Nina) gefunden. Ist diese Vorgehensweise noch aktuell oder gibt es hier schon eine bessere Lösung/Erweiterung. Mir ist klar, dass die Schriftgröße in allen aktuellen Browsern selbst angepasst werden kann. Aber ich gehe davon aus, dass ein Teil der Zielgruppe keine Ahnung hat, wie das im Browser geht und so möchte ich auch eine Schriftvergrößerung direkt auf der Website anbieten.

MfG, Thomas

**psren** · 01.12.2011, 09:03

Zitat von TheTom

1) Fett ist nicht Fett
Wenn ich in meinem Artikel per Button bzw. direkt im HTML-Code eine Schrift auf Fett setze, wird diese zwar im Quelltext mit formatiert, jedoch nicht fett dargestellt...

Du musst dem Element Strong dann eben noch die Einstellungen Fett zuweisen.

***Nina*** · 02.12.2011, 10:31

Zitat von TheTom

2) Schriftgrößen-Änderung durch Besucher
Im Forum habe ich den EfA-Fontsizer (Thread von Nina) gefunden. Ist diese Vorgehensweise noch aktuell oder gibt es hier schon eine bessere Lösung/Erweiterung. Mir ist klar, dass die Schriftgröße in allen aktuellen Browsern selbst angepasst werden kann. Aber ich gehe davon aus, dass ein Teil der Zielgruppe keine Ahnung hat, wie das im Browser geht und so möchte ich auch eine Schriftvergrößerung direkt auf der Website anbieten.

Nein, der Fontsizer ist nicht mehr aktuell. Das Script ist imho schon mehrere Jahre alt und hat auch ein paar Ecken drin, die wohl nicht so toll sind bzw. sich wegen Cookie-Anweisungen leicht mit anderen Scripts in die Quere kommen können.

**Lego2013** · 05.02.2013, 15:51

Zitat von wiese

Ich benutze das Contao Framework gar nicht, sondern arbeite mit http://www.inuitcss.com oder http://foundation.zurb.com/.

Du kannst eigentlich alles anpassen, was in Contao passiert.

Ich weiß jetzt gar nicht genau, was deine Frage ist. Hast du dir Contao schon installiert und dich mal in den Templates / CSS umgeschaut?

csszengarden fand ich früher auch recht interessant, wird aber gar nicht mehr aktualisiert oder?

Interessant, auch wenn der Artikel schon etwas älter ist. Wie hast Du denn Foundation integriert? Ich tue mich da etwas schwer, weil ich Contao-Anfänger bin. Bei statischen Websites habe ich bisher mit Tools wie Sublime Text, Sass, Compass, Foundation 3, CodeKit, Git Repository etc. gearbeitet. Das geht im Prinzip ja auch mit Contao, aber wie gesagt: Das Framework.

Wäre toll, wenn Du mir Tipps geben kannst - gerne auch per Email.

Danke, Leo