Single video widget

Change video elements text color

/* change description color */
.reputon-youtube-widget .reputon-single-video .reputon-description 
{color: red;}

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

/* change title color */
.reputon-youtube-widget .reputon-single-video .reputon-title
{color: red;}

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

Change widget font

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

Hide cards elements

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

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

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

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

Change widget background

/* change background of the entire widget */
.reputon-youtube-widget .reputon-single-video,
.reputon-youtube-widget .reputon-single-video .reputon-video-container
 {background: rebeccapurple;}

/* change card background */
.reputon-youtube-widget .reputon-single-video .reputon-video-container
 {background: rebeccapurple;}

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

Change widget width

.reputon-youtube-widget .reputon-single-video 
{width: 350px !important;}

Add margin above widget

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

Add margin below widget

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

Hide widget on mobile

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

Apply black-and-white filter

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

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

Last updated

Was this helpful?