How to Style WP Business Reviews Displays with CSS Snippets

WP Business Reviews beautifully displays your reviews on your site by default, but you can get even more control over the style with these simple CSS snippets.

In general, WPBR is created to flawlessly present its own styles with whatever theme you’re using. It has a built-in editor with 3 style choices, but you might want to alter your designs a bit to match your brand colors or get creative. We’ve already shown you how you can rearrange your galleries using CSS Grid. You can also make many other adjustments to all the display styles with basic CSS snippets.

If you need help getting started using CSS, there are many resources available online to help. There’s a great beginner course available on w3schools.com. I learned to use CSS pretty much in a single night, but it takes time to really get good at it.

It’s also important to note that we purposefully created WPBR styles to be hard to alter. This makes our plugin compatible with a wider range of themes. So in order to select the right element, you will need to use a high level of specificity and (most likely) a lot of !important tags.

Depending on which style you choose when you set up your collections, these CSS snippets will change. To use the snippets below, select the “light” style setting for your WP Business Reviews Collections. This will make your containers white with dark text by default.

Basic Components of WP Business Reviews

Your WPBR reviews collections and single reviews can be targeted in various ways using CSS. If you want to change simple things, like the color of the reviewer name, the container outlines, etc., here are the basic selectors for WP Business Reviews.

Wrap Containers

The wrap is the external container for your reviews and is separate from the review containers. It holds the review containers inside, housing single reviews and collections.

.wpbr-wrap {
	background-color: #023f72;
	padding: 15px;
	border-radius: 3px;
}

Review Containers

Review containers hold the review content, reviewer name, date/time, etc. These are white in the “light” setting, black in the “dark” setting, and transparent with the “transparent” setting.

.wpbr-review {
	background: rgba(250, 250, 250, .9) !important;
	border: none !important;
}

Reviewer Name

You can match your reviewer name to the color and font-family of your headings with this selector.

.wpbr-review__reviewer-name {
	color: white !important;
	font-family: times;
}

Review Content

Change the color of the review content to stand out on your new background color or match your theme colors. You can change the font-family to match your theme here as well.

.wpbr-review__content > p {
	color: white !important;
	font-family: times;
}

Carousel Pagination Bullets

Carousel pagination bullets are blue by default, but you can customize them to be any color you want.

span.swiper-pagination-bullet {
	background-color: white !important;
}

Recommends Text

The recommends text only appears on Facebook reviews. If you choose to change it, this is the selector to use. You can also alter the font-family here.

span.wpbr-reco__text {
	color: rgba(250, 250, 250, .7);
}

Date/Time Stamp

Your date and time stamp is customized with this snippet. Make sure you use a color that is bold enough and a font-family that is easy to read for the small font.

span.wpbr-review__timestamp {
	color: rgba(250, 250, 250, .4) !important;
}

Customizing Collections to Match Each Other

Let’s say you want all of your reviews layouts to look similar with one color background, containers with shadows, and coloring to match your brand. Generally, WPBR collections all do look similar but you might have a different style in mind. Here’s one that we’ve come up with to help all your reviews look like standalone containers with shadowing on a yellow background.

Start with these styles for your basic WPBR components, then add the styling for each type of collection using more specific code below.

/*BASE DOCUMENT STYLES*/

/*Reviews Background*/

.wpbr-wrap {
	background-color: #EACE7A;
	padding: 15px;
	border-radius: 3px;
}

/*Reviewer Name*/

.wpbr-review__reviewer-name {
	color: #023f72 !important;
}

/*Review Content*/

.wpbr-review__content > p {
	color: black !important;
}

/*Carousel Pagination Bullets*/

span.swiper-pagination-bullet {
	background-color: #023f72 !important;
}

Because every collection is designed differently, we have to style each collection presentation format separately. The next few snippets are for each collection format (lists, galleries, and carousels). In the end, they will all look the same but with their individual layouts.

Galleries 

Each single review shortcode is also styled using the gallery display selector, so anything you change using this selector will also apply to your single reviews. Once you’ve added this snippet to the code we provided above, your galleries and single reviews will have blue outlines with shadowing.

div.wpbr-collection--gallery > .wpbr-collection__item {
	border: 1px solid #023f72 !important;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, .4);
	border-radius: 5px;
}

