CSS-Dateien auslagern? (Anleitung in P. Müllers Buch „Websites erstellen mit Contao“)

**Typogold** · 19.12.2011, 14:26

Hallo Forum,

ich versuche die Anleitung aus dem Buch von Peter Müller (Websites erstellen mit Contao Auflage 1 (!)) nachzuvollziehen – jedoch übertragen auf ein schon bestehendes Webprojekt (mit Contao 2.10). Da ich dort nicht weiterkam, habe ich mir lokal eine zweite Installation von Contao 2.10 angelegt und arbeite nun parallel mit dem Buch und den Beispieldateien zu Auflage 2 (Download auf der entsprechenden Website).

Ich versuche die Auslagerung der CSS-Files zu erreichen, damit ich diese mit meinem Editor bearbeiten kann, stolpere aber über Kapitel 7.7.1: Dort wird geschrieben, dass man sich die fe_page.tpl (fe_page.html5 seit Version 2.10) als Kopie anlegen soll IN EINEN Unterordner von /templates (/templates/blaues_theme).

In den Beispieldateien des Buches (Auflage 2) finde ich aber in KEINEM Kapitelordner eine Kopie der fe_page und auch nach Import der Datei k08_anfang_Websites_erstellen_mit_Contao.sql habe ich KEINE Kopie im Ordner templates/blaues_theme?!

Das Konstrukt mit @import in der zentrale.css und der Anpassung der fe_page Kopie gelingt mir also nicht!

Ich bin den Erklärungen zur neuen Auflage 2 durchgegangen (http://goo.gl/xud4n) , aber dort steht, es würde sich am grundsätzlichen Prozedere in Kapitel 7 nichts ändern. Ich hätte am Ende germe meine CSS-Dateien so abgelegt, dass ich die extern bearbeiten kann und intern angezeigt bekomme...

Was läuft das also falsch? Muss ich mich denn z.B. ganz genau an die Ordner /tl_files/themes und /templates/blaues_theme halten?

Danke Euch vielmals und beste Grüße
Typogold

**pmmueller** · 19.12.2011, 14:35

Hast du folgenden Beitrag gelesen?

»Wenn externe Stylesheets in fe_page.tpl nicht funktionieren...«
http://websites-erstellen-mit-contao...tionieren.html

Falls ja:

In Contao 2.10 solltest du im Seitenlayout das Ausgabeformat "XHTML Strict oder Transitional" auswählen (siehe Artikel auf der Website zum Buch).
Das Template heißt dann fe_page.xhtml.
Kopien von Templates legt man immer im Backend-Modul Layout-Templates an (siehe Kapitel 6.7.3, Seite 150ff.)

Ich würde externe Stylesheets inzwischen aber eher im Seitenlayout einbinden, und zwar über das Feld "Zusätzliche <head>-Tags". Das hat den Vorteil, dass du beim nächsten Contao-Update die fe_page nicht anpassen musst (jedenfalls, solange du dort keine anderen Änderungen vorgenommen hast).

EDIT
Du musst dich nicht genau an die Pfadangaben aus dem Buch halten, aber bei geänderten Pfadangaben muss man immer mitdenken

**pmmueller** · 19.12.2011, 14:38

Zitat von Typogold

Ich hätte am Ende germe meine CSS-Dateien so abgelegt, dass ich die extern bearbeiten kann und intern angezeigt bekomme...

Extern bearbeiten und intern angezeigen?

Nur um Verwirrungen vorzubeugen:
Externe Stylesheets kannst du höchstens im BE-Modul Dateiverwaltung bearbeiten, aber nicht im BE-Modul Themes - Stylesheets. Dann wären es ja keine externen Stylesheets mehr...

**Typogold** · 19.12.2011, 15:53

Ich werde immer verwirrter...

Zitat von pmmueller

Hast du folgenden Beitrag gelesen?

»Wenn externe Stylesheets in fe_page.tpl nicht funktionieren...«
http://websites-erstellen-mit-contao...tionieren.html

Ja, habe ich. Aktuell scheine ich die gleichen Probleme zu haben, wie der letzte Antwortende: Die Einbindung der 3 CSS-Dateien per @import in der zentrale.css gelingt nicht. Im Quellcode der Seite erscheinen die Aufrufe, die Dateien sind also da, aber die Seite wird nicht entsprechend formatiert.

Zitat von pmmueller

EDIT
Du musst dich nicht genau an die Pfadangaben aus dem Buch halten, aber bei geänderten Pfadangaben muss man immer mitdenken

Ich hab mitgedacht (protestier ;-)) aber doch den Verdacht, dass die Pfadangaben immer noch nicht korrekt sind:

Ich habe aktuell einen Ordner (root)/tl_files/themes/themename/css/zentrale.css.
Zusätzlich habe ich den Ordner (root)/templates/templatename/fe_page_2.xhtml (die _2, damit ich die fe_page nicht verwechsel mit der Original fe_page).

