Wenn externe Stylesheets in fe_page nicht funktionieren...

von Peter Müller

In Kapitel 7 geht es um Contao und CSS. Ab Seite 176 wird die Möglichkeit beschrieben, externe Stylesheets in im Seitentemplate fe_page.tpl einzubinden.

Wenn die Einbindung externer Stylesheets nach dem Ausschließen von Tipp- und sonstigen Flüchtigkeitsfehlern partout nicht klappen will, gibt es folgende häufige Fehlerquellen: 

  • Pfadangabe zum Stylesheet ist falsch. 
    Probieren Sie, das zentrale Stylesheet zentrale.css nicht im Seitentemplate fe_page.tpl einzubinden, sondern wie auf Seite 180 oben beschrieben im Seitenlayout im Feld "Zusätzliche Head-Tags".  Am einfachsten kopieren Sie dazu das link-Element aus dem Seitentemplate und fügen es im Seitenlayout wieder ein.

Wenn das funktioniert ist die Pfadangabe korrekt und das Problem liegt woanders. Zum Beispiel hier:

  • Template-Ordner nicht definiert. 
    Falls Sie die fe_page.tpl wie im ToDo auf S. 180 beschrieben unterhalb von /templates/blaues_theme/ speichern, prüfen Sie, ob dieser Ordner im Theme als Template-Ordner definiert wurde. Wie das geht steht im ToDo oben auf Seite 125. 

Wenn kein Template-Ordner definiert ist, wird die fe_page.tpl mit der Einbindung des Stylesheets von Contao nämlich nicht gefunden. 

Zurück

Einen Kommentar schreiben

Kommentar von andreas |

puh... Rechenaufgabe gelöst!

was ist wenn beides nicht funktioniert, wie bei mir der Fall?
Ich tippe auf falschen Pfad aber was ich auch angebe, das Layout wird nicht mehr angezeigt.
Mich macht der Pfad doch stutzig:
files/themes/blaues_theme/zentrale.css
Die Ordnerstruktur wurde doch anders angelegt (Seite 109)?
muß es nicht so sein:
files/beispielsite/themes/blaues_theme/zentrale.css

Vielleicht habe ich gleich einen Fehler bei der Ordnerstruktur auf Seite 109 gemacht? Denn in der Abbildung 5.7 haben alle Ordner ein -, was bei mir nicht der fall war/ist.
Die Struktur sah genauso aus, nur hatte ich nicht bei allen Ordnern ein - davor.

Ich habe jetzt ne Menge in der Dateiverwaltung hinundher geschoben. Die ursprünglichen Struktur bekomme ich nicht mehr hergestellt.

Gruß, Andreas

Kommentar von Peter |

Der Fehler scheint bei der Ordnerstruktur auf Seite 109 zu liegen.

/beispielsite/* ist für Inhalte
/themes/* ist für Themes
/importieren nur ein Zwischenlager.

Versuche doch einfach mit dem blauen Pfeil die Ordnerstruktur auf Seite 109 nachzubauen. Oder kopiere einfach für das entsprechende Kapitel den Ordner /files/ von der Buch-DVD rüber.

Kommentar von andreas |

danke für die schnelle Antwort!
Verschieben habe ich ja versucht, so wie es im Buch aussieht bekomme ich es nicht verschoben.
Den Ordner tl_files, der zum ersten Mal in k06 auftaucht habe ich kopier. Fehler bleibt!

Wenn ich den Ordner "beispielsite" (Dateiverwaltung) zuklappe ist doch nichts mehr zu sehen, richtig? Alles liegt doch im Ordner beispielsite unter tl_files?

Da is was völlig verkorkst! Für mich sieht die Ordnerstruktur auch im Explorer richtig aus.

- beispielsite
-content
bilder
fotos
downloads
importieren
-themes
blaues_theme
+grafiken
basic.css
bildschirm.css
navigation.css
zentrale.css
hoffentlich wird das richtig formatiert dargestellt.

Andreas

Kommentar von Peter |

Wenn du /beispielsite/ einklappst, dann sollten /importieren, /themes und /tiny_templates noch zu sehen sein. Die sind alle auf einer Ebene.

Kommentar von Gabriele |

Ich habe ein Problem.
ich habe alles eingebunden, wie im Buch beschrieben.
Mein Layout ist dreispaltig. Das wird auch angezeigt.
In der Mitte ist alles ok. Nur der Kopf, die linke und rechte Seite werden nicht gefüllt.Im Quelltext sind sie aber vorhanden. Auch alle css-Dateien sind integriert und werden übernommen.
Was habe ich nur falsch gemacht? Für eine Idee wäre ich sehr dankbar.
Gruß Gabriele

Kommentar von Roland Blumhofer |

Konnte das Problem beim Einbinden eines externes Stylesheet in eine Contao 2.10.3-Testinstallation mit dem geänderten Standard-Template und der zusätzlichen Zeile

<link href="files/blaues_theme/zentrale.css" rel="stylesheet" type="text/css" media="screen" />

nach langem Probieren lösen.

Dazu habe ich die Inhalte der 3 relevanten Stylesheets "basic.css", "bildschrim.css" und "navigation.css" in einer einzigen CSS-Datei zusammengeführt. Diese CSS-Datei habe ich dann als "zentrale.css" von Hand in das Contao 2.10.3-Verzeichnis "system/scripts" abgespeichert. Damit funktioniert es.

Ich glaube, dass die von einigen Usern und auch von mir festgestellten Probleme mit den @import-Anweisungen

/* Style sheet zentrale */
@media screen {
@import url(basic.css);
@import url(navigation.css);
@import url(bildschirm.css);
}

