[holygrail 1.3.0] Das Holy-Grail-Layout für Contao

HI

Die Erweiterung holygrail setzt das Holy-Grail-Layout von A List Apart für TYPOlight um.

Das Contao-CSS-Framework sieht im Quelltext die Spaltenreihenfolge Linke Spalte | Rechte Spalte | Hauptspalte vor. Diese werden dann per CSS so angeordnet, dass der Benutzer sie in der Folge Linke Spalte | Hauptspalte | Rechte Spalte sieht.

Bedenkt man jedoch, dass in der Hauptspalte meist der wichtigere Inhalt liegt, erscheint es sinnvoller, die Hauptspalte zuerst im Quelltext zu nennen, damit Menschen mit Behinderungen und Suchmaschinen diesen Inhalt zuerst sehen.

Durch das Holy-Grail-Layout lassen sich die Spalten in der Reihenfolge Hauptspalte | Linke Spalte | Rechte Spalte anordnen.

Die Erweiterung stellt ein neues Frontend-Template „fe_holygrail.tpl“ zur Verfügung, das im Seitenlayout ausgewählt werden kann. Sobald dieses, oder ein anderes mit „fe_holygrail“ beginnendes Template ausgewählt wurde, übernimmt die Erweiterung die Spaltenangaben aus dem Seitenlayout und erstellt damit einen neuen CSS-Block, der pro Seite eingebunden wird. Auch die Standard-CSS-Datei system/typolight.css wird durch eine abgewandelte CSS-Datei „holygrail.css“ ersetzt.

Ich habe in vielen Browsern unter Mac, Fedora und Windows getestet, aber besonders die IE-Hacks bereiten mir etwas Probleme. Ich würde mich also freuen, wenn v.a. Windows-Nutzer mir Feedback geben könnten, ob alles tut. :)

Aktuelle Version: 1.3.0

Sebastian

Hi,

schöne Erweiterung. Damit kann man den Content noch besser für Suchmaschinen aufbereiten, weil die Inhalte zuerst kommen. Kommt damit in meine nun stetig zu überarbeitende Liste von Erweiterungen für SEO. Auch für Barrierfreiheit ist das natürlich optimal - aber das weißt du ja bereits. :-)

Jan

HI

Mir ging es gerade eher um die Barrierefreiheit, aber mit SEO lässt sich schließlich Geld verdienen… :D

Ich habe einen neuen Build erstellt, weil ich dummerweise alle .htaccess-Dateien vergessen hatte, das sollte nun behoben sein. Aber ich glaube, eine neue Freigabe wäre sinnvoller gewesen. Naja… :o

Sebastian

HI

Ich habe gerade Version 1.0.0 RC2 der Erweiterung hochgeladen.

Das ist neu:

• Seitentemplate an Contao 2.9 angepasst
• Fehler in der deutschen Sprachdatei behoben

Ich bitte weiterhin um X-Browser-Testing und vor allem Rückmeldungen hier.

Sebastian

Eine Frage, wenn ich diese Erweiterung in eine bestehende Contao-Webseiten installiere, muss ich dann nur das page-template einstellen, oder bedarf es noch weiterer Einstellungen?

@ETES: Mich würde Deine SEO-Liste mal interessieren :)

HI

Prinzipiell ändert sich sonst gar nichts, Template auswählen - fertig. Es kann aber natürlich sein, dass du dein CSS so seltsam aufgebaut hast, dass es zu Problem kommen könnte. ;-)

Zur SEO-Liste: http://www.contao.org/usertreffen-2010.html#agenda

Sebastian

HI

Ich habe gerade Version 1.0.0 stable der Erweiterung hochgeladen.

Das ist neu:

• Zusätzliches Seitentemplate „fe_holygrail_nocron.tpl“ (Aufruf der cron.php entfernt)
• Korrektur in der CSS-Datei holygrail.css

Sebastian

HI

Ich habe gerade Version 1.1.0 stable der Erweiterung hochgeladen.

Das ist neu:

* Option hinzugefügt, die Datei holygrail.css nicht im Frontend einzubinden
* iefixes.css wird nicht mehr eingebunden (konnte zu Problemen führen), bei Bedarf selbst einbinden

Zur ersten Option: Für die Optimierung der Seitengeschwindigkeit ist es nützlich, alle CSS-Dateien in einer einzigen Datei zusammenzufügen.
Dazu kannst du die Inhalte der Datei holygrail.css in deine eigenen Stylesheets übernehmen, und im Seitenlayout über die neue Option „CSS-Datei nicht einbinden“ die Datei holygrail.css aus dem Frontend entfernen – ein Aufruf weniger, einige Millisekunden schnelleres Laden.

Sebastian

Hi Sebastian,

sehr schön: Damit kann man in Zukunft alles CSS in einer Datei führen und so unnötige HTTP-Requests sparen. Kann auch das Inline-CSS noch in dieser Weise behandelt werden?

Jan

HI

Das wird eher schwierig, weil diese Anweisungen ja nach Seitenlayout unterschiedlich sein können. Die Option könnte ich schon hinzufügen, aber ob das sinnvoll ist?

Inline-CSS verursacht ja auch keine neuen HTTP-Requests, ich halte das dann eher für eine (übereifrige) Schönheitskorrektur…

Sebastian

Hi Sebastian,

ich denke die meisten Webseiten wird meistens mit einem fixen Layout pro Theme gearbeitet, selten mehr.

Sprich ich könnte mir einmal den CSS-Code im Backend "zusammenklicken", dann den Inline-CSS kopieren, als CSS-Code im Backend hinzufügen und dann das Inline-CSS in der Erweiterung deaktivieren.

Vorteil: Der Code der Seite wird noch schlanker und kompakter.

Jan

HI

Ich kenne einige Seiten, deren Kopfzeile beispielsweise auf der Startseite eine andere Höhe hat als auf Unterseiten. Das ginge dann wohl über Body-Klassen.

Aber was hältst du davon: Wenn du im Seitenlayout alle Angaben zu Spaltenbreiten und statischem Layout entfernst, wird kein Inline-CSS mehr generiert, und du kannst den nötigen Code in ein Stylesheet auslagern.

Sebastian

Hi,

ok, den Fall gibt es in der Tat. Aber auch dann sind es meistens nur zwei verschiedene Layouts, was diese Werte angeht.

Alles entfernen führt dazu, dass ich es mir zum einen nicht mehr im Frontend "zusammenklicken" kann und zum anderen dazu, dass ich die Werte bei einer Umstellung alle manuell rausnehmen muss statt einfach eine Checkbox zu setzen.

Ich habe das mal schnell implementiert. Anbei der angepasste Code.

Jan

HI

Ich habe gerade Version 1.2.0 stable der Erweiterung hochgeladen.

Das ist neu:

* Option hinzugefügt, das Inline-CSS nicht im Frontend einzubinden
* Bugfix: Bei leeren Angaben im Seitenlayout wurde die contao.css nicht überschrieben

Damit sollte Jan zufrieden sein :)

Sebastian

Hi,

ja, bin ich. Danke! ;-)

Jan

HI

Ich habe gerade Version 1.2.1 stable der Erweiterung hochgeladen.

Jetzt sollten die für 1.2.0 angekündigten Funktionen verfügbar sein – ich hatte gestern die database.sql offenbar nicht mit hochgeladen. Entschuldigung :o

Sebastian

Hi Sebastian,

tolle Erweiterung, damit hätte ich mir eine Menge Arbeit gespart! Soweit ich das erkennen kann steht beim Holygrail die linke Spalte (in der meistens die Navigation ist) aber noch vor der rechten Spalte.

Ich hab's mal mit viel Mühe geschafft die Reihenfolge umzudrehen (+noch einen Rahmen für alles und flexible Breite für IE<7 über JavaScript). Also:
1. mittlere Spalte (flexible Breite)
2. rechte Spalte (fix)
3. linke Spalte (fix)

Allerdings ist der css-Code doch deutlich länger als beim HolyGrail (leider). Siehe www.sdi-research.at. Vielleicht aber eine Hilfe für andere, die eine ähnliche Lösung suchen.

Meine Frage: Ließe sich das auch mit Deiner Erweiterung umsetzen?

Orvil

HI

Im Moment ist es mit der Erweiterung definitiv nicht möglich, und ich werde das voraussichtlich nicht einbauen. Kannst du mir vielleicht den Sinn verraten, den es haben soll, die rechte Spalte vor der linken Spalte im Quelltext zu positionieren?

Sebastian

Hi,

ja klar, es geht um die SEO-Optimierung. Es gibt natürlich verschiedene Meinung dazu, aber mit einiger Wahrscheinlichkeit ist es nützlich die inhaltlich relevanteren Texte weiter vorne im Quelltext zu positionieren. Da in der linken Spalte aber meistens die Navigation ist und in der rechten Spalte Inhalte sind (Verweis auf News, Aktivitäten usw.), ist es demnach besser die rechte vor der linken Spalte im Quelltext zu haben. Und: Falls es SEO-mäßig nichts nützt, schadet es aber auch nicht.

LG
Orvil

HI

OK, da muss man dann schon ziemlich besessen sein :D

Da ich mit meiner Erweiterung ja das Holygrail-Konzept implementieren wollte, und dieses jetzt nicht durch ein anderes ersetzen oder ergänzen möchte, werde ich das nicht einbauen.