Carousels 

The targeting for carousel containers requires a level deeper with the specificity to hit the right element for the outline and shadowing. Instead of adding the border and box-shadow to the collection item, here you add it to the review.

div.wpbr-collection--carousel > .wpbr-collection__item > .wpbr-review {
	border: 1px solid #023f72 !important;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, .4);
	border-radius: 5px;
}

Lists 

Usually, the list backdrop is continuous and the reviews don’t appear to have separate containers. This next CSS snippet makes sure that your reviews presented in lists are visually divided and contained in the same containers as the other formats.

.wpbr-collection--list {
	background: transparent !important;
	border: none !important;
}

.wpbr-collection--list > .wpbr-collection__item {
	background: white;
	padding: 30px;
	border: 1px solid #023f72 !important;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, .4);
	border-radius: 5px;
}

Customizing Collections to Look Different

Let’s say you want to use reviews everywhere, make them look different, and attract the eye with an awesome design. You can customize WPBR even further to reflect different designs for different formats. How creative you get really depends on your CSS skills.

Start with these basic components, then add the rest of the elements in this section to customize each collection format. Keep in mind, there are still settings to make the background transparent and the font color white, but we started with all of our reviews set on “light.”

/*BASE DOCUMENT STYLES*/

/*Reviews Container Background*/

.wpbr-wrap {
	background-color: #023f72;
	padding: 15px;
	border-radius: 3px;
}

/*Review Container*/ 

.wpbr-review {
	background: transparent !important;
	border: none !important;
}

/*Reviewer Name*/

.wpbr-review__reviewer-name {
	color: white !important;
}

/*Review Content*/

.wpbr-review__content > p {
	color: white !important;
}

/*Recommends Text*/ 

span.wpbr-reco__text {
	color: rgba(250, 250, 250, .7);
}

/*Date/Time Stamp*/ 

span.wpbr-review__timestamp {
	color: rgba(250, 250, 250, .4) !important;
}

/*Carousel Pagination Bullets*/

span.swiper-pagination-bullet {
	background-color: white !important;
}

Galleries 

Galleries will also change your single reviews style, so the single review shown above would actually change to look like the reviews below when you add this snippet.

div.wpbr-collection--gallery > .wpbr-collection__item {
	border: 1px solid #023f72 !important;
	border-radius: 5px;
	background-color: rgba(250, 250, 250, .1);
}

Lists

While your galleries have visible containers, you might not want your lists to have them. You can style the lists separately to look like a list with dividers with this snippet.

.wpbr-collection--list {
	background: transparent !important;
	border: none !important;
}

.wpbr-collection--list > .wpbr-collection__item {
	padding: 30px;
	border: 1px solid #023f72 !important;
	border-radius: 5px;
	border-bottom: 1px solid white !important;
}

Carousels

When targeting only the carousel contents, things get a little more complicated. There’s more involved in selecting each piece, but it produces another layout style that makes your carousels look much different yet still similar to your other reviews collection formats.

div.wpbr-collection--carousel > .wpbr-collection__item > .wpbr-review {
	border: 1px solid #023f72 !important;
	border-radius: 5px;
	background-color: rgba(250, 250, 250, .9) !important;
}

div.wpbr-collection--carousel > .wpbr-collection__item > .wpbr-review > .wpbr-review__content > p {
	color: #023f72 !important;
}

div.wpbr-collection--carousel > .wpbr-collection__item > .wpbr-review > .wpbr-review__header > .wpbr-review__details > .wpbr-review__reviewer-name {
	color: #023f72 !important;
}

.wpbr-collection--carousel > .wpbr-collection__item > .wpbr-review > .wpbr-review__header > .wpbr-review__details > .wpbr-review__reco > .wpbr-reco > .wpbr-reco__text {
	color: #023f72;
}

.wpbr-collection--carousel > .wpbr-collection__item > .wpbr-review > .wpbr-review__header > .wpbr-review__details > .wpbr-review__timestamp {
	color: #585858 !important;
}

Now Show Us Your Style

There are so many different ways that you can style WP Business Reviews, we can’t possibly show them all here. We’d love to see how you choose to customize WP Business Reviews. If you think you’ve got a great style let us know in the comments!