Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Contao 3 Grundkurs

Seite anpassen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Sie setzen in diesem Video einen Innenabstand und einen Hintergrund-Farbverlauf für das HTML-Element <body> sowie einen Schatten für den seitenumschließenden "wrapper".
03:29

Transkript

Was bisher geschah: Wir haben in der Seitenstruktur Seiten und Unterseiten angelegt. Dann haben wir ein Layout konfiguriert, dann ein Modul, oder genauer gesagt, zwei Module erstellt und ein Stylesheet. Beides haben wir im Seitenlayout eingebunden und dann haben wir noch einen Artikel geschrieben, nämlich den Artikel der Startseite. Das Ganze sieht im Frontend jetzt so aus. Optisch, naja sagen wir optimierbar. Ich möchte jetzt mit Ihnen aber auch nicht das ultra-ausgefeilte Design umsetzen, es geht da um Contao aber so ein bisschen verschönern kann und sollte man die Seite schon, finde ich. Das erste was wir dazu brauchen, ist natürlich eine Idee, wie das Ganze dann später aussehen soll. Und das zweite was wir brauchen ist, ein Werkzeug um nachzugucken, wo wir im CSS ansetzen. Ich nehme den Firebug und möchte zunächst den Hintergrund farblich etwas hinterlegen und die Seite selber etwas nach unten schieben, damit man auch ein bisschen so die Oberkante sieht. Schauen wir uns also an, was dieser Hintergrund hier für ein Element ist, Ich klicke hier mal drauf und lande im Firebug bei body. Das ist jetzt also das Element, was wir per Stylesheet stylen. Also gehen wir ins Backend, ich klicke auf Stylesheets, öffne mein Stylesheet, den ich bereits angelegt habe, und schiebe jetzt hier eine neue Formatdefinition an eine sinnvolle Stelle. Ich gehe dabei immer so vor, dass ich zunächst eine Kategorie auswähle, sofern es sie bereits gibt, in dem Fall ist das der Fall, nämlich Layout. Auch das body-Element gehört zum Layout. Und jetzt wähle ich eine Reihenfolge, so wie sie auch im dom vorkommt, also nicht im Köllner Dom, sondern im document object modell. d. h. vor den wrapper. Das Element body ist ein Typ, also nutze ich den Typ-Selektor, indem ich body so schreibe, wie es in HTML auch notiert ist. Jetzt setze ich einen Abstand. Dazu wähle ich ein Padding, also den Innenabstand von 20 Pixel. Außerdem möchte ich noch einen Hintergrund definieren. Einmal für Browser, die kein CSS3 können, mal ein helles grau, und dann als Verlauf das gleiche, von grau zu weiß. Hier gebe ich noch den Verlaufswinkel an, in dem Fall von oben nach unten. Damit der Verlauf sich nicht wiederholt, gebe ich hier unter Eigener Code noch ein background-attachment an. fixed, und damit bin ich fertig. Die Anweisungen für die verschiedenen Browser generiert Contao für mich automatisch. Zeit sich das Ganze im Frontend anzuschauen. Die Seite ist etwas nach unten gerutscht, ich mache den Firebug mal aus. Der Hintergrundverlauf ist da, der Wrapper durch den weißen Hintergrund hebt sich etwas besser vom Hintergrund ab. und damit haben wir den äußeren Rahmen unserer Seite gestaltet.

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!