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?