¿Cómo cambio el estilo, el tamaño o el color del talón de empaque?

Para modificar el estilo de todo el texto en el talón de empaque de la misma manera, ve a la plantilla de talones de empaque en la configuración de plantilla y agrega el siguiente código al comienzo de la sección Encabezado de pedido:

 <style> 
  * {
    font-size:14px;
    font-family: Georgia, serif;
    color: #4f4f4f;
    }
 </style>

El * es un selector global. El código anterior establece el tamaño de todo el texto en el talón de empaque en 14px, la fuente en Georgia (o, si Georgia no es una fuente disponible, en la fuente serif estándar) y el color en el valor hexadecimal 4f4f4f (gris oscuro).

Cambia los valores de font-size, font-family y color a los valores que prefieras.

Para modificar el estilo del texto para un elemento específico, en lugar de todo el talón de empaque, agrega el atributo de estilo a la etiqueta de elemento que deseas modificar (este ejemplo agrega las mismas opciones de texto que arriba a la etiqueta <p> para el talón de empaque):

<p align="center" style="font-size:14px; font-family: Georgia, serif; color: #4f4f4f">[Packing Slip Message]</p>

Para lograrlo, agrega el texto en negrita del ejemplo anterior a su código de talón de empaque y cambia los valores para cada estilo según sea necesario.

Para hacer que la fuente en el ejemplo anterior sea negrita, simplemente agrega la propiedad font-weight al atributo de estilo:

style="font-size:14px; font-weight: bold; font-family: Georgia, serif; color: #4f4f4f"

Propiedades y valores de estilo comunes

Puedes agregar muchos pares de propiedades y valores a las etiquetas de estilo, ya sea en línea para un solo elemento o entre <style> las etiquetas en la cabecera del código del talón de empaque, para obtener el efecto deseado.

Éstos son los agregados más populares a un atributo de estilo:

  • Negrita

    font-weight: bold;
  • Poner en cursiva

    font-style: italic;
  • Subrayar

    text-decoration: underline;
  • Agregar un color de resaltado al fondo del texto

    background-color: yellow;
  • Cambiar el color del texto a rojo

    color: red;
  • Cambia el tamaño de la fuente a 18 puntos

    font-size: 18pt;

Modificar texto específico dentro de una etiqueta

Para modificar parte del texto de un elemento, pero no todo el texto de un elemento, debes agregar etiquetas <span>.

Por ejemplo, haz que el texto "30 días" en esta oración de ejemplo sea rojo con un color amarillo resaltado y en cursiva, pero mantén el texto que rodea igual.

Texto de etiqueta de talón de empaque con las palabras 30 días en una fuente roja y amarillo resaltado.

Así es como debería verse esto en la sección Pie de página del pedido de su talón de empaque:

<p align="center" style="font-weight: bold; font-size: 11px">Return items within <span style="font-style: italic; text-decoration: underline; background-color: yellow; color: red;">30 days</span> for a full refund.</p>

Para aprender más formas de dar estilo a elementos de texto como este, visita las páginas de tutoriales HTML & CSS de W3Schools o Mozilla Developer Network.