Customize the Ad Badge

How do I adjust the background color of the Ad Badge?

To adjust the background in the "Sponsored" text, you'll need to do the following:

Step #1

Select a color option via RGBA.

Step #2

Before the Firework Embed code, insert the following CSS snippet:

<style>
fw-embed-feed {
   --fw-ad-badge-background: rgba(175, 175, 175, 0.8); /* Custom "Sponsored" badge background */  
}
</style>

Replace the rgba() value with your own custom color.

How do I adjust the font style of the Ad Badge?

Leveraging Google Fonts will help here!

Step #1

Simply select the font style you'd like to use from Google Fonts.

Step #2

Copy the "@import" code from Google Fonts to insert before the Firework Embed code. Example below:
‍
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab');
</style>

How do I adjust the font color of the Ad Badge?

Step #1

Select a color option via RGBA.

Step #2

Before the Firework Embed code, insert the following script:

<style>
fw-embed-feed {
   --fw-ad-badge-font-color: rgba(255, 255, 255, 1) !important; /* Custom "Sponsored" badge font color */
}
</style>

Replace the rgba() value with your own custom color.

Step #3

Finally set the background to "transparent" and enter in your font style. For example:
‍

<style>
fw-embed-feed {
   --fw-ad-badge-font-color: rgba(255, 255, 255, 1) !important; /* Custom "Sponsored" badge font color */
  --fw-storyblock-background: transparent;
  --fw-font-family: "Roboto Slab", serif;
}
</style>

Complete Example

Here is an example HTML script with the above adjustments.

<script async type="text/javascript" src="//asset.fwpub1.com/js/embed-feed.js"></script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab');
fw-embed-feed {
--fw-ad-badge-background: rgba(175, 175, 175, 0.8); /* Custom "Sponsored" badge background */
--fw-ad-badge-font-color: rgba(255, 255, 255, 1) !important; /* Custom "Sponsored" badge font color */
--fw-storyblock-background: transparent;
--fw-font-family: "Roboto Slab", serif;
}
</style>
<fw-embed-feed
channel="playlist"
 playlist="oyrAAg"
mode="row"
open_in="default"
max_videos="0"
placement="middle"
branding="false"
player_placement="bottom-right"
></fw-embed-feed>