zusammenhängen.

Gruß Roland

Antwort von Peter Müller

Hallo Herr Blumhofer,

vielen Dank für Ihren Kommentar und Glückwunsch zur Lösung des Problems, und es spricht überhaupt nichts dagegen, dass so zu lösen.

> @media screen {
> @import url(basic.css);
> @import url(navigation.css);
> @import url(bildschirm.css);
> }

Das umgebende @media screen { } ist eher ungewöhnlich. Ich würde die Definition des Ausgabemediums IN die drei Stylesheets verschieben (Auflage1, ToDo auf Seite 179).

Mit der Definition von 

@import url(basic.css);
@import url(navigation.css);
@import url(bildschirm.css);

in zentrale.css sind mir keine Probleme bekannt. Die häufigste Ursache für Probleme waren falsche Pfadangaben. Diese sind immer relativ zum Speicherort des Stylesheets, in dem sie definiert wurden.

Benutzer von externen Stylesheets sind übrigens von der Erweiterung "Theme Plus" von Tristan Lins ganz angetan. Ich habe sie mir selbst noch nicht angeschaut, aber das Einbinden von externen Ressourcen soll darin recht gut gelöst sein.

Grüße aus Groningen
Peter Müller 

NACHTRAG: Es lag wie vermutet an dem @media { }. 

Kommentar von Michael Seiberl |

Hatte auch das Problem, dass die Einbindung des neuen Templates nicht funzte.

Bin drauf gekommen, woran es (bei mir) lag...

Das neue (und am besten auch umbenannte "fe_Mypage") Template muss im Seitenlayout eingebunden werden.

D.h. nach Schritt 8 auf S. 180 (1. Auflage) husch zurück nach Layout>Themes>Seitenlayout>Experteneinstellung und bei Seitentemplate das neue Template wählen... dann funktioniert die Sache.

Das ist ein anderer Vorgang als in

http://websites-erstellen-mit-contao.de/news/items/wenn-externe-stylesheets-in-fe_pagetpl-nicht-funktionieren.html

beschrieben ist.

Vielleicht hilfts ja jemanden

Michael Seiberl

Antwort von Peter Müller

Danke für die Nachricht. 

Wenn es keinen bestimmten Grund gibt, sollte man das Seitentemplate nicht umbenennen, sondern bei fe_page lassen. Gibt sonst nur Ärger. Siehe oben. Und sonst spätestens beim nächsten Update Zwinkernd

Kommentar von Pascal |

Hi zusammen,

Ich hatte das selbe Problem und konnte es folgendermassen lösen:

Ich musste in den Einstellungen von Blaues Theme, den Template-Ordner von "blaues_theme" auf "auswahl aufheben" wechseln und also den Ordner /templates/blaues_theme NICHT auswählen.

Hat jemand eine Idee an was das liegen könnte?
Danke.
MfG Pascal

Antwort von Peter Müller

Eigentlich nur, wenn du die Templates NICHT in den Ordner blaues_theme gespeichert hast, sondern z. B. einen Ordner höher. 

Kommentar von Ilka |

Ich habe das gleiche Phänomen wie Pascal: Wenn ich die Auswahl für den Template-Ordner wegnehme, funktioniert's. Leider werden dann aber (ist ja klar) die anderen geänderten Templates nicht mehr beachtet.
Also liegt es nicht daran, dass das fe_page-Template im falschen Ordner liegt.
Herzliche Grüße
Ilka

Antwort von Peter Müller

Hallo Ilka, 

ich kann mir das wie bei der Antwort auf Pascal weiter oben nur so erklären, dass bei euch im Backend-Modul »Templates« die geänderten Templates im Hauptordner gespeichert werden und nicht im Unterordner blaues_theme. 

Beim Erstellen einer Template-Kopie mit "Neues Template" kann man ja das Zielverzeichnis angeben. Standardmäßig steht das auf /templates. 

Nach dem Ändern des Templates fe_page sollte man in »System - Systemwartung - Daten bereinigen« einmal alles löschen lassen. Eigentlich sollte das nicht nötig sein, aber ich habe es gerade mit einer lokalen 2.11.2 mal ausprobiert, und die Änderungen am Seitentemplate (Einbindung der externen Stylesheets) war erst danach sichtbar.

Ansonsten: Ab ins Forum mit der Frage. Da gehört das hin Zwinkernd

Gruß
Peter 

Kommentar von Stefan Zimmermann |

...ja daran lags bei mir (auch?)...nach "Daten bereinigen" gings auch mit Auswahl...danke...

Gruß
Stefan