> For the complete documentation index, see [llms.txt](https://docs.firework.com/firework-for-developers/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.firework.com/firework-for-developers/web/integration-guide/styling.md).

# Styling

Along with the integration code snippet, hosting page can add a style attribute with CSS declaration to target Firework’s widget or global root.

## General

CSS variables that apply generically for all widgets. These are recommended to be declared in global scope.

| Variable                         | Description                                         |
| -------------------------------- | --------------------------------------------------- |
| `--fw-font-color`                | The general font colour for the whole widget        |
| `--fw-font-family`               | The font family for the widget to use.              |
| `--fw-primary-button-color`      | Font color for primary buttons                      |
| `--fw-primary-button-background` | Background color for primary buttons                |
| `--fw-primary-button-border`     | Border type of primary buttons                      |
| `--fw-cta-button-animation`      | CTA button animation                                |
| `--fw-cta-button-background`     | CTA button background color                         |
| `--fw-cta-button-border`         | Border type of CTA button                           |
| `--fw-cta-button-border-radius`  | Border radius of CTA button                         |
| `--fw-cta-button-color`          | Color of CTA button text                            |
| `--fw-cta-button-font-size`      | Font size of CTA button                             |
| `--fw-cta-button-font-weight`    | Font weight of CTA button                           |
| `--fw-cta-button-height`         | CTA button height                                   |
| `--fw-cta-button-padding`        | CTA button text padding                             |
| `--fw-title-color`               | Controls the text color of the widget title         |
| `--fw-title-font-family`         | Sets the font family of the widget title            |
| `--fw-title-text-align`          | Controls the horizontal alignment of the title text |
| `--fw-title-font-size`           | Defines the size of the title text                  |
| `--fw-title-font-weight`         | Controls the font weight of the title text          |
| `--fw-title-margin`              | Sets the margin of the widget title                 |
| `--fw-title-padding`             | Sets the padding of the widget title element        |

## Embed Feed Styling

CSS variables for embed feed can be declared in global scope or on specific `<fw-embed-feed>` component. You can declare in `:root`, `head` ,`body` or on specific `<fw-embed-feed>` component.

| Variable                       | Description                                                                                                                                           |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--fw-thumbnail-border-radius` | Border radius for feed thumbnails. Defaults to `10px`.                                                                                                |
| `--fw-thumbnail-aspect-ratio`  | Aspect ratio of a thumbnail. Defaults to `240/400`. Works in conjunction with width or height set to `auto`.                                          |
| `--fw-thumbnail-width`         | Custom thumbnail width. Defaults to `240px`.                                                                                                          |
| `--fw-thumbnail-height`        | Custom thumbnail height. Defaults to `400px`.                                                                                                         |
| `--fw-thumbnail-justify`       | Use values `flex-start`, `flex-end`, or `center` to left, right, or center align thumbnails within a carousel or stories widget. Defaults to `center` |
| `--fw-thumbnail-gap`           | Gap between thumbnails. Defaults to `10px`.                                                                                                           |
| `--fw-font-family`             | Customize font for video title to better match you site design.                                                                                       |
| `--fw-ad-badge-background`     | Custom "Sponsored" badge background                                                                                                                   |
| `--fw-ad-badge-font-color`     | Custom "Sponsored" badge font color                                                                                                                   |
| `--fw-thumbnail-font-size`     | Thumbnail caption font size                                                                                                                           |
| `--fw-thumbnail-font-weight`   | Thumbnail caption font weight                                                                                                                         |

## Storyblock Styling

CSS variables for Storyblock can be declared in global scope or on specific `<fw-storyblock>` component. You can declare in `:root`, `head` ,`body` or on specific `<fw-storyblock>` component.

| Variable                        | Description                                                                           |
| ------------------------------- | ------------------------------------------------------------------------------------- |
| `--fw-storyblock-background`    | CSS string to specify storyblock background in case its visible. Defaults to `black`. |
| `--fw-storyblock-border-radius` | CSS string to specify storyblock border radius. Defaults to `10px`.                   |

## Hero Unit Styling

| Variable                                   | Description                                                    |
| ------------------------------------------ | -------------------------------------------------------------- |
| `--fw-hero-unit-countdown-letter-spacing`  | The letter spacing for hero unit countdown                     |
| `--fw-hero-unit-countdown-text-transform`  | The Text Transform for hero unit countdown (eg. upper-case)    |
| `--fw-hero-unit-countdown-font-size`       | The font size for hero unit countdown                          |
| `--fw-hero-unit-countdown-font-weight`     | The font-weight for hero unit countdown                        |
| `--fw-hero-unit-countdown-flex`            | The flex container size for hero unit countdown                |
| `--fw-hero-unit-content-letter-spacing`    | The letter spacing for hero unit content, anything below title |
| --fw-hero-unit-content-text-transform      | The Text Transform for hero unit content (eg. upper-case)      |
| `--fw-hero-unit-content-font-weight`       | The font-weight for hero unit content                          |
| `--fw-hero-unit-cta-font-size`             | The font size for hero unit CTAs                               |
| `--fw-hero-unit-cta-letter-spacing`        | The letter spacing for hero unit CTAs                          |
| `--fw-hero-unit-cta-text-transform`        | The Text Transform for hero unit CTAs (eg. upper-case)         |
| `--fw-hero-unit-cta-font-weight`           | The font-weight for hero unit CTAs                             |
| `--fw-hero-unit-start-time-text-transform` | The Text Transform for hero unit Start Time (eg. upper-case)   |
| `--fw-hero-unit-start-time-font-size`      | The font size for hero unit Start Time                         |
| `--fw-hero-unit-start-time-font-weight`    | The font-weight for hero unit Start Time                       |
| `--fw-hero-unit-start-time-line-height`    | The line height for hero unit Start Time                       |
| `--fw-hero-unit-start-time-letter-spacing` | The letter spacing for hero unit Start Time                    |
| `--fw-hero-unit-title-letter-spacing`      | The letter spacing for hero unit title                         |
| `--fw-hero-unit-title-text-transform`      | The Text Transform for hero unit title (eg. upper-case)        |
| `--fw-hero-unit-title-font-size`           | The font size for hero unit title                              |
| `--fw-hero-unit-title-font-weight`         | The font-weight for hero unit title                            |
| `--fw-hero-unit-title-flex`                | The flex container size for hero unit title                    |
| `--fw-hero-unit-title-font-family`         | The font family of the hero unit title                         |
| `--fw-hero-unit-title-line-height`         | The line height for hero unit countdown                        |

## Player Deck

CSS variables for player deck needs to be declared in global scope. `:root`, `head` or `body` is ok.

| Variable                                                  | Descriptipn                                        |
| --------------------------------------------------------- | -------------------------------------------------- |
| `--fw-player-deck-product-card-font-weight`               | Player deck product card font weight               |
| `--fw-player-deck-product-card-font-color`                | Player deck product card font color                |
| `--fw-player-deck-product-card-discount-price-font-color` | Player deck product card discount price font color |
| `--fw-player-deck-product-card-font-size`                 | Player deck product card font size                 |

## Video Player

CSS variables for video player needs to be declared in global scope. `:root`, `head` or `body` is ok. Values applied to all Video Player instances and Storyblocks.

<table data-header-hidden><thead><tr><th width="409">Variable</th><th>Description</th></tr></thead><tbody><tr><td>Variable</td><td>Description</td></tr><tr><td><code>--fw-player-background</code></td><td>Video Player background color (backdrop, tiles, ...). Defaults to semi-transparent black.</td></tr><tr><td><code>--fw-player-chat-background</code></td><td>Background color of chat section in fullscreen player.</td></tr><tr><td><code>--fw-player-shop-background</code></td><td>Background color of commerce section in fullscreen player.</td></tr><tr><td><code>--fw-player-border-radius</code></td><td>Video Player border radiuses. Defaults to <code>14px</code>.</td></tr><tr><td><code>--fw-player-inset</code></td><td>Video Player inset CSS string used when minimized. Defaults to <code>auto 0 0 auto</code> for bottom right corner.</td></tr><tr><td><code>--fw-player-height</code></td><td>Video Player height as a CSS string. Defaults to <code>320px</code> or <code>192p</code>x for small screens.</td></tr><tr><td><code>--fw-player-width</code></td><td>Video Player width as a CSS string. Defaults to <code>180px</code> or <code>108px</code> for small screens.</td></tr><tr><td><code>--fw-player-margin</code></td><td>Video Player margin from the edge of screen. Defaults to <code>16px</code> or <code>8px</code> for small screens.</td></tr><tr><td><p><code>--fw-player-header-font-family</code></p><p><code>--fw-player-chat-font-family</code></p><p><code>--fw-player-footer-chat-font-color</code></p><p><code>--fw-product-name-font-family</code></p><p><code>--fw-product-price-font-family</code></p><p><code>--fw-product-description-font-family</code><br><code>--fw-product-name-font-color</code><br><code>--fw-product-subtitle-font-color</code><br><code>--fw-product-name-font-weight</code><br><code>--fw-product-name-letter-spacing</code><br><code>--fw-product-name-text-transform</code><br><code>--fw-product-image-background-color</code></p></td><td>More granular font settings for header, chat and product.</td></tr><tr><td><code>--fw-caption-background-color</code></td><td>The background of video subtitles</td></tr><tr><td><code>--fw-caption-color</code></td><td>The font color of video subtitles</td></tr><tr><td><code>--fw-player-banner-background</code></td><td>The background color of livestream announcements banner</td></tr></tbody></table>

### Applying CSS variables

There are multiple ways how to scope CSS variables in general.

*Option 1:* Target `:root`, `html` or `body` element to achieve broader scope:

```html
<style>
    :root {
        --fw-player-background: rgba(255, 255, 255, 0.6);
        --fw-player-border-radius: 0;
    }
</style>
```

*Option 2:* Target specific element via CSS declaration or inline `style` for narrow scope:

```html
<style>
    fw-storyblock { 
        // `id` or `class` can be used as well.
        --fw-storyblock-background: transparent;    
    }
</style>

<fw-storyblock
    channel="awesome-channel"
    playlist="kj43j2"
    style="--fw-font-family: 'Roboto Slab', serif"
></fw-storyblock>
```

{% hint style="info" %}
Styling fullscreen video element on a more broader scope (:root) might be necessary since many components do not render video within them, rather use \<body> as a placement.
{% endhint %}

### Examples

#### Remove border radius and change player backgorund to white:

```markup
<style>
    :root {
        --fw-player-background: rgba(255, 255, 255, 0.6);
        --fw-player-border-radius: 0;
    }
    fw-embed-feed {
        --fw-thumbnail-border-radius: 0;
    }
</style>
```

#### Custom font family

```html
<style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab');

    :root {
        --fw-font-family: "Roboto Slab", serif;
    }
</style>
```

## Widget Styling Attributes

List of widget attributes which can be used to alter style or UI of Firework components.

<table data-header-hidden><thead><tr><th width="262.3333333333333">Name</th><th width="251.86814292903878">Description</th><th>Default</th></tr></thead><tbody><tr><td>Name</td><td>Description</td><td>Default</td></tr><tr><td><code>ui_font_css</code></td><td>Link to custom CSS file.</td><td></td></tr><tr><td><code>ui_primary_color</code></td><td>CSS color value of color accents.</td><td></td></tr><tr><td><code>ui_button_color</code></td><td>CSS color value of CTA button.</td><td></td></tr><tr><td><code>ui_button_font_color</code></td><td>CSS color value of CTA button text.</td><td></td></tr><tr><td><code>ui_border_style</code></td><td><p>Border radius style.</p><ul><li><code>rounded</code> radius ~14px</li><li><code>hard</code> No radius</li></ul></td><td><code>rounded</code></td></tr><tr><td><code>ui_share_sheet</code></td><td>Coma separated values of share sheet options.</td><td><code>facebook,twitter,whatsapp,</code><br><code>sms,copy,native</code></td></tr></tbody></table>

### Examples

```html
<fw-storyblock
    channel="awesome-channel"
    playlist="kj43j2"
    ui_primary_color="rgb(255, 0, 0);"
></fw-storyblock>
```