Du könntest aber mit vertretbarem Aufwand holygrail duplizieren und dort das Template und das CSS entsprechend umbauen.

Sebastian

HI

Ich habe gerade holygrail 1.3.0 veröffentlicht.

Die neue Version lässt sich nun reibungslos mit Contao 2.10 verwenden. Dazu gibt es die beiden neuen Templatevarianten für XHTML und HTML5. Weitere Template-Änderungen sind auch übernommen, sodass sich der Cron beispielsweise über das Seitenlayout steuern lässt. Deshalb wird auch die Variante fe_holygrail_nocron.tpl nicht mehr benötigt.

Nach dem Update bitte im Seitenlayout dringend die Templateauswahl prüfen, sowie eine Systemwartung durchführen.

http://www.contao.org/erweiterungsli...030009.de.html

Sebastian

Hallo,
die Erweiterung ist sicherlich eine schöne Sache, leider funktioniert sie beim Internet Explorer erst bei den neueren Versionen.
Beim IE6 scheint irgendwas mit dem Container nicht zu passen und beim IE7 wird das Layout zerschossen, wenn eine linke Spalte existiert.
Die Sache mit dem IE6 könnte man bestimmt gut verschmerzen aber mit dem IE7 sind ja doch noch so einige unterwegs.
Könnte man da nicht was in der holygrail.css machen über die Klasse des Browsers (Stichwort: Vergesst Browser-Hacks)?

Beste Grüße
TGB

HI

Das hatte alles noch wundebar funktioniert, als ich die Erweiterung erstellt habe :(

Bitte teste doch mal im Original mit denselben Browsern und schreib, was dabei herausgekommen ist.
Wenn es tatsächlich kaputt ist, muss ich dringend die Erweiterung anpassen.

Vielen Dank auf jeden Fall für den Hinweis :)

Sebastian

Hallo,
ich hatte jetzt einfach mal eine frische Contao 2.10.4 mit dem Music Accademy Theme getestet und da wurde es schon deutlich.
Habe als Testbrowser allerdings nur den IETester zur Verfügung. Ich werde nachher noch mal genauer schauen und berichten.
Gruß
TGB

HI

Die MusicAcademy ist kein wirklich geeignetes Beispiel, da dort viel mit relativer und absoluter Positionierung gearbeitet wird. Wäre also gut, du könntest einfach mit dem IE-Tester die obige Demoseite aufrufen.

Vielen Dank,

Sebastian

Ja gut, die funktioniert. Aber meine eigene Seite auch nicht, dann arbeite ich wohl auch zuviel mit relativer und absoluter Positionierung...
Gruß
TGB

Hallo Sebastian,

ich habe eine ganz simple Frage. Auf Github hast du in #2000 dein HolyGrail Layout beschrieben. Der Text ist sehr ausführlich, hat aber einige entscheidende Lücken, wohl weil irgendwelche Codefragmente verschluckt wurden.

In einigen Absätzen kann ich mir das selbst zusammen reimen, aber im folgenden fällt mir nicht wirklich was ein, um die roten drei Punkte zu ersetzen:

Zitat:

---

Um bessere Bedienbarkeit des Layouts zu gewährleisten, würde ich das Layout abwandeln. Denn das HGL geht davon aus, dass man für das Hinzufügen von padding zu den Spalten natürlich die Spaltenbreite reduziert, einfacher ist es jedoch, einfach den bewährten ... zu verwenden. Ein ... wird nicht verwendet, da hierzu der Footer gebraucht wird, da aber bei Contao auch der Layoutbereich „vor der Fußzeile“ ermöglich werden sollte, fällt diese Möglichkeit wohl aus.

---

Bei der zweiten Lücke würde "Clearing" wohl Sinn ergeben, aber bei der ersten fällt mir nicht viel ein. Thanx a lot for filling my blanks ;)

Hallo,

ich habe das auch gerade Testweise installiert, leider wird bei mir auch der Container falsch angezeigt.

Ich habe kein Statisches Layout, habe aber die breiten mit 950px im CSS angegeben. Header und Footer bleiben bei 950px nur der Container hat mit Deinem Template ca. 1100px.

Woran kann das liegen?

Browser ist Firefox...

Gruß

Bevor ich die Erweiterung installiere würd mich interessieren:

• Arbeitet dieses Frontend-Template auch mit einem inneren und äußeren Div-Container für die Spalten und den Contentbereich wie das original Frontend-Template?
• Gibt es Erfahrung in Verbindung mit responsiven Webdesigns?

Danke für die Infos.
Michael