In der geänderten fe_page_2 steht nach Aufruf der index.php:

...


<link type="text/css" rel="stylesheet" href="system/scripts/framework-61ec059b-1ce36f7b.css" />

<link type="text/css" rel="stylesheet" href="system/scripts/contao-07bb8fe5.css" />

<link type="text/css" rel="stylesheet" href="system/scripts/mediaboxAdvBlack21-270e655b.css" />

<link type="text/css" rel="stylesheet" href="system/scripts/tinymce-241b59a0.css" />
<link href="tl_files/themes/themename/css/zentrale.css" rel="stylesheets" type="text/css" />

<script type="text/javascript" src="system/scripts/mootools-core-0026891b.js"></script>

<script type="text/javascript" src="system/scripts/mootools-more-b2ed9e63.js"></script>

...

Anscheinend überschreiben sich da aktuell interne und externe css-datei oder aber der Aufruf der externen wird ignoriert? Erlärung vielleicht: Ich hatte bis heute noch ein internes css-file eingebunden, dann dieses aber als externe Datei einbinden wollen und daher alle Stylesheets im Backend gelöscht.

Die Pfadangaben im Backendmodul THEME habe ich so gesetzt:

Konfiguration:
Ordner -> Dateisystem/themes
Template -> Dateisystem/Templatename
Bildschirmfoto -> Dateisystem/themes/themename/images/screenshot.png

Da das Bildschirmfoto richtig angezeigt wird: Könnte es sein, dass Contao intern die Änderungen an den Pfaden/Dateien noch nicht kapiert hat? Ich habe alle Caches und Sessionfiles gelöscht (als Admin angemeldet im backend)?!

Was mache ich falsch?

Danke für Deine Hilfe und Grüße
Typogold

**pmmueller** · 19.12.2011, 16:14

Wenn du das SeitenTEMPLATE in fe_page2 umbenannt hast, hast du dann auch im SeitenLAYOUT das neue Seitentemplate ausgewählt?

Und ist im "System - Einstellungen" im Bereich "Globale Einstellungen" ein Häkchen bei "Markup komprimieren"? Das nimm dann man raus.

Hast du die Einbindung von zentrale.css im Seitenlayout bei "Zusätzliche Head-Tags" probiert?

**pmmueller** · 19.12.2011, 16:23

Zitat von Typogold

Ich habe aktuell einen Ordner (root)/tl_files/themes/themename/css/zentrale.css.
Zusätzlich habe ich den Ordner (root)/templates/templatename/fe_page_2.xhtml (die _2, damit ich die fe_page nicht verwechsel mit der Original fe_page).

Was meinst du denn mit "/templates/templatename/"?

Laut Buch heißen die beiden Ordner
tl_files/themes/blaues_theme/
templates/blaues_theme/

Es besteht eigentlich kein Grund, das Seitentemplate fe_page_2.xhtml zu nennen, denn man kann die beiden Seitentemplates nicht wirklich verwechseln. Ich würde dir empfehlen, den Originalnamen zu lassen, denn dann hast du beim nächsten Update weniger Probleme.

**pmmueller** · 19.12.2011, 16:27

Zitat von Typogold

Ja, habe ich. Aktuell scheine ich die gleichen Probleme zu haben, wie der letzte Antwortende: Die Einbindung der 3 CSS-Dateien per @import in der zentrale.css gelingt nicht. Im Quellcode der Seite erscheinen die Aufrufe, die Dateien sind also da, aber die Seite wird nicht entsprechend formatiert.

Bei dem "letzten Antwortenden" auf der Seite lag es wie in meinem Kommentar vermutet an dem @media um das @import.

**Typogold** · 19.12.2011, 16:39

Zitat von pmmueller

Wenn du das SeitenTEMPLATE in fe_page2 umbenannt hast, hast du dann auch im SeitenLAYOUT das neue Seitentemplate ausgewählt?

-> Ja! Ich habe die Kopie fe_page in fe_page_2 umbenannt um sicherzustellen, dass ich auch tatsächlich die Kopie nehme.

Und ist im "System - Einstellungen" im Bereich "Globale Einstellungen" ein Häkchen bei "Markup komprimieren"? Das nimm dann man raus.

-> Ja, hatte ich auch nicht gesetzt.

Hast du die Einbindung von zentrale.css im Seitenlayout bei "Zusätzliche Head-Tags" probiert?

-> Ja, zeigt kein Wirkung.

Ich hab den Verdacht, dass Contao den Wechsel zu den externen css-sheets nicht kapiert, bzw. irgendwelche temporären Daten immer noch auf die nicht mehr vorhandenen internen Daten verweisen...?!

**Typogold** · 19.12.2011, 16:45

Zitat von pmmueller

Was meinst du denn mit "/templates/templatename/"?

Laut Buch heißen die beiden Ordner
tl_files/themes/blaues_theme/
templates/blaues_theme/

