Para personalizar os widgets de comentários na plataforma EmbedReviews, pode usar o campo CSS personalizado e aplicar as classes com a alteração nos seus atributos.

Como aplicar CSS personalizado?

Por exemplo, se precisar de tornar o título maior do que 24px, basta adicionar a classe .es-title no campo Custom CSS e escrever font-size:30px.

Aqui está um guia passo a passo:

E pronto.

Abaixo está a lista das classes utilizadas em todos os widgets de avaliações que pode adicionar no campo CSS personalizado e alterar os respectivos atributos de estilo.

Classes gerais para TODOS os widgets de avaliações

Para editar qualquer parte do widget de avaliações, use o campo:

Título do widget

Use a classe .es-title para editar o tamanho da fonte ou a cor do título do widget:

Cabeçalho do widget

Utilize a ID #es-header para editar o alinhamento do texto do cabeçalho e a margem inferior:

Caixa de revisão (fundo e contorno)

Utilize a classe es-box para editar a cor do fundo e do rebordo da área de revisão:

Nome do revisor

Utilize a classe .es-username para editar o tamanho do tipo de letra ou a cor do nome do avaliador:

Foto do revisor

Utilize a classe .es-avatar para editar o raio do limite e a posição da fotografia do avaliador. O exemplo abaixo serve para ajustar a fotografia para que apareça como um círculo. Se precisar de a tornar quadrada, basta definir o atributo border-radius para 9%:

Utilize a classe .avatar-75 para editar o tamanho da fotografia do revisor:

Estrelas

Utilize a classe .es-stars para editar a margem ou a posição das estrelas:

Utilize a classe .es-stars svg para editar o tamanho das estrelas. Por exemplo:

Rever texto

Utilize a classe .es-text para editar o tamanho ou a cor do texto de revisão. Se precisar de alterar o tamanho do texto, basta adicionar o atributo font-size. Por exemplo: font-size:12px (para um tamanho de letra mais pequeno) ou font-size:20 (para um tamanho de letra maior):

Rever data

Utilize a classe .es-date para editar o tamanho do tipo de letra e a cor da data de revisão:

Logótipo de origem

Utilize a classe .es-logo para editar a posição do logótipo/ícone de origem:

Utilize a classe .es-logo svg para editar o tamanho do ícone:

----

Classes CSS da lightbox

Slider lightbox

Atenção: para editar qualquer elemento da caixa de luz deslizante que tenha a mesma classe que no widget, é necessário utilizar o id #es-slider e adicionar ao lado a classe que pretende que seja diferente da do widget. Por exemplo, para editar a fotografia do revisor, pode utilizar a classe #es-lightbox-slider .es-avatar para alterar a posição da fotografia apenas na lightbox deslizante:

Utilize .es-lightbox-box para editar a cor, o raio da margem ou o preenchimento no popup da barra deslizante:

Tamanho da foto do avaliador da caixa de luz deslizante:

Utilizamos duas classes para a fotografia do avaliador: .avatar75 como classe geral e .avatar100 para o seletor da lightbox. Assim, para editar o tamanho da fotografia do avaliador na lightbox, edite a classe .avatar100:

Caixa de luz vertical

Nota: para editar qualquer elemento da lightbox vertical que tenha a mesma classe que no widget, tem de utilizar o id #es-vertical e adicionar ao lado a classe que pretende que seja diferente da do widget.

Utilize o id #es-vertical se quiser editar a cor de fundo:

Outras classes que são específicas para a lightbox vertical são as seguintes:

Área de classificação superior

Utilize .es-rating-box para editar o fundo da classificação, o preenchimento ou adicionar margens:

Barras de progresso

Utilize .es-bar-stars para editar a cor das barras de progresso na área de classificação:

Número de classificação média

Use a classe .es-rating-number para editar o tamanho ou a cor do número da classificação.

Estrelas abaixo do número da classificação

Use a classe .es-rating-stars para editar a margem ou preenchimento dessas estrelas.