Das Template ist identisch zum normalen fe_page Template, nur dass es eben den Content Bereich zuerst setzt und dann erst die eventuellen Spalten Links bzw. Rechts. Zusätzlich bringt es die dafür benötigten CSS Regeln mit...

In sofern sollte es da keine Probleme geben mit eventuellen Definitionen für die Responsivität... (Hört sich schrecklich an?)

Hallo,

kann man das Template auch für die Aktuelle Version 2.11.5 nutzen?

Gruß

Warum nicht? Gibt es ein Problem?

Hallo,

ja in der Tat. Ich habe ein Template mit einer breite von 950px welches nicht "Statisch" ist, beim "fe_page.tpl" past alles. Sobald ich das "holygrail.tpl" benutze wird das Template breiter als 950px.

Ich hatte das auch hier schon einmal vor etlicher Zeit gepostet, es wurde aber nie beantwortet!!!!

Gruß

Hallo,

ich habe das ganze jetzt noch einmal durchprobiert, finde aber den Fehler nicht, bzw. weis nicht was ich ändern sollte.

Wenn ich kein "Statisches Layout" auswähle, passt die breite nicht mehr mit dem was ich im CSS angebe, wenn ich das "fe_page" Template zum testen nehme passt das wieder.

Vielleicht kann sich das der Entwickler noch einmal ansehen, oder hat jemad sonnst evtl. noch eine Idee?

Gruß

Hast du zufällig einen Link zu deiner Installation?
Oder zu deinem Forumsbeitrag, in dem du das schon mal gefragt hattest?

Im Holy Grail dürfen die Layoutbereiche #main, #left und #right in deinem CSS kein horizontales padding oder margin haben (also links oder rechts). Der Holy Grail ist eine echte "Presspackung" mit negativen margins und floats, und wenn ein eventuelles horizontales padding muss man an die jeweiligen .inside-Container vergeben.

Allgemein (also nicht nur für den Holy Grail) gilt für den den #wrapper:
Wenn man dem Wrapper links oder rechts ein padding oder margin gibst, muss man das im Seitenlayout wieder abziehen. Beispiel:
#wrapper { padding: 0 40px; }. Wenn du dann im Seitenlayout 960px einträgst, kommst du insgesamt auf 1040px. Dann müsste man im Seitenlayout also 880px eintragen, um insgesamt auf 960px zu kommen.

Zitat:

---

Zitat von pmmueller

Allgemein (also nicht nur für den Holy Grail) gilt für den den #wrapper:
Wenn man dem Wrapper links oder rechts ein padding oder margin gibst, muss man das im Seitenlayout wieder abziehen.

---

Und für alle die durch irgendwelche glücklichen Zufälle auf irgendeiner Seite keinen IE < 8 unterstützen müssen

Code:

---

* { box-sizing: border-box; }

---

(natürlich auch mit passenden Browser-Prefixes)

Hallo,

Super für die schnelle Antwort.

Ich versuche jetzt einmal darzustellen was ich habe.

Also mein Layout ist nicht "Statisch" deshalb kann ich im Backend bei der Breite nichts eintragen.

Ich möchte ein zweispaltiges Layout mit einer gesammtbreite von 950PX, die rechte Seite hat 230PX (dieses kann ich im Backend eintragen). Das Layout soll immer mittig im Browserfenster angezeigt werden.

Was muss ich denn jetzt einstellen, bzw. im CSS eingeben.

PS. Bei dem "holygrayl" gibt es für den Hauptbereich kein "inside" wie bei dem "fe_page".

Danke für Deine Hilfe

Gruß

Zitat:

---

Zitat von Supermann

Ich möchte ein zweispaltiges Layout mit einer gesammtbreite von 950PX, die rechte Seite hat 230PX (dieses kann ich im Backend eintragen). Das Layout soll immer mittig im Browserfenster angezeigt werden.

---

Nach der Beschreibung wäre es aber Statisch.

Zitat:

---

Zitat von Supermann

Was muss ich denn jetzt einstellen, bzw. im CSS eingeben.

---

Der #wrapper braucht erstmal eine breite. Ob über das Seitenlayout oder dein eigenes CSS ist egal.

Code:

---

#wrapper { margin: 0 auto; }

---

erledigt dann den Rest :-)

Ausgemittelt werden kann nur wenn die Breite des Elements bekannt ist :-)

Zitat:

---

Zitat von Supermann

PS. Bei dem "holygrayl" gibt es für den Hauptbereich kein "inside" wie bei dem "fe_page".

---

Was genau meinst du denn mit "Hauptbereich"?

Der Wrapper benötigt kein .inside, und die drei Layoutbereich #main, #left und #right haben jeweils ein div.inside.

Der #container hat auch im fe_page nie ein .inside, falls du das gemeint hast?!