Es besteht eigentlich kein Grund, das Seitentemplate fe_page_2.xhtml zu nennen, denn man kann die beiden Seitentemplates nicht wirklich verwechseln. Ich würde dir empfehlen, den Originalnamen zu lassen, denn dann hast du beim nächsten Update weniger Probleme.

Im Buch heißen die Ordner wie oben, richtig. Ich versuche ja aber parallel an meinem eigenen Projekt die Stylesheets auszulagern. Dort entspricht „templatename“ meinem eigenen Namen (den ich hier nicht hinschreiben will).

Ich arbeite gerade parallel an zwei lokalen Installationen unter MAMP (meiner eigenen <-> der aus dem Buch), sorry, wenn meine Ausführungen verwirrt haben.

+++

Was mich etwas stutzig macht: In der Beispielinstallation aus dem Buch erscheinen 3 CSS Files unter theme, bei meiner nicht.
Ich muss das aber wohl mal konkreter machen mit Bildern?! Ich schreibe gleich nochmal.

**pmmueller** · 19.12.2011, 16:48

Wenn die zentrale.css auch in "Zusätzliche Head-Tags" keine Wirkung zeigt, gibt es ziemlich sicher entweder irgendwo eine falsche Pfadangabe oder vielleicht einen Syntaxfehler bei @import. Das war es bis jetzt fast immer...

Ich glaube ehrlich gesagt nicht, dass Contao den Wechsel nicht kapiert. "Daten bereinigen" hattest du doch gemacht?

Die Umbenennung des Templates ist mittelfristig keine gute Idee. Um zu prüfen, ob die Seitentemplatekopie fe_page.xhtml aus dem Ordner-mit-dem-Namen-den-du-hier-nicht-hinschreiben-möchtest benutzt wird, kannst du besser einfach kurz nach <body> irgendwas ins Template schreiben, <h1>Hallo</h1> oder ähnliches, speichern und dann das Frontend aktualisieren.

**pmmueller** · 19.12.2011, 16:49

Zitat von Typogold

Was mich etwas stutzig macht: In der Beispielinstallation aus dem Buch erscheinen 3 CSS Files unter theme, bei meiner nicht.
Ich muss das aber wohl mal konkreter machen mit Bildern?! Ich schreibe gleich nochmal.

Das deutet in Richtung "falsche Pfadangabe".

**Typogold** · 19.12.2011, 16:57

Hallo,

da ich mich vermutlich nicht korrekt ausdrücke, hier Bilder:

1.
MEINE lokale Installation (nach der Anleitung im Buch):

template
Screenshot_0 2011-12-19 um 17.45.07.png

