[Advice] Styling the plugin

Rate my Post allows you to easily change colors, font sizes, margins and more in the settings. However, sometimes this is not enough and below are some CSS snippets that will help you apply additional styles. Furthermore, you will also find fixes for the most common problems at the bottom. If you don’t know how to add custom CSS to your website, first read this blog post: https://en.support.wordpress.com/custom-design/editing-css/. If you need help, don’t hesitate to contact me through the support forum ??

1. Change stars color in rating widget

.rating-stars ul > li.star > i.fa {
    font-size: 2.5em;
    color: #e6e6ff; /* Stars color */
    cursor: pointer;
}

.half-icon-highlight i {
    background: linear-gradient(to right, #ffe699 50%,#e6e6ff 50%); /* Insert both, stars color and stars highlight color */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

2. Change stars color in results widget

.rmp-results .star-result .fa {
    color: green;
}

.rmp-results .star-result .fa.star-half-highlight {
    background: linear-gradient(to right, #FF912C 50%,green 50%); /* Insert both, stars color and results color */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

3. Change text area width in feedback widget

.rmp-text-area {
    min-width: 100%; /* Width of text area */
}

4. Change Submit Feedback button

button#feedback-button {
    height: 70px;
    padding: 10px;
    width: 250px;
    margin: 1em auto;
    background-color: #FEB1C0;
    border: none;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5em;
}

button#feedback-button:hover {
    cursor: pointer;
    background-color: blue;
}

5. Change social icons in social widget

/* Make them square */ 
.rmp-social-view .social-icons .rmp-social-icon {
    padding: 10px;
    font-size: 20px;
    width: 40px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 0%;
    -webkit-transition-property: none;
    -moz-transition-property: none;
    -o-transition-property: none;
    transition-property: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* Change color of fb icon */ 
.fa-facebook.rmp-social-icon {
    background: black;
    color: blue;
}

Common Fixes

The plugin uses FontAwesome instead of images (stars and social icons) because FontAwesome has several advantages over images:

• It’s easy to style
• It’s Retina ready
• It has a performance advantage

FontAwesome can be overridden with CSS . Below are the common fixes if this happens.

1. Social Icons are not appearing

a.fa.rmp-social-icon {
    font-family: FontAwesome!important;
}

2. Stars in rating widget are not appearing

.rating-stars ul > li.star > i.fa {
    font-family: FontAwesome!important;
}

3. Stars in results widget are not appearing

.rmp-results .star-result .fa {
    font-family: FontAwesome!important;
}

• This topic was modified 5 years, 10 months ago by Blaz K..