Kategorien
Content Management Systeme Shared Hosting Site Builder Webdesign

Custom CSS und JavaScript in Drupal

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.

Kategorien
Webdesign Wunschthema

Gestaltung mit CSS Grids

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.

Kategorien
Webdesign

Hintergrundbilder in CSS

Auf fast jeder Website gibt es Hintergrundbilder. Immer stellen sich Fragen wie:

  • Wie positioniere ich Hintergrundbilder?
  • Wie lege ich die Grösse fest?
  • Welche Effekte kann ich erzielen?

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.

Kategorien
Webdesign Wunschthema

Das muss etwas nach links … EM, REM oder PX?

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.

Kategorien
Content Management Systeme Editoren Shared Hosting Site Builder Webdesign

Wie geht das genau mit CSS?

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 🙂

Ein Beispiel

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.

https://jsfiddle.net/HagenGraf/zryonLs4/
https://jsfiddle.net/HagenGraf/zryonLs4/

Es macht Spass in dieser Umgebung zu probieren und im Ergebnis versteht man die Zusammenhänge vermutlich viel besser.

Wo gebe ich die CSS Anweisungen auf meiner Website ein?

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?

HTML Site

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.

cPanel Dateiverwaltung
cPanel Dateiverwaltung

Content Management Systeme

Bei den klassischen Content Management Systemen WordPress, Joomla und Drupal kannst du auf unterschiedliche Weise zusätzliche CSS Anweisungen eingeben.

Joomla

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.

user.css in Joomla
user.css in Joomla

Im Quellcode der Website taucht die neue Datei user.css auf.

Quellcode Joomla Website
HTML-Quellcode Joomla Website

WordPress

In WordPress gibt es im Bereich Design den Customizer. Hier kannst du deine CSS Befehle eintragen.

WordPress Customizer
WordPress Customizer

Im Quellcode der Site werden deine Anpassungen „inline“ eingebunden.

WordPress - HTML Quellcode
WordPress Website – HTML Quellcode

Die englische WordPress Dokumentation enthält eine Übersicht über gebräuchliche WordPress CSS-Klassen (WordPress and CSS).

Drupal

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).

Drupal CSS Editor
Drupal CSS Editor

Auch hier wieder ein kurzer Blick in den Seitenquellcode. Wie bei WordPress wird das CSS Inline in die Seite eingefügt.

Drupal Website - HTML Quellcode
Drupal Website – HTML Quellcode

Wir finde ich die passende CSS Klasse?

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.

Google Chrome Inspektor
Google Chrome Inspektor

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:

  • Keine Mischung von Schriftarten
  • Benutze aufeinander abgestimmte Farben
  • Trenne Inhaltselemente wie Seitenleisten, Kopf- und Fußzeilen klar voneinander
  • Benutze nicht all zu viele Fotos und Grafiken
  • Achte auf einen hohen Kontrast zwischen Schrift und Hintergrund

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.  

Links


tl;dr: Mit CSS kannst du deine Website „verschönern“.

Save