Eigenes Stylesheet (Custom CSS)

Mit der Funktion "Benutzerdefiniertes Stylesheet" können Sie sowohl in Ihrem Online-Shop als auch in Ihrem Admin-Backend benutzerdefinierte CSS hinzufügen. Diese Funktion ist ideal für Designanpassungen wie das Ändern von Farben, Schriftarten, Rändern oder das Ausblenden von Elementen - ohne die Themadateien zu ändern.

Wie man CSS hinzufügt

1. Gehen Sie im Menü auf Unternehmen
2. Klicken Sie auf Benutzerdefiniertes Stylesheet
3. Geben Sie Ihren CSS-Code in das Textfeld ein
4. Klicken Sie auf Speichern

Ihr CSS wird nach den vorhandenen Stylesheets geladen, so dass Ihre Regeln die Standard-Styles überschreiben. Dies gilt sowohl für die Startseite des Webshops als auch für das Verwaltungspanel.

Anpassungen des Onlineshops

Hier finden Sie Beispiele für typische Anpassungen der Startseite des Webshops:

Ändern Sie die Hintergrundfarbe der Kopfzeile:

header { background-colour: #1a1a2e; }

Ändern Sie die Schriftart:

body { font-family: 'Georgia', serif; }

Verstecken Sie ein Element auf der Titelseite:

.element-class { display: none; }

Admin-Anpassungen

Sie können auch das benutzerdefinierte Stylesheet verwenden, um das Erscheinungsbild des Verwaltungsbereichs anzupassen. Nachfolgend finden Sie eine vollständige Übersicht über die CSS-Klassen und IDs, die Sie verwenden können.

Bestellliste - CSS-Klassen auf Bestellzeilen

Jede Bestellzeile in der Bestellliste verfügt über eine Reihe von dynamischen CSS-Klassen, die Sie verwenden können, um Bestellungen je nach Status, Zahlungs- und Liefermethode zu gestalten.

Status der Zahlung

Beispiel - Roter Hintergrund bei unbezahlten Bestellungen:

.unpaid { background-color: #ffe0e0 !important; }

Status der Bestellung

Der Status der Bestellzeile wird direkt als Klasse hinzugefügt:

Beispiel - Grüner Hintergrund bei gesendeten und bezahlten Bestellungen:

.paid.sent { background-colour: #ddffeb !important; }

Beispiel - Ausgegraute Anzeige von stornierten Aufträgen:

.cancelled { background-color: #eee !important; Deckkraft: 0.7; }

Liefermethode

Der Name der Liefermethode wird automatisch in eine CSS-Klasse umgewandelt. Alle Buchstaben werden zu Kleinbuchstaben und Sonderzeichen werden durch Unterstriche ersetzt. Zum Beispiel wird aus "Hausadresse mit GLS" die Klasse .home_address_with_gls.

Beispiel - Farbcodierte Aufträge nach Liefermethode:

/* GLS-Bestellungen mit orangem Hintergrund */ .home_address_with_gls { background-color: #fff3e0 !important; } /* PostNord-Aufträge mit blauem Hintergrund */ .postdanmark_to_home_address { background-color: #e3f2fd !important; }

Zahlungs-Gateway

Jede Bestellzeile erhält eine Klasse basierend auf der ID des Zahlungsgateways im Format .payment-{ID}. Um die ID zu finden, gehen Sie zu Einstellungen → Zahlungsgateways und sehen Sie die URL, wenn Sie auf Bearbeiten klicken.

Beispiel - Grüner Hintergrund für Bestellungen, die über ein bestimmtes Gateway bezahlt wurden:

.payment-{id} { background-color: #c8e6c9 !important; }

Andere Bestellzeilen-Klassen

Beispiel - EAN-Bestellungen hervorheben:

.ean { background-color: #c2caff !important; }

Bestelldetails - Klassen in der erweiterten Ansicht

Wenn Sie auf eine Bestellung in der Liste klicken, werden die Bestelldetails mit diesen Klassen angezeigt:

Inhalt der Bestellung

Lagerstatus

Beispiel - Roter Text für Artikel, die nicht auf Lager sind:

.itemsnotinstock { color: #ff0000 !important; font-weight: bold; }

Schaltflächen in der Bestellliste

Die Schaltflächen in der Bestellliste haben feste IDs, die Sie gestalten können:

Primäre Schaltflächen

Versand-Schaltflächen

Beispiel - Hervorhebung der Schaltfläche "Drucken":

#btn-print { background-color: green !important; color: white !important; }

Beispiel - Ausblenden von Versandschaltflächen, die nicht verwendet werden:

#btn-swipbox, #btn-gls { display: none !important; }

Webshop-spezifisches Styling

Wenn Sie mehrere Webshops desselben Unternehmens verwalten, können Sie den Adminbereich für jeden Webshop anders gestalten. Das body-Element hat die Klasse webshop{ID}, wobei ID die ID-Nummer des Webshops ist.

Beispiel - Unterschiedliche Kopfzeilenfarbe pro Webshop:

/* Ihr erster Webshop - rote Kopfzeile */ body.webshop{id} nav.top-app-bar { background-color: #ad3c3c !important; } /* Ihr zweiter Webshop - blaue Kopfzeile */ body.webshop{id} nav.top-app-bar { background-color: #2a50a6 !important; }

Layout und Navigation

Beispiel - Ändern Sie die Farbe des linken Menüs:

.drawer-light .drawer-menu .nav-link { color: #333 !important; } .drawer-light .drawer-menu .nav-link:hover { background-color: #f0f0f0 !important; }

Andere nützliche Elemente

Beliebte Anwendungsfälle

Farbcodierung der Bestellliste

Eine beliebte Einstellung ist die Farbcodierung der Bestellliste, um schnell zwischen bezahlten/unbezahlten Bestellungen und verschiedenen Status zu unterscheiden:

/* Unbezahlte Bestellungen in hellrot */ .unpaid { background-color: #fff0f0 !important; } /* Bezahlte und versandte Bestellungen in hellgrün */ .paid.sent { background-color: #f0fff0 !important; } /* Stornierte Aufträge ausgegraut */ .cancelled { background-color: #f5f5f5 !important; opacity: 0.6; } /* EAN-Bestellungen in Hellblau */ .ean { background-color: #f0f4ff !important; }

Wichtige Aktionsschaltflächen hervorheben

/* Grüne Druckschaltfläche */ #btn-print { background-color: #28a745 !important; color: white !important; } /* Grüne GLS-Schaltfläche */ #btn-gls-api { background-color: #ff9800 !important; color: white !important; }

Die Bestellliste breiter machen

.container-fluid { max-width: 100% !important; }

Nicht vorrätige Artikel deutlich kennzeichnen

.itemsnotinstock { color: #ff0000 !important; font-weight: bold; font-size: 1.1em; }

So finden Sie den richtigen CSS-Selektor

So finden Sie die genaue Klasse oder ID eines Elements:

1. Klicken Sie mit der rechten Maustaste auf das Element in Ihrem Browser
2. Wählen Sie Element inspizieren (Inspect)
3. Suchen Sie die Klasse (z. B. class="unpaid sent") oder ID des Elements
4. Verwenden Sie die Klasse oder ID als CSS-Selektor in Ihrem Stylesheet

Größere Designänderungen

Das benutzerdefinierte Stylesheet ist für kleinere Anpassungen geeignet. Für größere Designänderungen empfiehlt es sich, die Theme-Dateien selbst über SFTP zu bearbeiten. Lesen Sie den Artikel Mit SFTP anmelden, um loszulegen.

CSS-Spickzettel

Hier finden Sie einen schnellen Überblick über die am häufigsten verwendeten CSS-Eigenschaften, damit Sie gleich loslegen können, ohne nachschlagen zu müssen.

Farben

Farben können als Namen, Hex-Codes oder RGB angegeben werden:

/* Hex-Code (am häufigsten verwendet) */ Farbe: #ff0000; /* Roter Text */ background-color: #f0f0f0; /* Hellgrauer Hintergrund */ /* Farbnamen */ color: red; background-color: white; /* RGB mit Transparenz */ background-color: rgba(0, 0, 0, 0, 0.1); /* Schwarz, 10% sichtbar */

Nützliche Farbcodes:

Schriftart (font-family)

/* Schriftart ändern */ font-family: 'Georgia', serif; font-family: 'Arial', sans-serif; font-family: 'Courier New', monospace; /* Google Fonts (Import am Anfang des Stylesheets hinzufügen) */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); font-family: 'Open Sans', sans-serif;

Text

font-size: 14px; /* Textgröße */ font-weight: bold; /* Fettschrift (oder 400, 600, 700) */ font-style: italic; /* Kursivschrift */ text-align: center; /* Zentriert (links, rechts, mittig) */ text-decoration: underline; /* Unterstrichen */ text-transform: uppercase; /* Großbuchstaben (Kleinbuchstaben, Großschreibung) */ line-height: 1.5; /* Zeilenabstand */ letter-spacing: 1px; /* Abstand zwischen den Buchstaben */

Hintergrund

background-color: #f0f0f0; background-image: url('https://example.com/bg.png'); background-size: cover; /* Füllen Sie den gesamten Bereich */ background-repeat: no-repeat;

Umrandungen (border)

border: 1px solid #ccc; /* Rand um das gesamte Element */ border-bottom: 2px solid #333; /* Nur unterer Rand */ border-left: 4px solid #28a745; /* Grüner linker Rand */ border-radius: 8px; /* Abgerundete Ecken */ border: none; /* Rand entfernen */

Abstände (margin und padding)

/* Padding = innerer Abstand */ padding: 10px; /* Alle Seiten */ padding: 10px 20px; /* Oben/unten, links/rechts */ padding-left: 15px; /* Nur links */ /* Margin = äußerer Abstand */ margin: 10px; /* Alle Seiten */ margin-bottom: 20px; /* Nur unten */ margin: 0 auto; /* Ein Element zentrieren */

Anzeigen/Verbergen

display: none; /* Vollständig ausblenden (füllt sich nicht) */ visibility: hidden; /* Unsichtbar (füllt sich noch) */ opacity: 0.5; /* Halbtransparent (0 = unsichtbar, 1 = voll) */

Größe

width: 100%; /* Volle Breite */ max-width: 800px; /* Maximale Breite */ height: 50px; /* Feste Höhe */ min-height: 200px; /* Minimale Höhe */

Schatten

box-shadow: 0 2px 4px rgba(0,0,0,0,0.1); /* Weicher Schatten */ box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Starker Schatten */ box-shadow: none; /* Schatten entfernen */

Brauchen Sie Hilfe? Kontaktieren Sie uns unter support@shoporama.dk.