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

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

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.

Variable	Description
--fw-player-background	Video Player background color (backdrop, tiles, ...). Defaults to semi-transparent black.
--fw-player-chat-background	Background color of chat section in fullscreen player.
--fw-player-shop-background	Background color of commerce section in fullscreen player.
--fw-player-border-radius	Video Player border radiuses. Defaults to 14px.
--fw-player-inset	Video Player inset CSS string used when minimized. Defaults to auto 0 0 auto for bottom right corner.
--fw-player-height	Video Player height as a CSS string. Defaults to 320px or 192px for small screens.
--fw-player-width	Video Player width as a CSS string. Defaults to 180px or 108px for small screens.
--fw-player-margin	Video Player margin from the edge of screen. Defaults to 16px or 8px for small screens.
--fw-player-header-font-family --fw-player-chat-font-family --fw-product-name-font-family --fw-product-price-font-family --fw-product-description-font-family --fw-product-name-font-color --fw-product-subtitle-font-color --fw-product-name-font-weight --fw-product-name-letter-spacing --fw-product-name-text-transform --fw-product-image-background-color	More granular font settings for header, chat and product.

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:

<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:

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

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.

Examples

Remove border radius and change player backgorund to white:

<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

<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.

Name	Description	Default
ui_font_css	Link to custom CSS file.
ui_primary_color	CSS color value of color accents.
ui_button_color	CSS color value of CTA button.
ui_button_font_color	CSS color value of CTA button text.
ui_border_style	Border radius style. rounded radius ~14px hard No radius	rounded
ui_share_sheet	Coma separated values of share sheet options.	facebook,twitter,whatsapp, sms,copy,native

Examples

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