# 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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.firework.com/firework-for-developers/web/integration-guide/styling.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.