How to style the Rating Plugin

Yes. From version 1.5 it’s possible to add your custom styles to the plugin.

To add your custom styles:

  1. go to your WordPress Administration panel
  2. Click on “Purple Heart Rating” in the navigation menu.
  3. Scroll down to the “Custom CSS” field and enter your custom styles.

Here are some examples:

Green “What?”-Button with yellow text color

A green “What?”-Button

Enter the following to your Custom CSS-Field:

.wpbph-button-more {
background-color: green!important;

}

Remove rounded corners of the buttons

Change the border-radius of the buttons
.wpbph-button-ok, .wpbph-button-bad {
border-radius: 0!important;
}

Resize the buttons in width

Change the font-size and the width of the buttons
Change the font-size and the width of the buttons
button.wpbph-button-ok,
button.wpbph-button-bad {
  width: 60px!important;
  font-size: 18px!important;
}

Remove border of the rating area

.wpbph-frontend .wpbph-rating {
  border: none!important;
}

The size of the big icon

Resize the big icon
Resize the big icon
.wpbph-heart-big {
  font-size: 50px;
}

The size of the percentage

Size of the percentage
Size of the percentage
.wpbph-value {
  font-size: 20px!important;
}

Popover Title

Make the popover-title blue
Make the popover-title blue
.wpbph-info-cell .popover-title {
  color: blue;
}

Margin on top and bottom

.wpbph-info, .wpbph-rating {
  margin-top: 50px;
}

Different color for the copyright information

.wpbph-frontend .wpbph-copyright-info a {
  color: #cccccc!important;
}

Hide the Down-Button

No down button for the rating plugin
No down button for the rating plugin
.wpbph-button-bad {
  display: none;
}

Please note that hiding the down-button will result in the case that no one can downvote your rating. These can lead to the problem that the Rich Snippet on Googles search result will never show up (because you only get 100% rating on everything and Google will see through that).

Hide both buttons

Hide both buttons of the rating plugin
Hide both buttons of the rating plugin
.wpbph-button-bad,
.wpbph-button-ok {
  display: none;
}

Please note that hiding the down-button will result in the case that no one can downvote your rating. These can lead to the problem that the Rich Snippet on Googles search result will never show up (because you only get 100% rating on everything and Google will see through that).

Change the color of the buttons on comments

Purple Heart Comment Ratings
Change the color of the comments buttons of the Purple Heart Rating Plugin
.wpbph-comment-ok { color: green!important; }
.wpbph-comment-bad { color: red!important; }
span.wpbph-comment-ok { color: gray!important; }