To customize reviews widgets in the EmbedReviews platform you can use the Custom CSS field and apply the classes with the change in their attributes.

How to apply custom CSS?

For example if you need to make the title larger than 24px, just add the class .es-title in the Custom CSS field and type the font-size:30px.

Here is a step by step guide

  1. In the settings panel navigate to the Custom CSS box
  2. Type .es-title {font-size:30px;}
  3. Click the top right 'Save' button

That's it.

Below is the list of the classes used in all reviews widgets that you can add in the Custom CSS field and change their style attributes.

General classes for ALL reviews widgets

To edit any part of the reviews widget use the

Widget title

Use the class .es-title to edit the font size or color of the widget title.

.es-title {color: #000000; font-size: 24px;}

Widget header

Use the class .es-header to edit the header text alignment and the bottom margin.

.es-header{text-align: center; margin-bottom: 50px;}

Review box (background and border)

Use the class es-box to edit the background and border color of the review area.

.es-box { background-color: #FFFFFF; padding: 25px; width: 100%; border-radius: 8px; border: 1px solid #D6DAE4; overflow: hidden; position: relative; }

Reviewer name

Use the class .es-username to edit the font size or color of the reviewer name .

.es-username {color: #000000; font-size: 18px; line-height: 25px; word-break: break-word; font-weight: 600; margin-bottom: 15px;}

Reviewer photo

Use the class .es-avatar to edit the border radius and position of the reviewer photo. The below example is to adjust the photo to appear as a circle. If you need to make it square just set the border-radius attribute to 9%

.es-avatar {border-radius: 50%;}

Use the class .avatar-75 to edit the reviewer photo size.

.avatar-75 {width: 75px; height: 75px; }

Stars

Use the class .es-stars to edit the margin or position of the stars.

.es-stars {margin-bottom:15px;}

Use class .es-stars svg to edit the size of the stars. For example:

.es-stars svg {height:30px; width:30px;}

Review text

Use the class .es-text to edit the size or color of the review text. If you need to change the text size just add the attribute font-size. For example: font-size:12px (for smaller font size) or font-size:20 (for larger font size)

.es-text {line-height: 1.5; word-break: break-word; margin-bottom: 20px; color: #000000;font-size:15px;}

Review date

Use the class .es-date to edit the font size and the color of the review date.

.es-date {font-size: 12px; color: #9CA0AC; display: inline-block;}

Source logo

Use the class .es-logo to edit the position of the source logo/icon.

.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%;}

Use the class .es-logo svg to edit the size of the icon.

.es-logo svg {width: 20px; height: 20px;}

----

Lightbox CSS classes

Slider lightbox

Please note: to edit any element of the slider lightbox that has the same class as in the widget you need to use the id #es-slider and add next to it the class you need to be different than the widget. For example, to edit the reviewer photo you can use the class #es-lightbox-slider .es-avatar to change the photo position only in the slider lightbox.

#es-lightbox-slider .es-avatar {margin-bottom: -30px; top: -40px; position: relative; overflow: visible; margin-left: 0; }

Use .es-lightbox-box to edit the color, border radius or padding in the slider popup.

.еs-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 reviewer photo size

We use two classes for the reviewer photo: .avatar75 as a general class and .avatar100 for the lightbox slider. So, to edit the reviewer photo size in the lightbox edit the class .avatar100.

.avatar-100 { width: 100px; height: 100px; }

Vertical lightbox

Please note: to edit any element of the vertical lightbox that has the same class as in the widget you need to use the id #es-vertical and add next to it the class you need to be different than the widget.

Use the id #es-vertical if you want to edit the background color.

#es-vertical { background: #FFFFFF;}

Other classes that are specific for the vertical lightbox are the following:

Top rating area

Use .es-rating-box to edit the rating background, padding or add borders.

.es-rating-box { padding: 30px 20px; }

Progress bars

Use .es-bar-stars to edit the color of the progress bars in the rating area.

.es-bar-stars { background-color: #0081FF; border-radius: 8px; height: 12px; }

Avarage rating number

Use the class .es-rating-number to edit the size or color of the rating number.

Stars below rating number

Use the class .es-rating-stars to edit the margin or padding of these stars.

If you need any further help with Custom CSS feel free to chat with us via Intercom or send us an email to: contact@embedsocial.com

Did this answer your question?