css
Screenshot_0 2011-12-19 um 17.44.51.png
(müssten HIER nicht CSS-Dateien erscheinen?

konfiguration
Screenshot_0 2011-12-19 um 17.51.00.png

2.
Die lokale Installation MIT den Beispieldateien aus dem Buch (k08_css_extern)

template
Screenshot_0 2011-12-19 um 17.44.44.png

css
Screenshot_0 2011-12-19 um 17.44.30.png
(wie kamen diese CSS-Dateien zustande? Handelt es sich dabei um die in den vorangegangen Kapiteln im BACKEND angelegten Dateien?)

konfiguration
Screenshot_0 2011-12-19 um 17.51.31.png

3.
Ich weiß nicht mehr weiter....?! Habe ich ne Möglichkeit in Contao mein CSS-Chaos irgendwie zu "entwirren" und nochmal neu anzufangen?

**pmmueller** · 19.12.2011, 17:03

Ich bin gerade auf dem Sprung und habe den Rest des Tages auch keine Zeit mehr, aber deine Screenshots zeigen auf den ersten Blick für beide Installation unterschiedliche Dinge.

Wenn du mit externen Stylesheets arbeiten möchtest, dann ist alles was in "Themes - Stylesheets" steht völlig egal. Wenn da in der Beispielsite noch drei interne Stylesheets stehen, macht das nichts. Wichtig ist, ob diese internen Stylesheets im Seitenlayout angekreuzt sind. Wenn die Site mit externen Stylesheets gestaltet wird, kann man diese drei internen Stylesheets einfach löschen, und es ändert sich nichts.

Solange deine Stylesheets auch über "Zusätzliche Head-Tags" nicht aufgerufen werden bleibe ich bei der Vermutung, dass etwas an der Pfadangabe nicht stimmt.

Kann vielleicht sonst noch mal jemand die Screenshots genauer anschauen?

Ich kann wie gesagt erst frühestens morgen wieder.

**Typogold** · 19.12.2011, 17:06

Zitat von pmmueller

Wenn die zentrale.css auch in "Zusätzliche Head-Tags" keine Wirkung zeigt, gibt es ziemlich sicher entweder irgendwo eine falsche Pfadangabe oder vielleicht einen Syntaxfehler bei @import. Das war es bis jetzt fast immer...

Ich glaube ehrlich gesagt nicht, dass Contao den Wechsel nicht kapiert. "Daten bereinigen" hattest du doch gemacht?

Die Umbenennung des Templates ist mittelfristig keine gute Idee. Um zu prüfen, ob die Seitentemplatekopie fe_page.xhtml aus dem Ordner-mit-dem-Namen-den-du-hier-nicht-hinschreiben-möchtest benutzt wird, kannst du besser einfach kurz nach <body> irgendwas ins Template schreiben, <h1>Hallo</h1> oder ähnliches, speichern und dann das Frontend aktualisieren.

Versprochen, ich mache die Namensänderung am Template rückgängig! Wieso finde ich aber in den Beispieldateien aus dem Buch keine KOPIE dieser Datei? Vergessen? In der Anleitung wird doch gesagt: 4. Speichern Sie die Kopie im ZIELVERZEICHNIS templates/blaues_theme. Der Ordner is aba leer...

Hat die Kopie also überhaupt Relevanz?

**Typogold** · 19.12.2011, 17:11

Zitat von pmmueller

Solange deine Stylesheets auch über "Zusätzliche Head-Tags" nicht aufgerufen werden bleibe ich bei der Vermutung, dass etwas an der Pfadangabe nicht stimmt.

Ich geh das alles nochmal genau durch.
Danke vielmals für Deinen Einsatz!

Grüße
Typogold

**pmmueller** · 19.12.2011, 18:08

Zitat von Typogold

Versprochen, ich mache die Namensänderung am Template rückgängig! Wieso finde ich aber in den Beispieldateien aus dem Buch keine KOPIE dieser Datei?

In welchem Ordner guckst du denn?

Wenn du die das ERGEBNIS von Kapitel 7 prüfen willst, dann findest du das nicht in dem Ordner mit dem Namen k07/frontend_template_k07_anfang/.... Die Kapitel bauen aufeinander auf. Das Ergebnis von Kapitel 07 ist also der Anfang von Kapitel08. Da gibt's auch eine fe_page.tpl

Aber ich würde das Stylesheet wie gesagt sowieso nicht im Seitentemplate im Seitenlayout - Zusätzliche Head-Tags einbinden.

Viel Erfolg.

**Typogold** · 19.12.2011, 21:06

Hallo Herr Müller,

sicher kennen Sie Ihr Buch mittlerweile auswendig und das soll kein Vorwurf sein: In den Beispieldaten zur zweiten Auflage des Buches findet sich in Ordner k08_css_extern KEINE fe_page.xhtml. Erst im Ordner k09_navigation/frontend_template_k0904_ende. Aber auch diese zeigt nicht, wie man CSS-Files extern einbindet...?!

Screenshot_0 2011-12-19 um 21.56.13.png

Da ich mit meinem Problem überhaupt nicht weiterkomme, wüßte ich nur gerne, ob das Duplizieren der fe_page.xhtml überhaupt ein von Ihnen/der community gangbarer Weg ist?

Warum ich überhaupt versuche, das so zu lösen?
Ich baue gerade eine Site auf, in der es einen geschützten Mitgliederbereich gibt, der an wichtigen Stellen anders aussehen muss, als der öffentlich sichtbare, da dort breite Tabellen abgebildet werden sollen. Insofern suche ich nach einer Möglichkeit, meine CSS-Dateien extern sauber zu strukturieren. Intern ist es nämlich recht fummelig, die verschiedenen Layouts zu verwalten.

Vielleicht bin ich auch einfach nur zu *** gerade, immerhin versuche ich seit paar Stunden den Fehler zu finden... Ich mache daher für heute einfach Schluß.

Danke für Ihren Einsatz und Ihre Geduld
Typogold

***xchs*** · 19.12.2011, 21:25

Zitat von Typogold

Da ich mit meinem Problem überhaupt nicht weiterkomme, wüßte ich nur gerne, ob das Duplizieren der fe_page.xhtml überhaupt ein von Ihnen/der community gangbarer Weg ist?

Was pmmueller jetzt schon einige Male in diesem Thread versucht hat, Dir zu erklären: Du brauchst kein Duplikat des Seitentemplats "fe_page.xthml"! Sofern es im Backend-Modul "Templates" ein solches gibt, lösch' das einfach.

Um nun Dein externes Stylesheet einzubinden, machst Du folgendes:

Layout > Themes > Seitenlayout: Editiere Dein (Standard)Seitenlayout zur Bearbeitung
füge im Abschnitt "Experten-Einstellungen" im Feld "Zusätzliche <head>-Tags" das <link>-Element für Dein externes Stylesheet ein:
Code:
```
<link href="tl_files/themes/themename/css/zentrale.css" rel="stylesheets" type="text/css" />
```
(der Unterordner "themename" bezeichnet dabei jenen Ordner, der hier nicht genannt werden soll)

**Typogold** · 20.12.2011, 07:07

Zitat von xchs

Was pmmueller jetzt schon einige Male in diesem Thread versucht hat, Dir zu erklären: Du brauchst kein Duplikat des Seitentemplats "fe_page.xthml"! Sofern es im Backend-Modul "Templates" ein solches gibt, lösch' das einfach.

*klugscheissermodus*
Wieso steht das dann so in dem Buch?

**Typogold** · 20.12.2011, 07:13

Hallo an Alle Antwortenden,

da ich meinen Fehler einfach nicht finden konnte, habe ich jetzt pragmatisch beschlossen, den Ansatz externe Stylesheets einzubinden (bei diesem Projekt) nicht weiter zuverfolgen. Der Thread kann also eigentlich geschlossen werden, denn ich habe mir jetzt die Inhalte meiner Stylesheets kopiert und im Backend in neu angelegte und gleich benannte kopiert (copy&paste). Im Seitenlayout habe ich sie eingebunden, meine Seite wird damit wie gewünscht angezeigt.

Zwar konnte ich nicht klären warum das mit der externen Lösung nicht klappt, aber vielleicht stolper ich später über die Lösung, wenn ich im Buch weiter bin. Ich finde das Buch auf jeden Fall SEHR GUT!

Danke Euch nochmal für Eure Zeit und Eure Geduld - wir sehen uns an anderer Stelle im Forum wieder und dann vermulich mit ähnlich kniffligen Fragen... ;-)

