Changelog

Grid widget

Change widget header text color

/* change title color */
.reputon-youtube-widget .reputon-grid .reputon-header .reputon-title  
{color: red;}

/* change counters color */
.reputon-youtube-widget .reputon-grid .reputon-header .reputon-counters  
{color: red;}
title color
counters color

Change grid elements text color

/* change description color */
.reputon-youtube-widget .reputon-grid .reputon-grid-wrapper .reputon-description {color: red;}

/* change bottom counters color */
.reputon-youtube-widget .reputon-grid .reputon-grid-wrapper .reputon-counters {color: red;}

/* change title color */
.reputon-youtube-widget .reputon-grid .reputon-grid-wrapper .reputon-title {color: red;}

/* change date color */
.reputon-youtube-widget .reputon-grid .reputon-grid-wrapper .reputon-date {color: red;}
description color
counters color
title color
date color

Change widget font

/* change widget font */
.reputon-youtube-widget .reputon-grid {font-family: Comic Sans MS !important;}

Hide cards elements

/* hide card description */
.reputon-youtube-widget .reputon-grid .reputon-grid-wrapper .reputon-description {display: none !important;}

/* hide card counters */
.reputon-youtube-widget .reputon-grid .reputon-grid-wrapper .reputon-counters {display: none;}

/* hide card title */
.reputon-youtube-widget .reputon-grid .reputon-grid-wrapper .reputon-title {display: none;}

/* hide card date */
.reputon-youtube-widget .reputon-grid .reputon-grid-wrapper .reputon-date {display: none;}
hide description
hide counters
hide title
hide date

Hide header elements

/* hide title */
.reputon-youtube-widget .reputon-grid .reputon-header .reputon-title  
{display: none;}

/* hide counters */
.reputon-youtube-widget .reputon-grid .reputon-header .reputon-counters  
{display: none;}

/* hide logo */
.reputon-youtube-widget .reputon-grid .reputon-header .reputon-logo 
{display: none;}

/* hide header */
.reputon-youtube-widget .reputon-grid .reputon-header
{display: none;}

Change widget background

/* change widget background */
.reputon-youtube-widget .reputon-grid,
.reputon-youtube-widget .reputon-grid .reputon-header
 {background: rebeccapurple;}

/* change widget background, excluding header */
.reputon-youtube-widget .reputon-grid 
{background: rebeccapurple;}

/* change header background */
.reputon-youtube-widget .reputon-grid .reputon-header
{background: rebeccapurple;}

/* To change the widget section color, add this code to theme.liquid */
<style> 
section:has(.reputon-youtube-widget .reputon-grid) {background: rebeccapurple;}
</style>

Change widget width

/* change background of the entire widget */
.reputon-youtube-widget .reputon-grid {width: 600px !important;}

Change ‘Load more’ button

/* regular state */
.reputon-youtube-widget .reputon-grid .reputon-load-more {color: #fff; background: red;}

/* borders */
.reputon-youtube-widget .reputon-grid .reputon-grid-container .reputon-load-more {border: 3px solid red ;}

/* hover, active states */
.reputon-youtube-widget .reputon-grid .reputon-load-more:hover,
.reputon-youtube-widget .reputon-grid .reputon-load-more:not([disabled]):active,
.reputon-youtube-widget .reputon-grid .reputon-load-more:not([disabled]):active {color: #fff; background: brown;}

/* 'load more' button text */
.reputon-youtube-widget .reputon-grid .reputon-load-more.editable:after {content: 'your text';}

/* 'load more' button font */
.reputon-youtube-widget .reputon-grid .reputon-load-more.editable:after {font-family: Comic Sans MS;}

Change ‘Subscribe’ button

/* change background color */
.reputon-youtube-widget .reputon-grid .reputon-bt-subscribe {background: red;}

/* change text color */
.reputon-youtube-widget .reputon-grid .reputon-bt-subscribe {color: red;}

/* hide button */
.reputon-youtube-widget .reputon-grid .reputon-bt-subscribe {display: none;}

Add margin above widget

.reputon-youtube-widget .reputon-grid
{margin-top: 100px !important;}

Add margin below widget

.reputon-youtube-widget .reputon-grid {margin-bottom: 100px !important;}

Hide widget on mobile

@media (max-width: 460px) { 
	.reputon-youtube-widget .reputon-grid { 
		display: none !important; }}

Apply black-and-white filter

.reputon-youtube-widget .reputon-grid {filter: grayscale(100%);}

Questions about CSS or need assistance? We're excited to help: support@reputon.com or live chat.

PreviousCarousel/shorts carousel widgetNextSingle video widget

Last updated

Was this helpful?