WebMasterService N3rds@Work

UpFront Shortcodes Benutzerdefiniertes CSS

So verwendest Du den benutzerdefinierten CSS-Editor

Das UpFront-Shortcodes-Plugin enthält einen benutzerdefinierten CSS-Editor, mit dem Du das Erscheinungsbild von Shortcodes einfach ändern kannst.

Inhaltsverzeichnis

Einstieg
Finde den richtigen Shortcode-Selektor
Verwendung von benutzerdefinierten Shortcode-Klassen
Verwendung von Variablen im Editor

Einstieg

Navigiere zu Dashboard → Shortcodes → Einstellungen und suche das Feld Benutzerdefinierter CSS-Code .

Screenshot: Benutzerdefiniertes CSS-Codefeld

Hier kannst Du mit dem Schreiben von benutzerdefinierten Stilen beginnen. Stile, die im benutzerdefinierten CSS-Editor geschrieben wurden, haben Priorität und überschreiben die Standardstile von Shortcodes. Nachfolgend findest Du einige Tipps zum Schreiben von benutzerdefiniertem CSS-Code. Bitte lese sie, um Deine Arbeit zu erleichtern.

Finde den richtigen Shortcode-Selektor

Um das Aussehen eines bestimmten Shortcodes oder seines Elements zu ändern, solltest Du zuerst die CSS-Klasse dieses Shortcodes/Elements finden. Dazu kannst Du den Inspector verwenden.

Inspector ist ein mit Webbrowsern bereitgestelltes Entwicklertool, mit dem der Quellcode der Seite angezeigt werden kann. Inspektoren können in verschiedenen Browsern etwas anders aussehen, aber die Hauptfunktion sieht ähnlich aus und funktioniert ähnlich.

Öffne den Inspector und klicke auf die Schaltfläche „Element suchen“. Klicke auf das gewünschte Element auf der Seite, um seinen Selektor anzuzeigen. Weitere Informationen findest Du in diesem Artikel .

Verwendung von benutzerdefinierten Shortcode-Klassen

Beim Schreiben von benutzerdefinierten Stilen wird empfohlen, zusätzliche CSS-Klassen zu verwenden. Die meisten Plugin-Shortcodes ermöglichen die Verwendung zusätzlicher CSS-Klassen. Mit Hilfe eines speziellen class-Attributs kann eine zusätzliche CSS-Klasse hinzugefügt werden. Der folgende Shortcode sollte in den Post-Editor eingefügt werden:

[su_divider class="my-custom-divider"]

Jetzt kann eine zusätzliche CSS-Klasse verwendet werden, um das Aussehen des Shortcodes zu ändern. Der nächste Shortcode sollte in den benutzerdefinierten CSS-Editor eingefügt werden:

.my-custom-divider {
width: 50%;
}

Verwendung von Variablen im Editor

Der Editor ermöglicht die Verwendung einiger Variablen im CSS-Code. Variablen können zur Anzeige von Links auf dem Code verwendet werden, zB Links zu Hintergrundbildern oder Schriftdateien. Verfügbare Variablen sind unten aufgeführt.

%home_url%

Beschreibung: Link zur Hauptseite der Site.
Ergebnis: http://example.com

%theme_url%

Beschreibung: Link zum aktiven Themenordner .
Ergebnis: http://example.com/wp-content/themes/twentysixteen

%plugin_url%

Beschreibung: Link zum Ordner mit dem UpFront Shortcodes-Plugin.
Ergebnis: http://example.com/wp-content/plugins/upfront-shortcodes

Alle Links werden ohne abschließenden Schrägstrich angezeigt.

Beispiel für eine im CSS-Code verwendete Variable:

.my-custom-spoiler .su-spoiler-title {
background-image: url( '%theme_url%/images/custom-spoiler.png' );
}