Das ist weniger eine Frage als mehr ein Erfahrungsbericht eines Anfängers.
Zunächst einmal habe ich lange gesucht, wie man Elemente schachteln kann, so daß ma <div>s bekommt, die man irgendwie mit CSS behandeln kann. Erst ganz zum Schluß bin ich auf die "Elementgruppe" gestoßen, die ganz unscheinbar unter "Verschiedenes" zwischen "Akkordeon" und "Content-Slider" residiert. Da war ich dann auf andere Weise schon so weit gekommen, daß ich mich damit nicht mehr näher auseinandergesetzt habe.
Ich habe es auch damit versucht, unter "Seiten" eine Baumstruktuer anzulegen, aber das ist offensichtlich nicht der richtige Weg, um Inhalte anzuordnen.
Wenn man ein Theme anlegt, kann man CSS-Frameworks auswählen, und im Grundsystem von Contao gibt es da auch eine Auswahl "12-Spalten Grid". Nach meiner - nicht so sehr tiefgehenden - Betrachtung hat es zwei Nachteile. Zum einen ist da der Abstand zwischen nebeneinander dargestellten Inhalten. Untereinander brauchen sie einen Abstand, nach außen hin sollen sie aber nicht eingerückt erscheinen. Zum anderen braucht man für verschiedene Bildschirmgrößen verschiedene Anordnungen. Was man auf dem PC nebeneinander darstellen kann, muß man auf dem Mobiltelefon hochkant unter Umständen untereinander darstellen. Dafür habe ich darin keine Möglichkeiten gefunden.
Ich sah also keine andere Möglichkeit, als mich mit Erweiterungen auseinanderzusetzen.
Der Contao-Manager bietet unter "Entdecken" Erweiterungen an. Man findet dort auch "meistgeladene Erweiterungen", und interessanterweise war dort nichts darunter, was das Thema Anordnung von Inhalten bzw. Grid betraf. Aber bei einer Suche nach dem Stichwort "Grid" kommt einiges. Die Download-Zahlen sind aber gering. Der größte Wert, den ich gesehen habe, lag um die 82000. Offenbar haben nicht viele Leute dieses Problem.
Zwei Erweiterungen habe ich ausprobiert: "Bootstrap für Contao Grid" (82236 Downloads) und "erdmannfreunde/contao-grid-bundle" (40122 Downloads). Beide hatten kürzliche Änderungen, werden also noch aktiv weiterentwickelt. Das Bootstrap-System kannte ich schon. daher lag es für mich nahe.
Zu meiner Verblüffung konzentrieren sich beide Erweiterungen nicht auf CSS sondern darauf, wie man die Anordnungsstruktur (Zeilen, Spalten) im CMS hinterlegt. Sie erweitern die Elementtypen um das Grid betreffende und sorgen für eine passend eingerückte Darstellung der Elemente unter den Inhaltselementen eines Artikels. In beiden Fällen erhält man am Ende in der erzeugten Website geschachtelte <div>s mit den typischen Klassen "row" und "col-*-*". Im Falle von "Bootstrap für Contao Grid" darf sich der Anwender komplett selbst um ein passendes CSS kümmern. Gedacht scheint es zu sein, um das originale Bootstrap zu integrieren, wobei das eigentlich ein vollständiges Layoutsystem ist, das mit dem CSS von Contao konkurrieren dürfte. "erdmannfreunde/contao-grid-bundle" liefert ein CSS mit. Man bindet es ein, indem man im Theme ein Häkchen bei "EuF-Grid CSS laden" in den Seitenlayouts des Themes setzt. Dieses unscheinbare Häkchen muß man erst einmal finden. Aber auch hier sagt die Anleitung, daß es eigentlich so gedacht ist, daß der Nutzer sich sein eigenes CSS schreibt.
Da man nicht eben so mal ein CSS schreibt und ich bei dem kompletten Bootstrap-System Interferenzen mit dem Contao-CSS befürchtete, habe ich mich weiter auf "erdmannfreunde/contao-grid-bundle" konzentriert. Es hat für Anfänger den weiteren Vorteil, daß es weniger komplex ist. Es gibt nur vier zusätzliche Inhaltselemente "Reihe Start", "Reihe Ende", "Spalte Start", "Spalte Ende". Beide muß man immer paarweise benutzen. Es beginnt mit Reihen. In die Reihen kann man dann Spalten einfügen. In eine Spalte wieder Reihen. Für die Spalten fügt man dann die jeweilige Breite als Klassenbezeichnung ("col-*-*") ein. In das Feld passen mehrere Einträge, entsprechend für verschiedene Bildschirmgrößen. Die Darstellung in der Liste der Inhaltselemente des Artikels wird eingerückt, so daß man einen groben Anhaltspunkt hat, wo man steht. Insgesamt sieht es aber eher unübersichtlich aus.
Damit habe ich dann eine annehmbare Anordnung auf der Website hinbekommen. Tests mit verschiedenen Bildschirmgrößen stehen aber noch aus.
Zunächst einmal habe ich lange gesucht, wie man Elemente schachteln kann, so daß ma <div>s bekommt, die man irgendwie mit CSS behandeln kann. Erst ganz zum Schluß bin ich auf die "Elementgruppe" gestoßen, die ganz unscheinbar unter "Verschiedenes" zwischen "Akkordeon" und "Content-Slider" residiert. Da war ich dann auf andere Weise schon so weit gekommen, daß ich mich damit nicht mehr näher auseinandergesetzt habe.
Ich habe es auch damit versucht, unter "Seiten" eine Baumstruktuer anzulegen, aber das ist offensichtlich nicht der richtige Weg, um Inhalte anzuordnen.
Wenn man ein Theme anlegt, kann man CSS-Frameworks auswählen, und im Grundsystem von Contao gibt es da auch eine Auswahl "12-Spalten Grid". Nach meiner - nicht so sehr tiefgehenden - Betrachtung hat es zwei Nachteile. Zum einen ist da der Abstand zwischen nebeneinander dargestellten Inhalten. Untereinander brauchen sie einen Abstand, nach außen hin sollen sie aber nicht eingerückt erscheinen. Zum anderen braucht man für verschiedene Bildschirmgrößen verschiedene Anordnungen. Was man auf dem PC nebeneinander darstellen kann, muß man auf dem Mobiltelefon hochkant unter Umständen untereinander darstellen. Dafür habe ich darin keine Möglichkeiten gefunden.
Ich sah also keine andere Möglichkeit, als mich mit Erweiterungen auseinanderzusetzen.
Der Contao-Manager bietet unter "Entdecken" Erweiterungen an. Man findet dort auch "meistgeladene Erweiterungen", und interessanterweise war dort nichts darunter, was das Thema Anordnung von Inhalten bzw. Grid betraf. Aber bei einer Suche nach dem Stichwort "Grid" kommt einiges. Die Download-Zahlen sind aber gering. Der größte Wert, den ich gesehen habe, lag um die 82000. Offenbar haben nicht viele Leute dieses Problem.
Zwei Erweiterungen habe ich ausprobiert: "Bootstrap für Contao Grid" (82236 Downloads) und "erdmannfreunde/contao-grid-bundle" (40122 Downloads). Beide hatten kürzliche Änderungen, werden also noch aktiv weiterentwickelt. Das Bootstrap-System kannte ich schon. daher lag es für mich nahe.
Zu meiner Verblüffung konzentrieren sich beide Erweiterungen nicht auf CSS sondern darauf, wie man die Anordnungsstruktur (Zeilen, Spalten) im CMS hinterlegt. Sie erweitern die Elementtypen um das Grid betreffende und sorgen für eine passend eingerückte Darstellung der Elemente unter den Inhaltselementen eines Artikels. In beiden Fällen erhält man am Ende in der erzeugten Website geschachtelte <div>s mit den typischen Klassen "row" und "col-*-*". Im Falle von "Bootstrap für Contao Grid" darf sich der Anwender komplett selbst um ein passendes CSS kümmern. Gedacht scheint es zu sein, um das originale Bootstrap zu integrieren, wobei das eigentlich ein vollständiges Layoutsystem ist, das mit dem CSS von Contao konkurrieren dürfte. "erdmannfreunde/contao-grid-bundle" liefert ein CSS mit. Man bindet es ein, indem man im Theme ein Häkchen bei "EuF-Grid CSS laden" in den Seitenlayouts des Themes setzt. Dieses unscheinbare Häkchen muß man erst einmal finden. Aber auch hier sagt die Anleitung, daß es eigentlich so gedacht ist, daß der Nutzer sich sein eigenes CSS schreibt.
Da man nicht eben so mal ein CSS schreibt und ich bei dem kompletten Bootstrap-System Interferenzen mit dem Contao-CSS befürchtete, habe ich mich weiter auf "erdmannfreunde/contao-grid-bundle" konzentriert. Es hat für Anfänger den weiteren Vorteil, daß es weniger komplex ist. Es gibt nur vier zusätzliche Inhaltselemente "Reihe Start", "Reihe Ende", "Spalte Start", "Spalte Ende". Beide muß man immer paarweise benutzen. Es beginnt mit Reihen. In die Reihen kann man dann Spalten einfügen. In eine Spalte wieder Reihen. Für die Spalten fügt man dann die jeweilige Breite als Klassenbezeichnung ("col-*-*") ein. In das Feld passen mehrere Einträge, entsprechend für verschiedene Bildschirmgrößen. Die Darstellung in der Liste der Inhaltselemente des Artikels wird eingerückt, so daß man einen groben Anhaltspunkt hat, wo man steht. Insgesamt sieht es aber eher unübersichtlich aus.
Damit habe ich dann eine annehmbare Anordnung auf der Website hinbekommen. Tests mit verschiedenen Bildschirmgrößen stehen aber noch aus.
.
Comment