Pour personnaliser les widgets de revues dans la plateforme EmbedReviews, vous pouvez utiliser le champ Custom CSS et appliquer les classes avec la modification de leurs attributs.
Comment appliquer un Custom CSS?
Par exemple, si vous avez besoin de rendre le titre plus grand que 24px, ajoutez simplement la classe .es-title dans le champ CSS personnalisé et tapez font-size:30px.
Voici un guide étape par étape:
Dans le panneau des paramètres, naviguez jusqu'à la case Custom CSS
Tapez .es-title {font-size:30px;}
Cliquez sur le bouton "Save" en haut à droite.
Le tour est joué.
Vous trouverez ci-dessous la liste des classes utilisées dans tous les widgets d'avis que vous pouvez ajouter dans le champ Custom CSS et modifier leurs attributs de style.
Classes générales pour TOUS les widgets d'avis
Pour modifier n'importe quelle partie du widget d'avis, utilisez le champ:
Titre du widget
Utilisez la classe .es-title pour modifier la taille de la police ou la couleur du titre du widget:
.es-title {color : #000000 ; font-size : 24px;}
En-tête du widget
Utilisez l'ID #es-header pour modifier l'alignement du texte de l'en-tête et la marge inférieure:
#es-header{text-align : center ; margin-bottom : 50px;}
Boîte de révision (arrière-plan et bordure)
Utilisez la classe es-box pour modifier la couleur de l'arrière-plan et de la bordure de la zone d'examen:
.es-box { background-color : #FFFFFF ; padding : 25px ; width : 100% ; border-radius : 8px ; border : 1px solid #D6DAE4 ; overflow : hidden ; position : relative ; }
Nom du réviseur
Utilisez la classe .es-username pour modifier la taille de la police ou la couleur du nom de l'évaluateur:
.es-username {color : #000000 ; font-size : 18px ; line-height : 25px ; word-break : break-word ; font-weight : 600 ; margin-bottom : 15px;}
Photo du réviseur
Utilisez la classe .es-avatar pour modifier le rayon de la bordure et la position de la photo de l'évaluateur. L'exemple ci-dessous permet d'ajuster la photo pour qu'elle apparaisse sous la forme d'un cercle. Si vous souhaitez qu'elle soit carrée, il vous suffit de définir l'attribut border-radius à 9%:
.es-avatar {border-radius : 50%;}
Utilisez la classe .avatar-75 pour modifier la taille de la photo du réviseur:
.avatar-75 {width : 75px ; height : 75px ; }
Étoiles
Utilisez la classe .es-stars pour modifier la marge ou la position des étoiles.
.es-stars {margin-bottom:15px;}
Utilisez la classe .es-stars svg pour modifier la taille des étoiles. Par exemple, la classe:
.es-stars svg {height:30px ; width:30px;}
Révision du texte
Utilisez la classe .es-text pour modifier la taille ou la couleur du texte du commentaire. Si vous souhaitez modifier la taille du texte, il vous suffit d'ajouter l'attribut font-size. Par exemple : font-size:12px (pour une taille de police plus petite) ou font-size:20 (pour une taille de police plus grande):
.es-text {line-height : 1.5 ; word-break : break-word ; margin-bottom : 20px ; color : #000000;font-size:15px;}
Date de révision
Utilisez la classe .es-date pour modifier la taille de la police et la couleur de la date de révision:
.es-date {font-size : 12px ; color : #9CA0AC ; display : inline-block;}
Logo de la source
Utilisez la classe .es-logo pour modifier la position du logo/de l'icône source :
.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%;}
Utilisez la classe .es-logo svg pour modifier la taille de l'icône:
.es-logo svg {width : 20px ; height : 20px;}
----
Classes CSS pour les boîtes lumineuses
Slider lightbox
Remarque : pour modifier un élément du slider lightbox qui a la même classe que le widget, vous devez utiliser l'identifiant #es-slider et ajouter à côté la classe dont vous avez besoin pour être différent du widget. Par exemple, pour modifier la photo de l'évaluateur, vous pouvez utiliser la classe #es-lightbox-slider .es-avatar pour modifier la position de la photo uniquement dans le slider lightbox:
#es-lightbox-slider .es-avatar {margin-bottom : -30px ; top : -40px ; position : relative ; overflow : visible ; margin-left : 0 ; }
Utilisez .es-lightbox-box pour modifier la couleur, le rayon de la bordure ou le remplissage de la fenêtre contextuelle du curseur:
.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 ; }
Slider lightbox taille de la photo de l'évaluateur
Nous utilisons deux classes pour la photo de l'évaluateur: .avatar75 comme classe générale et .avatar100 pour le slider lightbox. Ainsi, pour modifier la taille de la photo de l'évaluateur dans la fenêtre d'affichage, modifiez la classe .avatar100 :
.avatar-100 { width : 100px ; height : 100px ; }
Boîte à lumière verticale
Remarque: pour modifier un élément de la visionneuse verticale qui a la même classe que le widget, vous devez utiliser l'identifiant #es-vertical et ajouter à côté la classe dont vous avez besoin pour être différent du widget.
Utilisez l'identifiant #es-vertical si vous souhaitez modifier la couleur d'arrière-plan:
#es-vertical { background : #FFFFFF;}
Les autres classes spécifiques à la boîte à lumière verticale sont les suivantes:
Zone d'évaluation supérieure
Utilisez .es-rating-box pour modifier l'arrière-plan de l'évaluation, le rembourrage ou ajouter des bordures:
.es-rating-box { padding : 30px 20px ; }
Barres de progression
Utilisez .es-bar-stars pour modifier la couleur des barres de progression dans la zone de classement :
.es-bar-stars { background-color : #0081FF ; border-radius : 8px ; height : 12px ; }
Numéro de note moyen
Utilisez la classe .es-rating-number pour modifier la taille ou la couleur du numéro de note.
Étoiles en dessous du numéro de note
Utilisez la classe .es-rating-stars pour modifier la marge ou le remplissage de ces étoiles.
Si vous avez des questions ou avez besoin d'aide supplémentaire, n'hésitez pas à nous contacter et à discuter avec nous ou à nous envoyer un e-mail à support@embedsocial.com
Nous sommes heureux de vous aider.