How to customise your Review Widget with CSS
Introduction on how to customize your widget with our custom CSS feature.
Santeri
Last Update 3 months ago
You can customize how the Review Widget looks with CSS via our Custom CSS feature. To get started, open a widget made with the Review Widget template or create one in the Widgets section.
Once the widget is open, navigate to the Custom CSS section at the bottom in the widget editor. Here you have a text box into which you can type your CSS.
Here's an example on how some CSS removing the border radius from the review cards would look like:
Full list of selectors
Here's a list of all the CSS selectors available for the Review Widget template with explanations.
Card
.tm-card-wrapper
Wrapper element for cards
.tm-video-card-wrapper
Extra class for video card wrapper
.tm-card
Card element
.tm-card-top
Element for card top
.tm-review-stars
Wrapper element for review stars
.tm-time
Relative time from the review creation
.tm-spacer
Element to fill space
.tm-source
Wrapper element for review source icon
.tm-source-logo
Element for review source icon
.tm-card-review
Wrapper element for text review
.tm-card-bottom
Wrapper element for card bottom
.tm-bottom-picture
Wrapper element for avatar
.tm-bottom-person
Wrapper element for person name and info
.tm-card-info
Wrapper element for info in the Name First card template
.tm-card-content
Wrapper element for the top & review in the review card
Text review
.tm-text-review
Wrapper for text review
.tm-text-review-inner
Inner container for text review content
.tm-text-review-more
Wrapper for show more text in text review
Video review
.tm-review-has-text
Extra class for .tm-card in video reviews with text reviews
.tm-video-review-wrapper
Wrapper element for video review
.tm-video-review
Video review
.tm-video-player
Player wrapper for video review
.tm-video-player-main
Main video element for video review
.tm-video-player-preview
Preview video element for video review
.tm-video-overlay
Wrapper for video review content
.tm-video-stars
Wrapper for stars in video review
.tm-video-play
Wrapper for play/pause icon
.tm-video-person
Person info in video review
List
.tm-list-wrapper
Wrapper element for list template
Masonry
.tm-masonry
Wrapper element for masonry
Carousel
.tm-carousel-wrapper
Wrapper element for carousel
Wall
.tm-wall
Wrapper element for wall
.tm-wall-track
Track of items in wall template
Overall score
.tm-overall
Wrapper element for overall score
.tm-overall-inner
Inner element for overall score
.tm-overall-stars
Wrapper element for overall score stars and review count
.tm-overall-cta
Wrapper element for overall score review link/cta
.tm-overall-cta-button
Button element for overall score review link/cta
Pagination
.tm-pagination
Wrapper element for pagination
.tm-pagination-more
Link element to load more items
Title
.tm-title
H2 title element of widget