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';}
change text color
change height
change font-size
change font
customize text
change borders
change background

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?