Personalizar el badge publicitario

¿Cómo ajustar el color de fondo del badge publicitario?

Para ajustar el fondo del texto « Sponsored », deberás hacer lo siguiente:

Paso n.°1

Selecciona una opción de color mediante RGBA.

Paso n.°2

Antes del código de integración de Firework, inserta el siguiente fragmento CSS:

<style>
fw-embed-feed {
   --fw-ad-badge-background: rgba(175, 175, 175, 0.8); /* Fondo personalizado del badge « Sponsored » */  
}
</style>

Reemplaza el valor rgba() con tu propio color personalizado.

¿Cómo ajustar el estilo de fuente del badge publicitario?

¡Google Fonts te ayudará aquí!

Paso n.°1

Simplemente selecciona el estilo de fuente que deseas usar desde Google Fonts.

Paso n.°2

Copia el código «@import» de Google Fonts para insertarlo antes del código de integración de Firework. Ejemplo:

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

¿Cómo ajustar el color de fuente del badge publicitario?

Paso n.°1

Selecciona una opción de color mediante RGBA.

Paso n.°2

Antes del código de integración de Firework, inserta el siguiente script:

<style>
fw-embed-feed {
   --fw-ad-badge-font-color: rgba(255, 255, 255, 1) !important; /* Color de fuente personalizado del badge « Sponsored » */
}
</style>

Reemplaza el valor rgba() con tu propio color personalizado.

Paso n.°3

Por último, establece el fondo como «transparent» e introduce tu estilo de fuente. Por ejemplo:

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

Ejemplo completo

Aquí tienes un ejemplo de script HTML con los ajustes anteriores.

<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); /* Fondo personalizado del badge « Sponsored » */
--fw-ad-badge-font-color: rgba(255, 255, 255, 1) !important; /* Color de fuente personalizado del badge « Sponsored » */
--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>