Para personalizar los widgets de reseñas en la plataforma EmbedReviews puedes utilizar el campo Custom CSS y aplicar las clases con el cambio en sus atributos.
¿Cómo aplicar CSS personalizado?
Por ejemplo, si necesitas que el título tenga un tamaño superior a 24px, sólo tienes que añadir la clase .es-title en el campo CSS personalizado y escribir font-size:30px.
Aquí tienes una guía paso a paso:
En el panel de configuración, vaya al cuadro Custom CSS.
Escriba .es-title {font-size:30px;}
Haz clic en el botón superior derecho "Save".
Ya está.
A continuación se muestra la lista de las clases utilizadas en todos los widgets de reseñas que puedes añadir en el campo Custom CSS y cambiar sus atributos de estilo.
Clases generales para TODOS los widgets de opiniones
Para editar cualquier parte del widget de valoraciones utiliza el campo:
Título del widget
Utilice la clase .es-title para editar el tamaño de la fuente o el color del título del widget:
.es-title {color: #000000; font-size: 24px;}
Encabezado del widget
Utilice el identificador #es-header para editar la alineación del texto de cabecera y el margen inferior:
#es-header{alineación-del-texto: centro; margen-inferior: 50px;}
Caja de revisión (fondo y borde)
Utilice la clase es-box para editar el color del fondo y del borde del área de revisión:
.es-box { color de fondo: #FFFFFF; padding: 25px; width: 100%; border-radius: 8px; border: 1px solid #D6DAE4; overflow: hidden; position: relative; }
Nombre del revisor
Utilice la clase .es-username para editar el tamaño de la fuente o el color del nombre del revisor:
.es-username {color: #000000; font-size: 18px; line-height: 25px; word-break: break-word; font-weight: 600; margin-bottom: 15px;}
Foto del reportero
Utilice la clase .es-avatar para editar el radio del borde y la posición de la foto del revisor. El siguiente ejemplo es para ajustar la foto para que aparezca como un círculo. Si necesita que sea cuadrada, establezca el atributo border-radius en 9%:
.es-avatar {radio del borde: 50%;}
Utiliza la clase .avatar-75 para editar el tamaño de la foto del revisor:
.avatar-75 {width: 75px; height: 75px; }
Estrellas
Utilice la clase .es-stars para editar el margen o la posición de las estrellas:
.es-stars {margin-bottom:15px;}
Utilice la clase .es-stars svg para editar el tamaño de las estrellas. Por ejemplo:
.es-stars svg {height:30px; width:30px;}
Revisar texto
Utilice la clase .es-text para editar el tamaño o el color del texto de la reseña. Si necesita cambiar el tamaño del texto, añada el atributo font-size. Por ejemplo: font-size:12px (para un tamaño de fuente menor) o font-size:20 (para un tamaño de fuente mayor):
.es-text {line-height: 1.5; word-break: break-word; margin-bottom: 20px; color: #000000;font-size:15px;}
Revisar fecha
Utilice la clase .es-date para editar el tamaño de la fuente y el color de la fecha de revisión:
.es-date {font-size: 12px; color: #9CA0AC; display: inline-block;}
Logotipo de la fuente
Utilice la clase .es-logo para editar la posición del logotipo/icono de la fuente:
.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%;}
Utilice la clase .es-logo svg para editar el tamaño del icono:
.es-logo svg {width: 20px; height: 20px;}
----
Clases CSS de lightbox
Caja de luz deslizante
Atención: para editar cualquier elemento del lightbox slider que tenga la misma clase que en el widget necesitas usar el id #es-slider y añadir a su lado la clase que necesites que sea diferente a la del widget. Por ejemplo, para editar la foto del revisor puedes usar la clase #es-lightbox-slider .es-avatar para cambiar la posición de la foto sólo en el slider lightbox:
#es-lightbox-slider .es-avatar {margin-bottom: -30px; top: -40px; position: relative; overflow: visible; margin-left: 0; }
Utilice .es-lightbox-box para editar el color, el radio del borde o el relleno en la ventana emergente del deslizador:
.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 revisor foto tamaño
Utilizamos dos clases para la foto del revisor: .avatar75 como clase general y .avatar100 para el slider lightbox. Así, para editar el tamaño de la foto del revisor en el lightbox editamos la clase .avatar100:
.avatar-100 { anchura: 100px; altura: 100px; }
Lightbox vertical
Nota: para editar cualquier elemento del lightbox vertical que tenga la misma clase que en el widget necesitas usar el id #es-vertical y añadir a su lado la clase que necesites que sea diferente a la del widget.
Usa el id #es-vertical si quieres editar el color de fondo:
#es-vertical { background: #FFFFFF;}
Otras clases que son específicas para el lightbox vertical son las siguientes:
Área de valoración superior
Utilice .es-rating-box para editar el fondo de la clasificación, el relleno o añadir bordes:
.es-rating-box { padding: 30px 20px; }
Barras de progreso
Utilice .es-bar-stars para editar el color de las barras de progreso en el área de valoración:
.es-bar-stars { background-color: #0081FF; border-radius: 8px; height: 12px; }
Número de calificación promedio
Utilice la clase .es-rating-number para editar el tamaño o color del número de calificación.
Estrellas debajo del número de calificación
Utilice la clase .es-rating-stars para editar el margen o relleno de estas estrellas.
Si tiene alguna pregunta o necesita ayuda adicional, no dude en comunicarse con nosotros y chatear con nosotros o enviarnos un correo electrónico a support@embedsocial.com
Estamos felices de poder ayudar.