Um die Widgets in der EmbedReviews Plattform anzupassen, können Sie das Feld Custom CSS verwenden und die Klassen mit der Änderung ihrer Attribute anwenden.
Wie wendet man benutzerdefiniertes CSS an?
Wenn Sie zum Beispiel den Titel größer als 24px machen wollen, fügen Sie einfach die Klasse .es-title in das Feld Custom CSS ein und geben Sie font-size:30px ein.
Hier ist eine schrittweise Anleitung:
Navigieren Sie im Einstellungsbereich zum Feld Custom CSS
Geben Sie .es-title {font-size:30px;}
Klicken Sie auf die Schaltfläche "Save" oben rechts
Das war's schon.
Nachfolgend finden Sie eine Liste der Klassen, die in allen Bewertungs-Widgets verwendet werden und die Sie im Feld Custom CSS hinzufügen und deren Stilattribute ändern können.
Allgemeine Klassen für ALLE Bewertungs-Widgets
Um einen beliebigen Teil des Bewertungs-Widgets zu bearbeiten, verwenden Sie den:
Widget-Titel
Verwenden Sie die Klasse .es-title, um die Schriftgröße oder Farbe des Widget-Titels zu bearbeiten:
.es-title {color: #000000; font-size: 24px;}
Widget-Kopfzeile
Verwenden Sie die ID #es-header, um die Textausrichtung der Kopfzeile und den unteren Rand zu bearbeiten:
#es-header{text-align: center; margin-bottom: 50px;}
Review box (Hintergrund und Rand)
Verwenden Sie die Klasse es-box, um die Hintergrund- und Rahmenfarbe des Rezensionsbereichs zu bearbeiten:
.es-box { background-color: #FFFFFF; padding: 25px; width: 100%; border-radius: 8px; border: 1px solid #D6DAE4; overflow: hidden; position: relative; }
Name des Überprüfers
Verwenden Sie die Klasse .es-username, um die Schriftgröße oder Farbe des Gutachternamens zu bearbeiten:
.es-username {color: #000000; font-size: 18px; line-height: 25px; word-break: break-word; font-weight: 600; margin-bottom: 15px;}
Foto des Rezensenten
Verwenden Sie die Klasse .es-avatar, um den Randradius und die Position des Rezensentenfotos zu bearbeiten. Im folgenden Beispiel wird das Foto so eingestellt, dass es als Kreis erscheint. Wenn es quadratisch sein soll, setzen Sie einfach das Attribut border-radius auf 9%:
.es-avatar {Rahmen-Radius: 50%;}
Verwenden Sie die Klasse .avatar-75, um die Größe des Rezensionsfotos zu bearbeiten:
.avatar-75 {Breite: 75px; Höhe: 75px; }
Sterne
Verwenden Sie die Klasse .es-stars, um den Rand oder die Position der Sterne zu bearbeiten:
.es-stars {margin-bottom:15px;}
Verwenden Sie die Klasse .es-stars svg, um die Größe der Sterne zu bearbeiten. Zum Beispiel:
.es-stars svg {height:30px; width:30px;}
Text überprüfen
Verwenden Sie die Klasse .es-text, um die Größe oder Farbe des Rezensionstextes zu bearbeiten. Wenn Sie die Textgröße ändern möchten, fügen Sie einfach das Attribut font-size hinzu. Zum Beispiel: font-size:12px (für kleinere Schriftgröße) oder font-size:20 (für größere Schriftgröße):
.es-text {line-height: 1.5; word-break: break-word; margin-bottom: 20px; color: #000000;font-size:15px;}
Datum überprüfen
Verwenden Sie die Klasse .es-date, um die Schriftgröße und die Farbe des Überprüfungsdatums zu bearbeiten:
.es-date {font-size: 12px; color: #9CA0AC; Anzeige: inline-block;}
Quell-Logo
Verwenden Sie die Klasse .es-logo, um die Position des Quelllogos/Icons zu bearbeiten:
.es-logo { display: inline-block; margin-right: 4px; position: relative; top: 6px; background-repeat: no-repeat; width: 20px; height: 20px; background-size: contain; border-radius: 50%;}
Verwenden Sie die Klasse .es-logo svg, um die Größe des Symbols zu bearbeiten:
.es-logo svg {width: 20px; height: 20px;}
----
Leuchtkasten CSS-Klassen
Schieberegler lightbox
Bitte beachten Sie: Um ein beliebiges Element des Slider-Leuchtkastens zu bearbeiten, das dieselbe Klasse wie das Widget hat, müssen Sie die id #es-slider verwenden und daneben die Klasse hinzufügen, die Sie benötigen, um sich vom Widget zu unterscheiden. Um zum Beispiel das Foto des Rezensenten zu bearbeiten, können Sie die Klasse #es-lightbox-slider .es-avatar verwenden, um die Position des Fotos nur im Slider-Leuchtpult zu ändern:
#es-lightbox-slider .es-avatar {margin-bottom: -30px; top: -40px; position: relative; overflow: visible; margin-left: 0; }
Verwenden Sie .es-lightbox-box, um die Farbe, den Radius des Rahmens oder das Padding im Slider-Popup zu bearbeiten:
.es-lightbox-box { position: relative; padding: 0 40px 40px; background-color: #FFFFFF; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: visible; margin-top: 80px; }
Schieberegler lightbox reviewer photo size:
Wir verwenden zwei Klassen für das Rezensentenfoto: .avatar75 als allgemeine Klasse und .avatar100 für den Leuchtkasten-Slider. Um also die Größe des Rezensentenfotos im Leuchtkasten zu bearbeiten, bearbeiten Sie die Klasse .avatar100:
.avatar-100 { width: 100px; height: 100px; }
Vertikales Leuchtpult
Bitte beachten Sie: Um ein beliebiges Element des vertikalen Leuchtkastens zu bearbeiten, das die gleiche Klasse wie im Widget hat, müssen Sie die id #es-vertical verwenden und daneben die Klasse hinzufügen, die sich von der des Widgets unterscheiden soll.
Verwenden Sie die id #es-vertical, wenn Sie die Hintergrundfarbe bearbeiten wollen:
#es-vertical { background: #FFFFFF;}
Andere Klassen, die für den vertikalen Leuchtkasten spezifisch sind, sind die folgenden:
Oberer Bewertungsbereich
Verwenden Sie .es-rating-box, um den Bewertungshintergrund und die Polsterung zu bearbeiten oder Rahmen hinzuzufügen:
.es-rating-box { padding: 30px 20px; }
Fortschrittsbalken
Verwenden Sie .es-bar-stars, um die Farbe der Fortschrittsbalken im Bewertungsbereich zu bearbeiten:
.es-bar-stars { background-color: #0081FF; border-radius: 8px; height: 12px; }
Durchschnittliche Bewertungszahl
Verwenden Sie die Klasse .es-rating-number, um die Größe oder Farbe der Bewertungsnummer zu bearbeiten.
Sterne unter der Bewertungsnummer
Verwenden Sie die Klasse .es-rating-stars, um den Rand oder die Polsterung dieser Sterne zu bearbeiten.
Wenn Sie Fragen haben oder zusätzliche Hilfe benötigen, können Sie sich gerne an uns wenden und mit uns chatten oder uns eine E-Mail an support@embedsocial.com senden
Wir helfen Ihnen gerne weiter.