# Carousel widget

## Change video name color

{% code overflow="wrap" %}
```css
.reputon-tiktok-widget .reputon-carousel .reputon-player-card .reputon-text {color: red;}
```
{% endcode %}

<figure><img src="https://1250937496-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGZpWpGGotju8NuvBAC1L%2Fuploads%2FORemoVU6VdL1Y2txj4Vk%2FUntitled.png?alt=media&#x26;token=19cd7987-bb34-4d2c-8f91-6e38ec02abe7" alt=""><figcaption></figcaption></figure>

***

## Change video name size

{% code overflow="wrap" %}
```css
.reputon-tiktok-widget .reputon-carousel .reputon-player-card .reputon-text {font-size: 10px;}
```
{% endcode %}

<figure><img src="https://1250937496-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGZpWpGGotju8NuvBAC1L%2Fuploads%2Fn2ih1HP82wjwSAcZdAlD%2FUntitled%201.png?alt=media&#x26;token=cd354d19-200a-458e-aa49-c5919c79404a" alt=""><figcaption></figcaption></figure>

***

## Change video name font

{% code overflow="wrap" %}
```css
.reputon-tiktok-widget .reputon-carousel .reputon-player-card .reputon-text {font-family: Comic Sans MS;}
```
{% endcode %}

<figure><img src="https://1250937496-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGZpWpGGotju8NuvBAC1L%2Fuploads%2F4V85540jUNhbzFblsD8y%2FUntitled%202.png?alt=media&#x26;token=3bedec78-1f22-4194-a0ca-33dd7469079c" alt=""><figcaption></figcaption></figure>

***

## Hide carousel elements

{% code overflow="wrap" %}
```css
/* hide video name */
.reputon-tiktok-widget .reputon-carousel .reputon-player-card .reputon-text {opacity: 0;}

/* hide carousel arrows */
.reputon-tiktok-widget .reputon-carousel .reputon-carousel-container .reputon-swiper-button-next,
.reputon-tiktok-widget .reputon-carousel .reputon-carousel-container .reputon-swiper-button-prev {
  display: none;}
```
{% endcode %}

<div><figure><img src="https://1250937496-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGZpWpGGotju8NuvBAC1L%2Fuploads%2F0LE8MQ2Zvu9SQ7zz6c0C%2FUntitled%203.png?alt=media&#x26;token=8b819186-2961-454c-923b-3555b1d5e775" alt=""><figcaption><p>hide name</p></figcaption></figure> <figure><img src="https://1250937496-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGZpWpGGotju8NuvBAC1L%2Fuploads%2FQXCgkSycnJ3m3A8gUEGl%2FUntitled%204.png?alt=media&#x26;token=1ce422f4-6aec-4cd7-b298-aae451c21d9c" alt=""><figcaption><p>hide arrows</p></figcaption></figure></div>

***

## Change background color

{% code overflow="wrap" %}
```css
/* change widget background color */
.reputon-tiktok-widget .reputon-carousel .reputon-carousel-container {background: bisque;}

/* change video background color */
.reputon-tiktok-widget .reputon-carousel .reputon-carousel-container .reputon-player-card {background: bisque;}

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

<figure><img src="https://1250937496-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGZpWpGGotju8NuvBAC1L%2Fuploads%2F5flTtC0yHwF1rdRXDRXy%2FUntitled%205.png?alt=media&#x26;token=41488da5-3303-4b73-8f51-eb6ee30a3fb6" alt=""><figcaption><p>change widget background color</p></figcaption></figure>

<figure><img src="https://1250937496-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGZpWpGGotju8NuvBAC1L%2Fuploads%2FIO5h4sGZ1mBrcsJgZabC%2FUntitled%206.png?alt=media&#x26;token=b422e0ac-1222-48c0-bf18-f65f4e17fb46" alt=""><figcaption><p>change video background color</p></figcaption></figure>

***

## Change carousel width

{% code overflow="wrap" %}
```css
.reputon-tiktok-widget .reputon-carousel {width: 650px;}
```
{% endcode %}

***

**Questions about CSS or need assistance? We're excited to help:** [**support@reputon.com**](mailto:support@reputon.com) **or** [**live chat**](https://go.crisp.chat/chat/embed/?website_id=d24ef16e-6e05-49e9-bd59-a6f3bde0658a)**.**
