Contao-Community - Allgemeine Inhaltselemente

5.7.xinline SVG

roe-dl — Fri, 25 Sep 2026 08:38:40 GMT

Beiträge, die ich zum Thema gefunden habe, waren schon älter, und die Leute wollten dort SVG-Dateien einfügen. Ich möchte aber SVG-Elemente (Tags) direkt in den Text einfügen.

Warum will ich das? Ich verwende gern kurze SVG-Sequenzen für Symbole. Wenn ich die SVG-Tags direkt in den Text einfüge, kann ich die Farbe "currentColor" verwenden, die sich automatisch ändert, wenn der Nutzer vom Light- in den Dark-Mode umschaltet. Das ermöglicht es, Darstellungen zu erzeugen, die sowohl vor hellem wie auch dunklem Hintergrund funktionieren.

Den SVG-Code schreibe ich selbst, oft mittels Python-Scripten, und benutze keinen SVG-Editor dazu. Dadurch sind das dann nur wenige Zeilen, die man tatsächlich direkt mit in den Text setzen kann. Auch das Problem mit XML- und DOCTYPE-Header besteht dann nicht.

Wenn ich im Text-Editor den Quellcode öffne und dort SVG-Tags hineinschreibe, werden sie wieder entfernt. So geht es also nicht.

Ein Inhaltselement "Ungefiltertes HTML" kann man nehmen. Da wird SVG angezeigt. Aber das kann man nicht in den laufenden Text integrieren.

Geht es irgendwie, SVG in laufenden Text einzubauen?

5.7.xAnordnung von Inhalten nebeneinander (Grid)

roe-dl — Thu, 24 Sep 2026 05:56:40 GMT

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

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

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.

5.7.xSpaltenbreite

roe-dl — Mon, 21 Sep 2026 21:10:55 GMT

Inzwischen habe ich schon viel gelernt, aber diesen Punkt verstehe ich nicht:

Ich habe ein Theme erstellt. Es hat drei Zeilen und zwei Spalten, nämlich eine Hauptspalte und eine linke Spalte. Die Breite der linken Spalte ist mit 20% angegeben. Wenn ich mir die erzeugte Website ansehe und mir mit dem Inspektionstool des Webbrowsers die Breite der Blöcke anzeigen lasse, dann geht irgendetwas nicht auf.

Im Beispiel ist der Bildschirm 1728 Pixel breit. Diese Breite hat auch das

mit der ID #wrapper. Dann folgt das

mit der ID #container, was links ein Padding von 345,6 Pixel hat, was diese 20% sind. Es verbleiben noch 1382,4 Pixel für die Hauptspalte. So breit ist sie dann auch. So weit, so gut.

Die linke Spalte mit dem Tag

5.7.xa href geo - in HTML

Thomas Hinze — Sat, 05 Sep 2026 11:06:08 GMT

Hi, ich versuche gerade einen Link im Format

Linktext in einem Text einzubauen.

Leider wird daraus nach speichern aus geo: immer geo%3A

Habe in den Seiteneinstellungen schon geo als Tag und als Attribut für a gespeichert, aber ohne Erfolg :-(

Würde höchst ungern nur um den Link so zu schreiben ein unfiltered HTML Element verwenden.