Is there a way for me to move the Rating (5 stars) to the top or bottom of an article/video rather than only displaying it to the side in a sidebar?
The sidebar takes up so much space on the page, so I have turned it off, but I would like to get feedback on individual articles/videos.
So, any options for displaying above or below?
Solved
Move Rating?
Best answer by LisaRollins
I am talking to myself here, but since I can’t delete a post, I can at least share what I finally figured out. lol!
I did a lot of back and forth with Gemini to help me and we finally settled on this code to get this result - the ratings option off to the right and above the content.
.article-sidebar {
width: 100%;
padding-top: 10px;
padding-left: 20%; /* Add some left padding to create space on the left */
text-align: right; /* Align content to the right */
box-sizing: border-box;
}
.article-sidebar__rating { /* Target the rating element directly for right placement */
display: inline-block; /* Allows width/margin on the right */
margin-left: auto; /* Push to the right within the sidebar */
}
.article-content {
width: 100%;
padding: 0 5%;
}
Okay...I was playing around with the CSS to remove it and figured it out!
Here is the code and what it looks like. There may be a cleaner way to do this, but this is what I ended up with!
/*Move Rating from Sidebar to Top Right in Articles*/
.article-sidebar {width:before; width:100%; padding: 0 90%;}
.article-content {width:100%; padding: 0 5%;}
However, now when someone clicks to rate, it ends up looking like this after they rate the content…
Thoughts?
I am talking to myself here, but since I can’t delete a post, I can at least share what I finally figured out. lol!
I did a lot of back and forth with Gemini to help me and we finally settled on this code to get this result - the ratings option off to the right and above the content.
.article-sidebar {
width: 100%;
padding-top: 10px;
padding-left: 20%; /* Add some left padding to create space on the left */
text-align: right; /* Align content to the right */
box-sizing: border-box;
}
.article-sidebar__rating { /* Target the rating element directly for right placement */
display: inline-block; /* Allows width/margin on the right */
margin-left: auto; /* Push to the right within the sidebar */
}
.article-content {
width: 100%;
padding: 0 5%;
}
Hi Lisa,
Slightly related but not your exact ask - I had to hide the sidebar completely for some of our content recently. Here is the code to hide the entire sidebar or just the rating:
.article-sidebar {
display: none !important;
}
.text-center.article-sidebar__rating {
display: none !important;
}
Sign up
Already have an account? Login
All log-in's are now via TI SSO
Click here to access the SSO pageEnter your E-mail address. We'll send you an e-mail with instructions to reset your password.