Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Contao 3 Grundkurs

Stylesheets: HTML-Elemente gestalten

Testen Sie unsere 2013 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Stylesheets enthalten Designanweisungen für HTML-Elemente. In Contao heißen diese Anweisungen "Formatdefinitionen". In diesem Video erstellen Sie ein neues Stylesheet und legen dort die Farbe einer Überschrift fest.
03:26

Transkript

Stylesheets enthalten Designanweisungen für HTML-Elemente. Wie also bestimmte Elemente aussehen, wo sie platziert sind, das wird in diesen Stylesheets angegeben. Ich möchte jetzt beispielhaft einen solchen Stylesheet anlegen, und darin angeben, dass diese Überschrift hier eine bestimmte Farbe haben soll. Erster Schritt dafür, ich lege ein neues Stylesheet an. Klick auf Themes, dann auf CSS, und ich bin in der Liste der Stylesheets. Derzeit ist noch kein Stylesheet angelegt, das werden wir also gleich ändern. Neues Stylesheet, und das nenne ich mal "screen". Die Einstellungen, die hier noch möglich sind, lasse ich alle mal unberührt, ich gehe auf Speichern und Schließen. Stylesheet ist angelegt. Klicke ich jetzt auf den Bleistift zur Bearbeitung dieses Stylesheets, komme ich in den sogenannten Parent View. Oben in dieser Zeile stehen die Metadaten des Stylesheets und hier unten drunter kann ich jetzt einen oder mehrere Styles legen. In Contao heißen die Formatdefinitionen. Also neue Formatdefinition, hier in diesen Stylesheet gelegt, und der Selektor, wie heißt der Selektor? Jetzt müsste ich natürlich wissen, was diese Überschrift für ein Element ist, denn genau das macht der Selektor, er bezieht sich auf ein bestimmtes Element. Ich will es an der Stelle mal nicht zu spannend machen, es ist das Element "h1", das Contao hier verwendet. Weiter unten im Formular habe ich jetzt die Möglichkeit die Schrift zu bearbeiten und kann hier sagen, die Schriftfarbe soll ... ich wähle das jetzt hier mal aus ... einen bestimmten Wert haben. Irgendwas in der Richtung Orange. Select und die Farbe ist ausgewählt. Wenn Sie sagen, das ist mir aber doch ein bisschen zuviel Klickerei hier in diesem Formular um CSS zu schreiben. Sie können selbstverständlich mit Contao auch mit einem Editor Ihrer Wahl alles selbst schreiben und das dann in die Seite einbinden. Mehr will ich an dieser Stelle jetzt auch nicht tun, ich gehe auf Speichern und Schließen. Unser Stylesheet-Screen hat jetzt eine Formatdefinition. h1 soll eine bestimmte Farbe haben. Wenn ich mir jetzt meine Aktion im Frontend anschaue, und das Frontend neu lade, dann werden Sie sehen, dass hier sich noch nichts getan hat, was nicht verwundert, weil für die Stylesheets gilt das Gleiche wie für die Module, die liegen erstmal in diesem Pool und warten darauf, eingebunden zu werden. Der Ort, wo die Stylesheets eingebunden werden, ist in Contao das Seitenlayout. Ich klicke also auf Seitenlayouts, dann auf unser Layout screen, und jetzt sehen Sie, dass hier in der Rubrik Stylesheets unser Stylesheet Screen aufgelistet ist. Ich muss also nur hier einen Haken setzen, und das Stylesheet wird im Seitenlayout eingebunden. Speichern und Schließen. Jetzt nochmal die Kontrolle im Frontend. Neu laden und unsere Überschrift hat jetzt eine neue Farbe.

Contao 3 Grundkurs

Lernen Sie die Grundidee des Content Management Systems Contao 3 kennen und machen Sie sich mit den Möglichkeiten der Inhaltsdarstellung bis hin zum komplexen Webauftritt vertraut.

6 Std. 34 min (102 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!