Beste Grüße
Typogold

**Bennie** · 20.12.2011, 07:52

Mach es doch so wie "xchs" geschrieben hat. So habe ich das schon x-mal gemacht und hatte nie Probleme damit. Ich hatte beim ersten Testen von Contao diesen Punkt "Experteneinstellungen" "Zusätzliche <head>-Tags" gefunden und den link zum css eingetragen wie ich es schon immer mit anderen Projekten und anderen CMS gemacht hatte und auf Anhieb klappte es.
Warum schreib ich das? Na ich denke, das man an dieser Stelle nicht aufgeben muss, weil es einwandfrei funktioniert. Alles was ich bis hierhin gelesen habe würde mich auch extrem verunsichern, weil man den Eindruck als Einsteiger gewinnen könnte es sei kompliziert und das ist es ja nicht.
Fühl Dich also motiviert die CSS dennoch auszulagern , wenn es Deinem Wunsch entspricht

Viele Grüße
Bennie

**Teaser01** · 20.12.2011, 08:34

Ich hatte anfangs auch das Problem, dass sich das externe Stylesheet nicht einbinden lies.
Bin dann drauf gekommen, woran es lag...
Das neue (umbenannt oder nicht) Template muss im Seitenlayout eingebunden werden:
D.h. nach Schritt 8 auf S. 180 (1.Aufl.) husch zurück nach Layout>Themes>Seitenlayout>Experteneinstellung und bei "Seitentemplate" das neue (umbenannt) Template wählen... dann funktioniert die Sache.

Das ist ein anderer Vorgang als in

http://websites-erstellen-mit-contao...tionieren.html

beschrieben ist.

Vielleicht hilfts auch jemand anderem...?

Mit besten Grüßen

Teaser01

**pmmueller** · 20.12.2011, 08:37

Zitat von Typogold

In den Beispieldaten zur zweiten Auflage des Buches findet sich in Ordner k08_css_extern KEINE fe_page.xhtml. Erst im Ordner k09_navigation/frontend_template_k0904_ende.

Sorry, ich dachte, du hast die erste Auflage

In der zweiten Auflage ist das nicht drin, denn dort ist zum einen das Kapitel 7 aus der ersten Auflage in Kapitel 7 und 8 geteilt worden und zum anderen wird das externe Stylesheet im Seitenlayout eingebunden (im ToDo auf Seite 201).

**ShenLung** · 20.12.2011, 08:45

...und hier noch ein passender Screenshot dazu:

contao.jpg

Man beachte die zusätzlichen <header>-Tags

**pmmueller** · 20.12.2011, 08:45

Zitat von Typogold

*klugscheissermodus* Wieso steht das dann so in dem Buch?

In der zweiten Auflage steht auf Seite 201

Um ein externes Stylesheet mit Contao zu verbinden, gibt es zwei Möglichkeiten:

Im Seitenlayout ...
Im Seitentemplate ...

Weiterhin steht dort "Beide Methoden haben Vor- und Nachteile und ein Stück weit ist es auch einfach Geschmackssache, welche Methode man bevorzugt." Und jetzt kommt's:

Im folgenden ToDo fügen Sie im Seitenlayout im Feld Zusätzliche <Head>-Tags einen Link zum zentralen Stylesheet ein.

Oder anders ausgedrückt: Das steht so gar nicht im Buch.

In der ersten Auflage hatte ich mich für die Einbindung über das Seitentemplate fe_page entschieden, und da war eine Kopie davon auch im Ordner k08 auf der Buch-DVD

**pmmueller** · 20.12.2011, 09:13

Zitat von Typogold

Zwar konnte ich nicht klären warum das mit der externen Lösung nicht klappt...

