Can someone assist me with the CSS for changing the size of the circle rating / star rating?
Please see the pdf attachment for more details.
Thanks!
Hi @george-l,
Use this CSS code:
#wpd-post-rating .wpd-rating-wrap .wpd-rating-value {
width: 45px;
height: 45px;
display: flex;
flex-direction: column;
justify-content: center;
}
#wpd-post-rating .wpd-rating-wrap .wpd-rating-value:hover .wpdrc{
display:none !important;
}
#wpd-post-rating .wpd-rating-wrap .wpd-rating-value .wpdrv {
font-size: 15px !important;
}
Put the code in the Top Admin Bar > Customize > Additional CSS > "Additional CSS" textarea, save it, delete all caches and check again.
Note: The red marked values can be changed as you like.Â
Please don't forget to press Ctrl+F5 (twice) on the frontend before checking.
Hi @asti,
The 1st block of CSS did make the circle smaller, but I had to add !important to the height and width declarations. There is a problem though. When I hover over the circle and it changes to the number of votes and dark background, the bottom of the dark background circle is squared off. Maybe the container that holds the circle needs to be lower?
What is the 2nd block of CSS supposed to do?
Is the 3rd block supposed to decrease the text size of the average score and number of votes? It did not.
Thanks,
George
Please read my answers below:
What is the 2nd block of CSS supposed to do?
The code is supposed to solve this issue:
When I hover over the circle and it changes to the number of votes and dark background, the bottom of the dark background circle is squared off.
div#primary .wpd-rating .wpd-rating-wrap .wpd-rating-value:hover .wpdrc {
display: none !important;
}
Is the 3rd block supposed to decrease the text size of the average score and number of votes? It did not.
Yes, it should change the font-size of the element. Try this one:
div#primary .wpd-rating .wpd-rating-wrap .wpd-rating-value .wpdrv{
font-size: 13px !important;
}
Hi @asti,
Almost there.
div#primary .wpd-rating .wpd-rating-wrap .wpd-rating-value:hover .wpdrc {
display: none !important;
}
The above code does fix the bottom of the dark background circle, but when I hover over it, I see the word vote instead of a number representing how many people voted.
Thanks,
George
Yes, that is a simple solution we can provide you. If you want to keep both in case of small-heigh div, you should write more CSS codes.
We're really sorry but this requires custom CSS coding and it depends on different dynamic conditions, this is not a stable color and doesn't have a simple solution. Please note, that we don't provide support for style customization, we may help in 1-2 simple questions related to colors and background but not more. We can not help you customize all components of website style, these are custom requirements and should be done by website owners. We only help with general questions and issues.
Thank you for your understanding.
You can find all classes by pressing F12 on the browser and opening Chrome or Firefox Console.
