Carousel/shorts carousel widget

Customize your YouTube Gallery carousel /shorts widget with CSS. Change colors, fonts, layout, arrows, and more to match your website design.

Change cards text color

/* change description color */
.reputon-youtube-widget .reputon-carousel .reputon-carousel-container .reputon-description {color: red;}

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

/* change title color */
.reputon-youtube-widget .reputon-carousel .reputon-carousel-container .reputon-title {color: red;}

/* change date color */
.reputon-youtube-widget .reputon-carousel .reputon-carousel-container .reputon-date {color: red;}

description color

counters color

title color

date color

---

Change header text color

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

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

title color

counters color

---

Change background cards

/* change background cards */
.reputon-youtube-widget .reputon-carousel .reputon-video-container {background: aquamarine;}

---

Change widget font

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

---

Hide cards elements

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

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

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

/* hide card date */
.reputon-youtube-widget .reputon-carousel .reputon-carousel-container .reputon-date {display: none;}

hide description

hide counters

hide title

hide date

---

Hide header elements

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

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

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

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

---

Change widget background

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

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

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

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

---

Change ‘Subscribe’ button

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

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

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

---

Change widget width

.reputon-youtube-widget .reputon-carousel {width: 600px !important;}

---

Change navigation arrows

/* change size */
.reputon-youtube-widget .reputon-carousel .reputon-swiper-button-next,  
.reputon-youtube-widget .reputon-carousel .reputon-swiper-button-prev 
{min-width: 80px; height: 80px;}

/* hide arrows */
.reputon-youtube-widget .reputon-carousel .reputon-swiper-button-next,  
.reputon-youtube-widget .reputon-carousel .reputon-swiper-button-prev 
{display: none;}

/* hide arrows only on mobile */
@media(max-width: 760px) {.reputon-youtube-widget .reputon-carousel .reputon-swiper-button-next, .reputon-youtube-widget .reputon-carousel .reputon-swiper-button-prev {display: none;}}

/* color arrows */
.reputon-youtube-widget .reputon-carousel .reputon-swiper-button-next,  
.reputon-youtube-widget .reputon-carousel .reputon-swiper-button-prev
{color: red;}

/* adjust arrows (use negative numbers to raise position) */
.reputon-youtube-widget .reputon-carousel .reputon-swiper-button-next,  
.reputon-youtube-widget .reputon-carousel .reputon-swiper-button-prev 
{margin-top: 200px;}

change color

change size

---

Add margin above widget

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

---

Add margin below widget

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

---

Hide widget on mobile

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

---

Apply black-and-white filter

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

---

Have questions or need help with CSS? Contact us at [e-mail] or live chat