Customising your review widget – mypresences

Do you want to change something about your review widget?

Change the font size?

Change the font?

Make the reviews smaller?

Change the background?

The good news is that the myPresences review widgets are the most customisable on the market and you can change nearly everything about them.

It is very quick and easy to change the look and feel of your review widgets to better suite your website.

This can be done using the Custom CSS field for your widget. Enter your custom CSS and press Save and the next refresh of your page will show your changes.

Update the CSS for your widget

The custom CSS is configurable for each widget. This allows you to have a completely different look in different places and allows you to have different CSS for different widget types (eg. Popup vs List).

To set the css for your widget:

Go to the Showcase Widget page.
Select the widget from the top dropdown.
Type or paste the CSS code into the Custom CSS control.
Press Save at the top of the page to save the widget.
The example widget that appears on the page (either below or as a popup) will show your changes.
Refresh the page your widget is on to see the changes.

Widget CSS

myPresences widget css classes begin with mp___ (mp followed by 3 underscores).

To customise different parts of the widget use the following CSS classes.

.mp___reviewContainer	The container of the review. You can change this to make the review bigger or smaller.
.mp___reviewcontent	The content of the review.
.mp___reviewDate	The date for the review.
.mp___reviewheader	The header row for the review. Contains the Date, the reviewer and the rating.
.mp___reviewRating	The rating stars for the review.
.mp___reviewer	The reviewer section in the review header. This contains the reviewers image and name when available.
.mp___reviewReviewer	The reviewer name for the review.
.mp___reviewtitle	The title of the review (only supported on some review services)
.mp___serviceLogo	The logo for the service where the review was left.

You can use these css classes to:

Change font size
Change colours
Hide content you don't want to see.
Make the reviews larger or smaller.

Common Customisations

Change the Font size of the Review Text

Set the font-size to the value that works for you.

.mp___reviewcontent {

font-size: 20px;

}

Changing the Width of the Popup Widget

If the popup widget is too wide and is obscuring your content you can make decrease the width.

.mp___reviewContainer {

width: XX;

}

Where XX is the width of the container. The current width is 30 rem. Try reducing this number until the width of the popup is satisfactory.

Note: reducing the width may increase the height when the review contains more text.

Changing the size of the Service Logo

If the logo for the service the review was left on is too large you can change the size.

Please keep the width and height the same as most logos are square.

.mp___serviceLogo {
width: 40px;
height: 40px;
}

Remove The Service Logo

If you don't want to show the logo of the service where the review was left you should hide the column so that the review text can use that space.

.mp___reviewContentContainer {
grid-template-columns: none auto;
}

You should also hide the log with:

.mp___serviceLogo {
display: none;
}

This will make the first column (logo) no width and the second column (review text) auto width which will use all available space.

Change the size of the Star Rating

To make the star ratings bigger or smaller.

.mp___star-ratings-css {

font-size: <size>;

line-height: <size>;

height: <size>;

}

The default size is 1.5em (1.5 times bigger than the font size set on its parent). Size can be an size in pixels (16px) or other units such as rem or em.