Hier noch ein paar Tipps zum systematischen Testen und Debuggen von externen Stylesheets.

1. Pfadangabe zu zentrale.css prüfen
Um Probleme mit Pfadangaben auszuschließen, ruft man das zentrale Stylesheet zentrale.css direkt im Browser auf. Dazu gibt man die Frontend-URL ein, gefolgt von der Pfadangabe zum STylesheet, die mit tl_files/ beginnt. Auf der Website zum Buch ist das folgende Zeile:

http://websites-erstellen-mit-contao...e/zentrale.css

Jetzt sollte im Browser einfach zentrale.css mit den drei @import-Anweisungen und eventuellen Kommentaren erscheinen. Wenn das nicht erscheint, stimmt die Pfadangabe zum zentralen Stylesheet nicht.

2. Syntaxfehler in zentrale.css ausschließen
Wenn der Browser das zentrale Stylesheet findet, dann ruft man die drei darin importierten Stylesheets einzeln direkt im Browser auf:

Wenn der Browser diese Stylesheets findet, die Site aber nicht damit formatiert wird, dann gibt es wahrscheinlich einen Syntaxfehler in zentrale.css. Die Möglichkeiten sind vielfältig. Da kann z. B. am Ende einer Anweisung das Semikolon fehlen oder eine Leerstelle am falschen Ort sein. Ein Leser hatte die drei @import-Angaben mal in ein @media {} gesetzt. Das ging auch nicht...

3. Syntax im <link>-Element überprüfen
Wenn die beiden ersten Tests klappen, dann bleibt eigentlich fast nur noch ein Syntaxfehler im <link>-Element im Seitenlayout im Feld "Zusätzliche <head>-Tags". Für das Ausgabeformat "XHTML Strict" oder "XHTML Transitional" sollte das Element etwa so aussehen (in einer Zeile):

<link href="tl_files/themes/cover_theme/zentrale.css" rel="stylesheet" type="text/css" />

Mehr Fehlerquellen fallen mir im Moment nicht ein...

Optional: Einbindung über das Seitentemplate fe_*.*
Bei der Einbindung über das Seitentemplate sieht das <link>-Element genauso aus, aber es gibt noch ein paar zusätzliche Fehlerquellen:

Ist der im Theme der Template-Ordner definiert?
Ist das Seitentemplate im Seitenlayout eingebunden?
Ist im Seitenlayout das korrekte Ausgabeformat (XHTML oder HTML5) ausgewählt?

Mehr fällt mir an möglichen Fehlern momentan nicht ein. Außer CSS-Syntaxfehler, die man mit dem CSS-Validator finden kann.

Zitat von Typogold

Ich finde das Buch auf jeden Fall SEHR GUT!

Danke für das Kompliment mit dem Buch, und weiterhin viel Spaß damit

**bibib** · 20.12.2011, 19:59

Schönen Abend zusammen,

ich hänge mich jetzt einfach mal hier dran. Nachdem ich die Extension "csseditor" verbannt und nach Peter's Anleitung im Contao-Buch externe Stylesheets angelegt habe, bin ich überglücklich. Prinzipiell funktioniert alles super, und die Bearbeitung macht wieder Spaß.

Danke!

Ich habe jetzt trotzdem noch ein Problem: ich verwende immer drei Stylesheets. Das Reset-Stylesheet basic.css, ein grid.css und ein style.css. Bei den Browsertests habe ich dann einige Unregelmäßigkeiten festgestellt. Chrome und Safari ignorieren die basic.css. So fehlen zum Beispiel die Abstände vor und nach den Überschriften oder auch nach den Absätzen. Ich hänge hier mal Screenshots von allen Browsern dazu. In Firefox, Opera und sogar beim IE passt alles. (Hier noch der Link.)

Im übrigen ist es gleichgültig, ob ich die externen Stylesheets über das Seitentemplate oder das Seitenlayout einbinde. In beiden Fällen hab ich das gleiche Darstellungsproblem. Die Tests aus dem letzten Post von Peter hab ich gemacht, konnte nichts auffälliges finden, zumal das Ergebnis in drei Browsern eh passt. Die basic.css lässt sich auch in Chrome und Safari aufrufen.

Woran kann das liegen?
LG,
Birgit

**pmmueller** · 20.12.2011, 20:10

Faszinierend.

Keine Ahnung, warum das so ist, aber zwei Dinge sind etwas ungewöhnlich:

1. Das ../../ im Pfad bei <link type="text/css" rel="stylesheet" href="../../tl_files/basic_theme/css/zentrale.css">.

2. Das @charset "utf-8"; am Anfang der Stylesheets.

Gibt's einen bestimmten Grund für die beiden Dinge?

**bibib** · 20.12.2011, 21:02

Zitat von pmmueller

1. Das ../../ im Pfad bei <link type="text/css" rel="stylesheet" href="../../tl_files/basic_theme/css/zentrale.css">.

