Grid widget
Change widget font
.reputon-tiktok-widget .reputon-grid {font-family: Comic Sans MS !important;}
Change background color
/* change widget background color */
.reputon-tiktok-widget .reputon-grid .reputon-grid-container {background: bisque;}
/* To change the widget section color, add this code to theme.liquid*/
<style>
section:has(.reputon-tiktok-widget .reputon-grid) {
background: bisque;}
</style> 
Change play icon color
.reputon-tiktok-widget .reputon-grid .reputon-play-icon path {fill: red;}
.reputon-tiktok-widget .reputon-grid .reputon-play-icon circle {stroke: red;}
Remove play icon
.reputon-tiktok-widget .reputon-grid .reputon-play-icon {display: none;}
Change widget width
.reputon-tiktok-widget .reputon-grid {width: 650px;}
Change “Show more” button
/* change text color */
.reputon-tiktok-widget .reputon-grid .reputon-load-more {color: red;}
/* change font size */
.reputon-tiktok-widget .reputon-grid .reputon-load-more {font-size: 10px;}
/* hide show more btn */
.reputon-tiktok-widget .reputon-grid .reputon-load-more {font-family: Comic Sans MS;}
/* change button background */
.reputon-tiktok-widget .reputon-grid .reputon-load-more {background: aquamarine;}
/* change button width */
.reputon-tiktok-widget .reputon-grid .reputon-load-more {
width: 150px;
justify-content: center;}
/* change button height */
.reputon-tiktok-widget .reputon-grid .reputon-load-more {
height: 150px;
align-items: center;}
/* change button borders */
.reputon-tiktok-widget .reputon-grid .reputon-load-more {
border: 1px solid red;}
/* change button text */
.reputon-tiktok-widget .reputon-grid .reputon-load-more.editable:after {
content: 'your text';}
Remove show more button
.reputon-tiktok-widget .reputon-grid .reputon-load-more {display: none;}
Change header background
.reputon-tiktok-widget .reputon-grid .reputon-reviews-head {background: bisque;}Change header border
.reputon-tiktok-widget .reputon-grid .reputon-reviews-head {border: 1px solid black;}
Change chanel title
.reputon-tiktok-widget .reputon-grid .reputon-title {color: red;}
Remove chanel title
.reputon-tiktok-widget .reputon-grid .reputon-title {display: none;}
Change chanel name
.reputon-tiktok-widget .reputon-grid .reputon-description {color: red;}
Remove chanel name
.reputon-tiktok-widget .reputon-grid .reputon-description {display: none;}
Change counters text
.reputon-tiktok-widget .reputon-grid .reputon-counter-text {color: red;}
Change counters
.reputon-tiktok-widget .reputon-grid .reputon-counter {color: red;}
Remove counters
.reputon-tiktok-widget .reputon-grid .reputon-counters {display: none;}
Change verified color
.reputon-tiktok-widget .reputon-grid .reputon-verified {color: red;}
Remove verified icon
.reputon-tiktok-widget .reputon-grid .reputon-verified {display: none;}
Change button background
.reputon-tiktok-widget .reputon-grid .reputon-follow-button {background: red;}
Change button color
.reputon-tiktok-widget .reputon-grid .reputon-follow-text {color: red;}
Remove follow button
.reputon-tiktok-widget .reputon-grid .reputon-follow-button {display: none;}
Change divider color
.reputon-tiktok-widget .reputon-grid .reputon-divider {background: red;}
Change divider width
.reputon-tiktok-widget .reputon-grid .reputon-divider {width: 10px;}
Remove divider
.reputon-tiktok-widget .reputon-grid .reputon-divider {display: none;}
Questions about CSS or need assistance? We're excited to help: support@reputon.com or live chat.
Last updated
Was this helpful?