Contao 3 Grundkurs

Contao-IDs und Klassen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit dem Standard-Seiten-Template "fe_page" generiert Contao verschachtelte div-Elemente mit IDs und Klassen. Erfahren Sie in diesem Video, wie das Standard-Seiten-Template aufgebaut ist und nach welchem Prinzip die Klassen der Frontend-Module benannt sind.
03:35

Transkript

Eine ungestylte Contao-Seite sieht im Frontend noch nicht sehr ansprechend aus. Das liegt daran, dass Contao grundsätzlich keine Annahmen trifft über das Design. Die einzige Annahme, die Contao aber sehr wohl trifft, ist die Tatsache, dass man es eventuell vorhat. Und deshalb sind die einzelnen Seitenbereiche und alle Elemente nach einem speziellen Plan verschachtelt und mit entsprechenden IDs und Klassen versehen, sodass man sich per CSS optimal darauf beziehen kann. Der normale Anwender soll davon natürlich nichts sehen und deshalb ist es gut, dass es Werkzeuge gibt, die uns genau diese Informationen auf den Bildschirm bringen. Ein solches Werkzeug ist das Firefox Add-On Firebug ... das aktiviere ich hier mal über diesen Button ,,, und die generelle Vorgehensweise ist die, dass man hier auf den Pfeil klickt, un dann ein beliebiges Element anwählt, das einen interessiert. ich klicke mal hier auf Startseite, und sehe den ersten Menüpunkt unserer Navigation. Der Klick markiert also die entsprechende Stelle im Source-Code, und wenn ich auf das Element draufklicke, dann sehe ich in dem rechten Bereich hier das was Styles für dieses Element bereits eingetragen ist. Manchmal erwische ich bei meinem Klick direkt das Element, das mich interessiert, manchmal interessiert mich aber auch mehr der umgebende Container. Und da geht man im Normalfall einfach in der Liste so weit nach oben, bis man einen solchen Container findet. In dem Fall ist das hier None Auf diese Weise habe ich jetzt also in Erfahrung gebracht, dass die Navigation umrahmt ist, von einem Typ der nav heißt, und die Klasse mod_navigation hat. Mit diesen Informationen kann ich jetzt im CSS mich genau auf diese Navigation beziehen, um dieser z. B. eine Hintergrundfarbe zu geben, oder irgendetwas anderes damit anzustellen. Prinzipiell ist das immer die gleiche Vorgehensweise. Also Klick auf den Untersuchen-Button hier mal auf ein Element. Ich komme auf dieses Bild, ich gehe ein Stückchen höher. Dieser Container hat die Klasse pdf_link. Wenn man das eine Weile macht, dann kennt man Seitenbereiche z. B. container, main usw. natürlich auswendig. Man lernt, dass Module immer mit "mod" anfangen, wie mod_article oder mod_navigation, das Inhaltselemente immer mit "ce" anfangen, hier None usw. Man muss die aber jetzt nicht auswendig lernen, oder sich irgendwelche Listen besorgen, denn man hat mit Firebug ja direkt vor Ort immer alle Informationen, die man gerade braucht zur Hand. Lange Zeit war der Firebug auch das Tool schlechthin für Entwickler, mittlerweile haben die Browserhersteller doch flächendeckend nachgezogen. Der Internet Explorer hat schon länger ein Tool, mit dem kann man auch sehr schön die älteren Versionen prüfen. Google Chrome hat auch brauchbare Entwicklertools und der Firefox selbst kommt auch mit einem solchen Werkzeug, oder besser gesagt einer ganzen Platte an Werkzeugen. Sieht auch recht stylisch aus. Ich selbst bin noch nicht ganz überzeugt, aber das kann sich durchaus auch noch ändern. Suchen Sie sich einfach das Werkzeug aus, mit dem Sie am besten zurechtkommen.

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!