2. Das @charset "utf-8"; am Anfang der Stylesheets.

Gibt's einen bestimmten Grund für die beiden Dinge?

Nicht wirklich. Das @charset "utf-8"; schreibt Dreamweaver automatisch an den Anfang jeder CSS-Datei, und nach dem Motto "hilft's nix, schad's nix" hab ich es mal drinnen gelassen. Und das ../../ im Pfad ist mir wohl seit der Umstellung auf 2.10 in Fleisch und Blut übergegangen, weil ich etliche alte Seiten aktualisiert habe und dort überall den Pfad anpassen musste. Nimm beide Dinge als zwei von vielen hirnlosen Versuchen, irgendein anderes Verhalten in Chrome und Safari zu provozieren.

Ich hab jetzt sowohl den Pfad richtiggestellt als auch das @charset rausgelöscht. Bleibt sich g'hupft wie g'hatscht, wie man hier so schön sagt. Tut sich nichts. Irgendwo, kein Tau mehr wo, hab ich neulich irgendwas von diesen @import-Regeln gelesen, dass es damit des öfteren mal Probleme gibt. Ich kann aber beim besten Willen nicht mehr sagen, worum es dabei genau gegangen ist. Ist dir da was bekannt?

theme_plus hab ich heute auch schon kurz getestet. Ergebnis vernichtend. Die Seite hat nur mehr funktioniert, wenn ich im FF im Backend angemeldet war, sonst war alles schön zerrupft. Wird wohl ein neuer Thread werden, aber nicht mehr heute

**pmmueller** · 20.12.2011, 21:35

Zitat von bibib

Irgendwo, kein Tau mehr wo, hab ich neulich irgendwas von diesen @import-Regeln gelesen, dass es damit des öfteren mal Probleme gibt. Ich kann aber beim besten Willen nicht mehr sagen, worum es dabei genau gegangen ist. Ist dir da was bekannt?

Nein, aber probiere doch einfach mal, die @import-Anweisungen rauszuschmeissen und stattdessen die Styles aus den drei anderen Stylesheets in zentrale.css zu kopieren. Genau in der Reihenfolge wie sie sonst importiert werden.

**pmmueller** · 20.12.2011, 21:38

Ich habe gerade mal das CSS validiert. In base.css gibt's einen Tippfehler:

Code:

