Contao 3 Grundkurs

Den internen CSS-Editor verwenden

Testen Sie unsere 2005 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Contao umfasst seit der ersten Version einen internen CSS-Editor, der Vorteile bietet: Die Nutzung von Variablen, z. B. für Farbwerte, das Filtern nach Kategorien sowie CSS-3-Features wie Verläufe, Schatten oder runde Ecken.
08:27

Transkript

Contao bietet einen integrierten CSS-Editor. Ob man den nun benutzt oder nicht, ist schon fast zur Gretchenfrage geworden. Grund der Kritik ist, dass man viel klicken muss. Das stimmt, aber der Editor hat auch Vorteile. Machen wir es am besten so, dass wir mit dem Editor beginnen, un dich Ihnen dabei die Vorteile zeige. Sie können dann selbst entscheiden, ob Sie umsteigen wollen oder nicht. Ein Umstieg ist auf jeden Fall zu irgendeinem späteren Zeitpunkt ohne Probleme möglich. Zum CSS-Editor gelangen wir über Themes und dann hier auf das Icon CSS. Wir gelangen dann zunächst hier in die Liste verschiedener Stylesheets, ich kann ja mehrere Stylesheets anlegen, und jeder Eintrag hier entspricht tatsächlich einer Datei. Wir gucken uns das mal auf Dateiebene an. Die CSS-Dateien, die Contao aus den Angaben generiert, liegen unter assets/css und dann entsprechend dem Namen, den wir vergeben haben. Bitte kommen Sie aber nicht auf die Idee, diese Datei zu bearbeiten, denn Contao generiert bei jeder Änderung, die Sie vornehmen in diesem Stylesheet eine neue Datei und dann wären Ihre Änderungen überschrieben. Zurück zum Editor. wir gehen zunächst mal in die Metadaten dieses Stylesheets, ich jetzt entweder hier auf diesen Bleistift klicken, und dann das erste Element anwählen, oder ich klicke gleich auf diese Schaltfläche, da komme ich sofort in die Metadaten. Was haben wir? Also einmal den Namen, dann CSS3PIE deaktivieren. Standardmäßig unterstützt Contao ältere Internetexplorer-Versionen. Wenn Sie sich darüber etwas weiter informieren wollen, dann gibt es hier einen interessanten Artikel auf WEBKRAUTS. Wir können aber hier sagen, Nein, ältere Internetexplorer wollen wir nicht unterstützen. Da es hier nur um CSS3-Features handelt, und ich so viele davon gar nicht einsetzen will, lasse ich den Haken hier auch mal dran. Bilder einbetten ist auch eine gute Idee. Ich habe jetzt hier mal 20.000 eingetragen das bedeutet Bilder bis 20 Kilobyte, werden gleich als Datastream in das Stylesheet mit eingebettet, spart also auch wieder eine Resource beim Laden. Webentwickler lieben ja die vielfältigen Versionen des Internet Explorers, deshalb hat man sich für diese Browser auch was ganz besonderes einfallen lassen, nämlich Conditional Comments. Hier könnte ich jetzt festlegen, dass dieses Stylesheet ausschließlich für Browser Internet Explorer kleiner 8, et cetera gelten soll. Damit zu arbeiten ist eigentlich gar nicht mehr erforderlich, denn Contao liefert im body-Tag ... ich gehe mal ins Frontend um das zu zeigen ... mit aus, um was für einen Browser es sich handelt, der da die Seite gerade aufgerufen hat. Mit Hilfe dieser Klassen, also Rechner der aufruft, Browser, Engine und sogar die Version des Browsers, kann ich jetzt Selektoren definieren, mit denen ich dann ganz gezielt, eben die unterschiedlichen Internet Explorer-Versionen ansprechen kann. Nächster Punkt. Medientypen, hier reicht es wenn ich screen angebe, Media-Query erlaubt uns unser Stylesheet nur für eine bestimmte Breite des Viewports zu definieren. Das lassen wir mal offen. Und hier der erste Vorteil des internen Editors. Ich kann eine Variable definieren, z. B. "col01", Das ist die Variable für eine Farbe, und die bekommt jetzt einen Wert aus meiner Corporate Identity. Über dieses Pluszeichen hier, kann ich jetzt auch noch weitere Variable erzeugen. Und ich kann dann im späteren Verlauf statt dem konkreten Farbwert, eben die Variable angeben. Vorteil ist klar, ich vergebe einen Wert, ... das müssen übrigens nicht nur Farbwerte sein, das können auch Abstände sein, etc. ... ich kann diesen einen Wert an zentraler Stelle ändern, und diese eine Änderung wirkt sich auf alle Vorkommen dieses Wertes aus. Das gleiche könnte ich übrigens auch noch eine Ebne höher im Theme machen. Die Angaben da wirken sich dann auf alle Stylesheets aus. Jetzt noch speichern und schließen. Wir kommen wieder zurück in die Liste der Stylesheets, und unser Stylesheet ist jetzt fertig konfiguriert. Über das Bleistift-Symbol, oder "Strg"+ Klick, kommen wir jetzt zu den einzelnen Regeln innerhalb dieses Stylesheets. Oder wie Contao es nennt, Formatdefinitionen. Ich klicke auf Neue Formatdefiniton, und dann über das Klemmbrett, wohin die hin soll, und trage zunächst mal den Selektor ein. Nehmen wir das äußere umgebende Element, das ist der "wrapper". Der wrapper bekommt auch eine Kategorie, das ist die Kategorie Layout. Das meiste was ich in CSS definieren kann, befindet sich jetzt hier in den folgenden Kategorien. Also Möglichkeiten die Größe einzustellen, haben wir hier, kann ich jedes Mal auf- und zuklicken über diesen Haken. Ich kann das Element positionieren, Abstände und Ausrichtung einstellen und Hintergrund. Das wollen wir mal beispielhaft machen. Als Hintergrundfarbe stelle ich mal ein weiß ein. und dann möchte ich auch noch, dass der einen Schatten hat. der soll gleichmäßig um den wrapper rumgehen. und dann möchte ich nicht einen zu deftigen Schatten haben, sondern nur einen dezenten. Die Farbe kann ich hier über den Farbwähler auch auswählen, sgaen wir mal, so ein mittleres Grau. und auch noch, sagen wir 30 Prozent Deckkraft, damit eventuell eine Farbe vom Hintergrund noch durchscheinen kann. Soweit erstmal unsere Formatdefinition. Wenn ich Speichern und schließen klicke, sehen wir, dass Contao hier für uns die entsprechenden CSS3-Anweisungen generiert hat. Jetzt editiere ich noch die zweite Formatdefinition "h1" und gebe da mal die Kategorie an. Ob das jetzt sinnvoll ist oder nicht, sei mal dahingestellt. Speichern und schließen. Und weshalb habe ich das gemacht? Ich wollte Ihnen hier die Kategorien zeigen. Das was Sie eingetragen haben, haben Sie hier als Auswahlmenü. Wenn ich jetzt auf Layout gehe, und den Filter über dieses Symbol aktiviere, dann sehen Sie, werden nur noch die Definitionen aufgelistet die die Kategorie Layout haben. Wenn die Liste hier länger wird, dann ist man für solch ein Feature sehr froh. Auflösen kann ich den Filter umgekehrt, indem ich hier wieder auf Kategorie gehe, dann die Liste wieder aktualisiere, und jetzt habe ich wieder alle hier. Was auch angenehm ist, ich gehe nochmal zurück in diesen Style hier, ich kann eine Kategorie, beispielsweise hier den Hintergrund, einmal ausblenden, dann werden alle Angaben entfernt. Das ist jetzt gespeichert. Wenn ich aber die Kategorie wieder einblende, sind alle dort gemachten Einstellungen wieder vorhanden. Auch hier kann ich wieder einzelne Anweisungen ausblenden, bzw. über dieses Symbol hier per Drag & Drop auch verschieben. Bleibt noch eins zu tun, nämlich im Frontend nachschauen, ob sich denn irgendwas verändert hat. Die h1, die Überschrift hat nun keine Farbe mehr, und der wrapper sollte einen leichten Schatten haben. Schauen wir uns das an. EInmal neu laden, und tatsächlich, der Schatten ist da, die Farbe der Überschrift ist wieder neutral schwarz. Fazit: Ja, es ist einiges an Klickerei, aber der Contao CSS-Editor hat durchaus auch seine Vorzüge.

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!