NOVATREND Blog
Du hast eine Drupal Site und möchtest auf einer oder mehreren Seiten zusätzliches CSS und JavaScript hinzufügen? Du willst oder kannst keine Änderungen an den Dateien des Themes vornehmen?
Dann benötigst du das Asset Injector Modul! Es ermöglicht auf einfache Weise CSS Anweisungen und JavaScript Befehle im Browser hinzuzufügen. Der Geltungsbereich kann über Regeln definiert werden.
Alle Websites bestehen aus Inhaltselementen, die auf-, unter- und nebeneinander verteilt und manchmal auch übereinander gestapelt werden. Innerhalb dieser Elemente befinden sich Texte, Bilder, Videos, Graphiken und Fotos. Ob du diese Elemente Kästen, Kisten, Boxen oder Tabellen nennst, ist egal. So grundsätzlich geht es hier um einen Plan (Layout, Struktur) und die sehr grundsätzliche Gestaltung eine Site. Solche Pläne sind nicht neu und seit mehr als 500 Jahren bei bedrucktem Papier ebenfalls ein großes Thema. Es geht dabei immer um Rastersysteme, Verhältnisse, Ränder und Abstände. Sind beim Druck auf Papier zumindest die Größe der Ausgabe und die Seitenverhältnisse bekannt, so ist das bei Websites nicht mehr wirklich der Fall. Es ist nicht mehr vorhersehbar auf welchem Endgerät die Website angezeigt wird.
Auf fast jeder Website gibt es Hintergrundbilder. Immer stellen sich Fragen wie:
Die Gestaltungsmöglichkeiten mit Hintergrundbildern sind unendlich.
So grundsätzlich kannst du ein Hintergrundbild in der CSS Datei für einen Bereich festlegen. Wenn du den gesamten Hintergrund der Site ansprechen willst, bietet sich das body Tag an.
Wenn du dein gerade vollbrachtes Werk im Webdesign dem Kunden oder dem Designer vorstellst, dann gibt es ausser der Überprüfung der Funktionalität, der Farben und Schriften IMMER den Wunsch:
Das muss noch ein wenig nach links [rechts, oben,unten, grösser, kleiner, länger, kürzer] …
„Ein wenig“ ist dabei eine sehr variable Größe (so ähnlich wie „schön“ oder „blauer“). Besonders komplex sind die Zusammenhänge, wenn das Layout einer Site responsiv ist. In diesem Falle passt sich die Darstellung der Elemente einer Site der zur Verfügung stehenden Fläche auf dem Bildschirm an. Eine Änderung eines Abstands oder einer Schriftgröße kann unerwünschte Folgen bei anderen Bildschirmgrößen haben.
Jeder Kunde und jeder Designer kennt das Wort Pixel. Früher, als noch gedruckt wurde, waren es DPI (dots per Inch). Ein Pixel ist nach gängiger Meinung (und in Photoshop!) ein kleiner Punkt. Den kann man auch sehen, auf dem Fernseher, dem Telefon, dem Tablet oder gar der smarten Uhr: Heute ist so ein Pixel nur noch mit der Lupe erkennbar, weil es so viele davon gibt, die Maßeinheit hat sich aber im Kopf vieler Menschen festgesetzt. 10 Pixel sind mehr als ein Pixel und wenn man etwas, sagen wir mal 50 Pixel, nach links [rechts, oben,unten, größer, kleiner, länger, kürzer] verschiebt, dann sieht man das deutlich.
In CSS (Cascading Stylesheets) stehen Anweisungen, die deiner Website sagen, wie die Dinge auszusehen haben. Mit „die Dinge“ meine ich beispielsweise die Farbe von Text oder die Grösse von Überschriften.
CSS ist so ähnlich wie Wohnung einrichten. Du pinselst eine Wand an, hängst ein Bild auf, stellst eine Blume daneben und schiebst die Blume solange hin und her, bis es dir gefällt.
Mit CSS kannst du alle Dinge zu jedem Zeitpunkt verändern.
Dir gefällt die Wandfarbe nicht, kein Problem.
Anstelle der Blume soll ein interaktives Kunstwerk erscheinen, kein Problem 🙂
Weil das ja doch alles sehr abstrakt ist, hier ein sehr einfaches Beispiel:
Das ist das HTML Markup:
<p>Ich bin ein Absatz, der ein <em>betontes</em> Wort enthält.</p>
das sind die CSS Anweisungen:
p {size: 16px;}
em {color: red;}Im Editor jsfiddle.net kannst du das sofort online ausprobieren.
Du musst dich nicht registrieren.
Es macht Spass in dieser Umgebung zu probieren und im Ergebnis versteht man die Zusammenhänge vermutlich viel besser.
Nach dem Ausprobieren auf jsfiddle möchtest du natürlich sofort auf der eigenen Website deine Idee umsetzen. Aber wo werden die CSS Befehle eingetippt?
Wenn du eine HTML/CSS Site ohne Datenbank betreibst, kannst du die CSS Anweisungen in der entsprechenden Datei per FTP auf den Server laden und/oder online verändern. Bei unseren Web Hostings geht das in der Dateiverwaltung im cPanel.
Bei den klassischen Content Management Systemen WordPress, Joomla und Drupal kannst du auf unterschiedliche Weise zusätzliche CSS Anweisungen eingeben.
Joomla besitzt einen vollwertigen Online Template Editor. Lege einfach im CSS Verzeichnis eine neue Datei mit dem Namen user.css an und füge die gewünschten Befehle ein.
Joomla lädt diese Datei nach dem Speichern automatisch.
Im Quellcode der Website taucht die neue Datei user.css auf.
In WordPress gibt es im Bereich Design den Customizer. Hier kannst du deine CSS Befehle eintragen.
Im Quellcode der Site werden deine Anpassungen „inline“ eingebunden.
Die englische WordPress Dokumentation enthält eine Übersicht über gebräuchliche WordPress CSS-Klassen (WordPress and CSS).
In Core Drupal kannst du das CSS nicht so einfach über den Browser anpassen. Es gibt aber natürlich ein Modul für Drupal 7 und Drupal 8, das dir einen CSS Editor mit Seitenvorschau zur Verfügung stellt (CSS Editor).
Auch hier wieder ein kurzer Blick in den Seitenquellcode. Wie bei WordPress wird das CSS Inline in die Seite eingefügt.
Wer schon mal gesucht hat, an welcher Stelle diese oder jene Änderungen eingefügt werden muss, weiß die aktuellen Browser zu schätzen. Einfach die Stelle markieren und im Browser Inspektor anzeigen, hier ein Beispiel in Google Chrome.
Hinweis: Wie beim Einrichten deiner Wohnung kannst du mit der Verwendung von individuellem CSS sehr schnell übers Ziel hinaus schießen, daher ein paar ganz einfache Dinge, die du beachten solltest:
Design lernt man nicht in ein paar Stunden. Es ist ein Prozess, der sich über Jahre erstreckt und nie zu Ende ist. Gerade deswegen bereitet er vielen Menschen auch soviel Freude.
tl;dr: Mit CSS kannst du deine Website „verschönern“.