Cómo cambiar algunos elementos en factura utilizando códigos CSS

Creado: 14/06/2020
Última actualización: 06/11/2023

nº de visitas de la entrada: 1684

Las siguientes modificaciones son visibles solo en la impresión o archivo PDF generado del sistema.
La instrucción se refiere solo a la plantilla por defecto - default.

Para cambiar algún elemento en la copia impresa, por ejemplo la inscripción original/copia hay que entrar en Ajustes de cuenta > Ajustes de impresión y en la parte inferior de la página rellenar el campo Personalizar impresión con CSS (según el siguiente esquema)
 

Captura de pantalla 2020 06 14 a las 18

Para cambiar el tamaño del texto en toda factura hay que introducir el siguiente código (funciona con todas plantillas):

.invoice_outline * {
    font-size: 12px;
}

Para que el texto este incluso más grande hay que introducir valores mayores, para el tamaño más pequeño - menores.
Analógicamente se puede afectar a los campos de factura.


Para cambia el color y el tamaño de otros elementos en la impresión o PDF hay que utilizar el código CSS más avanzado:

Cambio del color y el tamaño de fuente en la sección 

table.clean.to_half > tbody > tr > td:first-child p + p + p {
color: red !important;
font-size:1.4em;
}

 

table.clean.to_half > tbody > tr > td:first-child p + p + p + p{
color: #000 !important;
}

 

table.clean.split_half > tbody > tr > td:first-child p:last-child{
color: red !important;
font-size:1.4em;
}

Después de introducir este código la fecha del pago y número de cuenta bancaria aparecerán en rojo y en fuente más grande (solo en plantilla default)
 

Para ampliar el campo con el termino de pago en la plantilla BLUE hay que utilizar el siguiente código:

.additional_data p + p + p {
color: red !important;
font-size:1.4em;
}


Para aumentar el tamaño del nombre de factura: 

.invoice_title strong { font-size: 3em; }

Para aumentar el tamaño del numero de factura: 

.invoice_title > span { font-size:2em; display:block; margin-top:10px; }

Cambiando el número de font-size cambiamos el tamaño de letra.


Para aumentar el tamaño del nombre Factura IVA (plantilla blue y old):

.invoice_title h1 {    
    font-size: 5em;
}


en plantilla default:

(primer código cambia el tamaño de la inscripción, el segundo el número de factura) 

 

1.
.invoice_outline  .clean.to_half td p.invoice_title strong{
   font-size:4em !important;
}

 

2.

.invoice_outline  .clean.to_half td p.invoice_title span {
   font-size:2em !important;
}


Cambiando el número de font-size cambiamos el tamaño de letra.


Para eliminar de la impresión el sello Pagado ( todas plantillas)

html body .invoice_outline {
    .invoice_outline { background-image: none !important; }
    #paid_mark { display: none; }
}

 

Para trasladar una parte de información a la parte derecha de impresión en plantilla Default hay que utilizar el código siguiente:

table.clean.to_half td {
width:100%;
}

 

table.clean.to_half td p {
text-align: right;
}

 

table.clean.to_half td.logo_inside,
table.clean.to_half td.logo_inside p {
padding:0;
margin:0;
width:1px !important;
}

 

Para modificar los titulares de las firmas en la parte inferior de factura (añadir unas inscripciones) hay que utilizar este código (el contenido es solo un ejemplo):

 

.split_three tr td:first-child strong:before {
    content: declaración i ;
    margin-bottom: 5px;
}

 

.split_three tr td:last-child strong:after {
    content: - persona autorizada para expedir factura;
    margin-bottom: 5px;
}


Para cambiar los márgenes del documento: 


@page {
    size:  8.5in 11in;  /* primer valor - anchura, segundo valor - altura de la hoja */   
    margin-top: 0.5in;
    margin-right: 0in;    
    margin-bottom: 0.5in
    margin-left:0.5in;
}

.invoice_outline {
    margin-top: 0.5in;
    margin-right: 0.5in;    
    margin-bottom: 0.5in
    margin-left:0.5in;
    
}


Se puede cambiar los valores según las necesidades.

 

Para eliminar los márgenes de factura:

.invoice_outline {
margin: 0 !important;
padding: 0 !important;
}    


@page{size:portrait;margin:0;padding:0;}


Para cambiar de lugar el logotipo y datos de emisor en la plantilla default:

table.clean.to_half tbody tr td {
float: right;
width: 45%;
}

table.clean.to_half tbody tr td.logo_inside {
float: left;
width: 45%;
display: inline-block;
}



 



Atrás