If you've enabled the Q&A feature of the Customer Review plugin, then you must have seen the big green "Ask a question" button that comes in one color and has no option to customize it on the plugin settings page.
If you've ever wondered how to change the color or even size of that button, well, wonder no more. There's a way to customize the button size and color, but you'll need to add a piece of code to the "Additional CSS" section of your WordPress theme, i.e. Appearance > Customize > Additional CSS.
Customizing the 'Ask a question' button
Paste the following code to the Additional CSS box, then change the value of background-color to whatever color you prefer, i.e. background-color: blue, background-color: red, or even background-color: #18B394. Changing the value of color will change the color of the button's text, and you can customize that also. Here's the CSS code you need to change the color of the 'Ask a question' button:
#cr_qna.cr-qna-block div.cr-qna-search-block button.cr-qna-ask-button {
background-color: green !important;
color: yellow !important;
}What else can you change? A whole lot. For example, you could change the height of the button or even the font size of the button's text. Here's a non-exhaustive list of properties that could be used to customize the button:
| CSS Property | Description | Example |
|---|---|---|
| height | Used to change the height of the button | height: 42px; |
| font-size | Used to change the font size of the button's text | font-size: 16px; |
| font-weight | Used to change the weight of the button's text | font-weight: 400; |
| background-color | Used to change the color of the button's text | background: #18B394; |
| border | Used to add a border to the button | border: 0px solid; |
| border-radius | Used to add a radius (curve) to the button | border-radius: 16px; |
| border-color | Used to change the color of the button's border | border-color: grey; |
| color | Used to change the color of the button's text | color: #FFFFFF; |
Here's an example code that could be edited to meet your requirement:
#cr_qna.cr-qna-block div.cr-qna-search-block button.cr-qna-ask-button {
font-size: 14px !important;
font-weight: 150 !important;
background-color: black !important;
border: 0px solid !important;
border-color: grey !important;
border-radius: 10px !important;
height: 42px !important;
color: #FFFFFF !important;
}Final words
Always remember that you're just one click away from getting the stellar support that you deserve.