/* Listenpunkte sind im IE nicht sichtbar - nochmals kontrollieren */
div#container ul, div#container ol
{
    margin-left:2em;
{

Fällt dir da was auf? So ziemlich gegen Ende? That could be it

**psren** · 20.12.2011, 22:51

Zitat von Typogold

da ich meinen Fehler einfach nicht finden konnte, habe ich jetzt pragmatisch beschlossen, den Ansatz externe Stylesheets einzubinden (bei diesem Projekt) nicht weiter zuverfolgen

ich mag das ganz gerne über diese Erweiterung ("Theme+").

**bibib** · 21.12.2011, 08:55

Zitat von pmmueller

Fällt dir da was auf? So ziemlich gegen Ende? That could be it

Oh ja - Tomaten auf den Augen

Allerdings war das trotzdem nicht die Ursache ...

Eigenartig, ich hatte zuerst noch versucht, nur die basic.css in die style.css zu kopieren, da die grid.css ja sehr wohl auch von Opera und Safari erkannt und verwendet wurde. Aber auch hier kein Ergebnis.
Mit der Variante "alle drei Stylesheets in die zentrale.css kopieren" geht es tatsächlich

Also für den Notfall ist das auf jeden Fall eine Lösung.

@psren:

Zitat von psren

ich mag das ganz gerne über diese Erweiterung ("Theme+").

Wie oben schon kurz erwähnt, ich hatte das auch probiert. Irgendwas habe ich aber falsch gemacht, da die Seite nur in dem Browser richtig dargestellt wurde, in dem ich im Backend eingeloggt war. Alle anderen haben die per theme_plus eingefügten Stylesheets ignoriert. Ich habe das nach der alten Anleitung eingerichtet, aber genau diesen Fehler erhalten. Ich denke, ich hatte irgendein Problem mit dem Komprimieren, ich schau mir theme_plus im Contaowiki nochmal genauer an und melde mich ev. nochmal

Danke euch einstweilen!

**bibib** · 21.12.2011, 09:59

Zitat von bibib

Wie oben schon kurz erwähnt, ich hatte das auch probiert. Irgendwas habe ich aber falsch gemacht, da die Seite nur in dem Browser richtig dargestellt wurde, in dem ich im Backend eingeloggt war. Alle anderen haben die per theme_plus eingefügten Stylesheets ignoriert. Ich habe das nach der alten Anleitung eingerichtet, aber genau diesen Fehler erhalten. Ich denke, ich hatte irgendein Problem mit dem Komprimieren, ich schau mir theme_plus im Contaowiki nochmal genauer an und melde mich ev. nochmal

So, mit theme_plus funktioniert es jetzt auch - dass es vorher nicht ging, lag "nur" an der falsch geschlossenen Anweisung. Also alles perfekt

Danke nochmal!

**codepiX** · 20.02.2012, 14:32

Hallo Leute,

ich bin ziemlich neu im Contao System und beschäftige mich derzeit ebenfalls mit dem Buch "Websites erstellen mit Contao".

Wie meine Vorposter auch, bin ich nun an der selben Stelle des Buches und auch ich hatte hier massive Probleme. Ich nutzte die Version 2.11.0 und die Umstellung von .tpl auf .xhtml bzw. .html5 habe mir noch selber erklären können. Dann folgte aber auch das Problem, dass die Kopie der fe_page.xhtml nicht gezogen hat, egal was ich darin geändert hatte. Ich habe es auch mit anderen Dateien versucht und ging davon aus, dass eine wirkliche Kopie im Dateisystem angelegt wird. Das ist aber nicht der Fall.

Falls nun jemand an der gleichen Stelle steht und verzweifelt, hier meine Lösung => Cache Problem.

Ich bin drauf gekommen, nachdem ich die Kopie der fe_page einfach mal umbenannt hatte, dann wurden meine Änderungen in der Kopie auf einmal gezogen. Also konnte es nicht an der Kopie selber liegen, sondern an der Art und Weise wie sie vom System verarbeitet wird.

Bei Probleme: Systemwartung => Daten bereinigen => Alle auswählen und Button klicken. Danach werden auch die Änderungen an der "nicht" umbenannten Kopie gezogen.

VG
Patrick

**pmmueller** · 20.02.2012, 14:40

Zitat von codepiX

ich bin ziemlich neu im Contao System und beschäftige mich derzeit ebenfalls mit dem Buch "Websites erstellen mit Contao". Wie meine Vorposter auch, bin ich nun an der selben Stelle des Buches und auch ich hatte hier massive Probleme. Ich nutzte die Version 2.11.0 und die Umstellung von .tpl auf .xhtml bzw. .html5 habe mir noch selber erklären können.

Hast du denn noch die erste Auflage? In der zweiten steht von .tpl eigentlich nichts mehr drin. Da wird die ganze Zeit mit .xhtml-Templates gearbeitet (S. 137 im ToDo, Schritt 137).

Zitat von codepiX

... Kopie der fe_page.xhtml nicht gezogen hat, egal was ich darin geändert hatte. Ich habe es auch mit anderen Dateien versucht und ging davon aus, dass eine wirkliche Kopie im Dateisystem angelegt wird. Das ist aber nicht der Fall.

Normalerweise wird tatsächlich eine Kopie der Datei angelegt. Externe Stylesheets würde ich inzwischen aber lieber im Seitenlayout anlegen (ab Seite 198ff. beschrieben). Updates sind später viel einfacher, wenn man keine Änderungen am Seitentemplate fe_page.xhtml vorgenommen hat.

**uconac** · 21.04.2012, 11:50

Zitat von xchs

Um nun Dein externes Stylesheet einzubinden, machst Du folgendes:
...

Code:

<link href="tl_files/themes/themename/css/zentrale.css" rel="stylesheets" type="text/css" />

(der Unterordner "themename" bezeichnet dabei jenen Ordner, der hier nicht genannt werden soll)[/LIST]

Danke für den Tipp! Funktioniert in dieser Form bei mir allerdings auch nicht. Hab' nun doch einige Zeit gesucht. Nachdem ich in mein kleines HTML kurz und gut Büchlein geschaut habe, fiel mir plötzlich auf, was das Problem ist. Es muß rel="stylesheet" heißen, d.h. es ist ein s zu viel. Korrigiert und schon funktioniert's auch bei mir.

***xchs*** · 21.04.2012, 17:22

Du hast absolut recht! Selbstverständlich muss das Attribut rel="stylesheet" lauten. Sorry für das kleine "s" und danke für's Berichtigen.

**helmut64** · 23.04.2012, 21:19

Ich bin auch ein Fan von Peters Buch (habe die 2te Auflage)

Leider hat sich bei mir eine Fehler eingeschlichen....und diesen Halunken kann ich einfach nicht finden

Keine der Formatierungsanweisungen (Minikalender, Kontaktformular gestalten,....) funktionieren bei mir. Formatierungen im body, header,....gehen anstandslos...

Hat jemand eine Tipp, wo der Fehler liegen könnte?

Tja, ich bin natürlich noch eine contao-Frischling

LG aus Wien

***xchs*** · 23.04.2012, 21:41

Der Tipp kann eigentlich nur lauten, sich die Sache mit Firebug (Add-on für Firefox) genauer anzusehen. Ähnliche Tools gibt es übrigens auch für andere Webbrowser (teilweise bereits im Browser integriert).
Ich nehme an, die Site liegt noch lokal auf Deinem Rechner oder? Link wird es demzufolge wohl keinen geben oder?