CusRev Helpdesk

If you enable the Q & A feature of our plugin, you will notice that there are several icons in the Q & A section, such as:

• Thumbs up and down buttons for voting
• Store manager icon
• Verified customer icon
• Question icon
• Answer icon

By default, these icons have standard colors. However, it is possible to change their colors with custom CSS code. Let's see how to include additional CSS code to your WordPress theme that will overwrite the default colors of icons.

Preparation

The first step is to open the toolbar to customize visual appearance of your theme. You should click on the Customize button as shown below to open it.

Next, click on the Additional CSS node of the toolbar as shown on the screenshot below.

It will open a special field where we can insert any custom CSS code to customize visual appearance of different elements on the product page.

Change Color of Thumbs Up and Down Buttons for Voting

If you would like to change color of the voting buttons, then it is necessary to add the following CSS code. In this example, we assumed that you would like to change the colors to blue. However, it is just an example. You can replace blue with any other color code that you prefer.

.cr-voting-cont-uni span.cr-voting-upvote svg .cr-voting-svg-ext {
fill: blue;
}
.cr-voting-cont-uni span.cr-voting-downvote svg .cr-voting-svg-ext {
fill: blue;
}
.cr-voting-cont-uni span.cr-voting-upvote.cr-voting-active svg .cr-voting-svg-int {
    fill: blue;
    fill-opacity: 0.4;
}
.cr-voting-cont-uni span.cr-voting-downvote.cr-voting-active svg .cr-voting-svg-int {
    fill: blue;
    fill-opacity: 0.4;
}
.cr-voting-cont-uni span.cr-voting-upvote-count {
    color: blue;
}
.cr-voting-cont-uni span.cr-voting-downvote-count {
    color: blue;
}

After you add the CSS code, the voting buttons will change their color to blue as can be seen on the screenshot below.

That's it! Please don't forget to Publish the changes after you are satisfied with the visual appearance of the voting buttons.

Change Colors of Store Manager and Verified Customer Icons

If you would like to change color of the store manager and verified customer icons, then it is necessary to add the following CSS code. In this example, we assumed that you would like to change the colors to blue. However, it is just an example. You can replace blue with any other color code that you prefer.

.cr-qna-block .cr-qna-list-block .cr-qna-list-q-cont .cr-qna-list-v-icon path {
	stroke: blue;
}

.cr-qna-block .cr-qna-list-block .cr-qna-list-q-cont .cr-qna-list-q-icon circle {
    stroke: blue;
}
.cr-qna-block .cr-qna-list-block .cr-qna-list-q-cont .cr-qna-list-q-icon path {
    fill: blue;
}
.cr-qna-block .cr-qna-list-block .cr-qna-list-q-cont .cr-qna-list-q-icon rect {
    fill: blue;
}