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!
Search
Close
AI Search
Classic Search
Share:
Notifications
Clear all
Jul 13, 2020 10:18 pm
7 Replies
Jul 15, 2020 11:51 am
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.
Jul 15, 2020 10:31 pm
Translate
▼
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
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
Translate
▼
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
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;
}
Jul 18, 2020 1:51 am
Translate
▼
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
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
Translate
▼
English
Spanish
French
German
Italian
Portuguese
Russian
Chinese
Japanese
Korean
Arabic
Hindi
Dutch
Polish
Turkish
Vietnamese
Thai
Swedish
Danish
Finnish
Norwegian
Czech
Hungarian
Romanian
Greek
Hebrew
Indonesian
Malay
Ukrainian
Bulgarian
Croatian
Slovak
Slovenian
Serbian
Lithuanian
Latvian
Estonian
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.
Share:
