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:
In the settings panel navigate to the Custom CSS box
Type .es-title {font-size:30px;}
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 following:
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 ID #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:
.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 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 have any questions or need additional assistance, please feel free to reach out and chat with us or send us an email at support@embedsocial.com
We're happy to help.