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:

go to your WordPress Administration panel

Click on “Purple Heart Rating” in the navigation menu.

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:

CSS

1

2

3

4

.wpbph-button-more {

background-color:green!important;

}

Remove rounded corners of the buttons

Change the border-radius of the buttons

CSS

1

2

3

.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

CSS

1

2

3

4

5

button.wpbph-button-ok,

button.wpbph-button-bad {

width:60px!important;

font-size:18px!important;

}

Remove border of the rating area

CSS

1

2

3

.wpbph-frontend .wpbph-rating {

border:none!important;

}

The size of the big icon

Resize the big icon

CSS

1

2

3

.wpbph-heart-big {

font-size:50px;

}

The size of the percentage

Size of the percentage

CSS

1

2

3

.wpbph-value {

font-size:20px!important;

}

Popover Title

Make the popover-title blue

CSS

1

2

3

.wpbph-info-cell .popover-title {

color:blue;

}

Margin on top and bottom

CSS

1

2

3

.wpbph-info, .wpbph-rating {

margin-top:50px;

}

Different color for the copyright information

CSS

1

2

3

.wpbph-frontend .wpbph-copyright-info a {

color:#cccccc!important;

}

Hide the Down-Button

No down button for the rating plugin

CSS

1

2

3

.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

CSS

1

2

3

4

.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

Change the color of the comments buttons of the Purple Heart Rating Plugin