Una plantilla personalizada para la impresión de facturas permite cambiar el diseño y el aspecto de los documentos generados por el sistema. Esta opción resulta útil para quienes desean adaptar las facturas a la identidad visual de su empresa. Después de pegar el código HTML y CSS, la plantilla estará lista para utilizarse tanto en documentos nuevos como en documentos existentes.
¿Cómo abrir el editor de plantillas de facturas?
Para crear una plantilla de factura personalizada basándose en las plantillas del sistema:
-
Ve a la sección Ajustes > Ajustes de cuenta > Plantillas de factura
-
Desplázate hasta la parte inferior de la página, hasta la sección Propia plantilla de factura, y haz clic en el botón Añadir nueva plantilla.
¿Dónde descargar los archivos de la plantilla desde GitHub?
El sistema utiliza plantillas en formato Handlebars (HBS). Hay varias plantillas del sistema disponibles, entre ellas DEFAULT (diseño básico) y BLUE (variante con un toque de color azul). Descarga los archivos correspondientes y copia su contenido:
- descarga el archivo HTML de la plantilla DEFAULT: default.hbs.html — copia todo su contenido;
- descarga el archivo CSS de la plantilla DEFAULT: default.css — copia todo su contenido;
- si quieres utilizar la variante BLUE en lugar de DEFAULT, descarga el archivo CSS: blue.css — utilízalo en lugar del archivo CSS de Default en el paso 2.
También encontrarás todas las plantillas de ejemplo en el repositorio de GitHub.
¿Cómo pegar el código HTML y CSS de la plantilla?
-
En el editor de plantillas, pega el código HTML copiado en el campo superior (campo HTML). También puedes utilizar la opción Elegir plantilla ejemplar.
-
Pega el código CSS copiado en el campo inferior (campo CSS).
- Realiza tus modificaciones en el código.
- Haz clic en Guardar para confirmar los cambios.
En la imagen a continuación, se muestra el editor con los campos HTML (superior) y CSS (inferior) resaltados:
¿Cómo cambiar la plantilla DEFAULT para que tenga el aspecto de la plantilla BLUE?
La plantilla BLUE se diferencia de la DEFAULT por la combinación de colores y requiere un cambio adicional en el código HTML: mover un elemento específico a otra ubicación. A continuación, se muestra el elemento que debe trasladarse.
HTML responsable de mostrar el nombre y el número del documento antes del cambio.
HTML después del cambio.
Descarga el archivo blue.css y copia su contenido.
- En el editor de plantillas, pega el código blue.css en el campo inferior (campo CSS); este sustituirá al CSS predeterminado.
- En el campo superior (campo HTML), mueve el elemento seleccionado a la ubicación indicada en la imagen anterior.
- Haz clic en Guardar.
¿Qué conviene saber sobre el funcionamiento de las plantillas?
La plantilla creada de esta forma es una plantilla nueva e independiente, aunque se base en una de las plantillas del sistema.
Los documentos creados anteriormente conservan la plantilla con la que fueron creados. Cambiar la plantilla por defecto en los ajustes de la cuenta o de la sección afecta únicamente a los documentos nuevos. La plantilla de un documento archivado solo cambiará si se selecciona manualmente durante la edición de ese documento.
¡ATENCIÓN! Si utilizas en la plantilla fuentes externas (por ejemplo, Google Fonts) o imágenes alojadas fuera del sistema, pueden aumentar el tiempo de generación del PDF. El límite de tiempo para generar un documento es de 30 segundos; si un recurso externo no está disponible o responde lentamente, es posible que la generación del PDF no se complete correctamente.