Change the size of ...
 
Share:
Notifications
Clear all

[Solved] Change the size of the circle rating / star rating

8 Posts
2 Users
0 Likes
1,436 Views
Posts: 9
Topic starter
(@george-l)
Active Member
Joined: 4 years ago

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!

Topic Tags
7 Replies
Asti
Posts: 7056
 Asti
Support
(@asti)
Illustrious Member
Joined: 6 years ago

Hi @george-l,

The pdf file is missing. Please try to attach it again. 

Posts: 9
Topic starter
(@george-l)
Active Member
Joined: 4 years ago

Pdf attached.

Thanks

Asti
Posts: 7056
 Asti
Support
(@asti)
Illustrious Member
Joined: 6 years ago

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.

4 Replies
(@george-l)
Joined: 4 years ago

Active Member
Posts: 9

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

Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7056

@george-l,

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;
}
(@george-l)
Joined: 4 years ago

Active Member
Posts: 9

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

Asti
 Asti
Support
(@asti)
Joined: 6 years ago

Illustrious Member
Posts: 7056

@george-l,

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: