Como modificar las facturas o invoices en OpenCart

 

Para personalizar las facturas en OpenCart debemos de tener un conocimiento básico de CSS y si es posible una aplicación como Dreamweaver CS5 o mejor que te indique cuando cometes algún error al modificar  alguna propiedad que no existe o errores de sintaxis en CSS.

Primero empezaremos por localizar el único archivo que necesita ser modificado, este se llama ‘invoice.css‘ y usualmente esta localizado en: ‘/admin/view/stylesheet/‘. Es importante también, ya que vamos a modificar este archivo, crear una copia de este en caso de que cometamos errores irremediables o al final nos guste mas el modelo original de la factura.

Al abrir el archivo ‘invoice.css’ vamos a encontrar que es un archivo relativamente pequeño y bastante fácil de modificar. El siguiente cuadro muestra que hace cada línea en ese archivo:

Elemento Estilo Descripción
body background: #FFFFFF; Modifica el color de fondo de la factura
body, td, th, input, select, textarea, option, optgroup font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000; Modifica el tipo, el tamaño y el color de la letra
h1 text-transform: uppercase; color: #CCCCCC; text-align: right; font-size: 24px; font-weight: normal; padding-bottom: 5px; margin-top: 0px; margin-bottom: 15px; border-bottom: 1px solid #CDDDDD; Modifica los elementos que contengan “h1”, el título de INVOICE, el único en este caso.
.store width: 100%; margin-bottom: 20px; Modifica el ancho y el margen de abajo del recuadro que contiene los datos de la tienda y fecha, orden, etc..
.div2 y .div3 Encapsulan cierto contenido y lo formatean hacia la izquierda o a la derecha respectivamente, no es necesario alterar estos
.heading td background: #E7EFEF; Modifica el color de fondo de los encabezados de cada tabla visible en la factura
.address width: 100%; margin-bottom: 20px; border-top: 1px solid #CDDDDD; border-right: 1px solid #CDDDDD; Modifica los margenes y bordes de la tabla que contiene la información del cliente
.address th, .address td border-left: 1px solid #CDDDDD; border-bottom: 1px solid #CDDDDD; padding: 5px; vertical-align: text-bottom; Modifica los margenes y bordes de la tabla que contiene la información del cliente, pero además aca puedes añadir mas estilos para modificar el tamaño de las letras, color, etc…
.product width: 100%; margin-bottom: 20px; border-top: 1px solid #CDDDDD; border-right: 1px solid #CDDDDD; Modifica los margenes y bordes de la tabla que contiene la información de los productos o servicios que han comprado
.product td border-left: 1px solid #CDDDDD; border-bottom: 1px solid #CDDDDD; padding: 5px; Modifica los margenes y bordes de la tabla que contiene la información de los productos o servicios que han comprado, pero además aca puedes añadir mas estilos para modificar el tamaño de las letras, color, etc…

Entendiendo ahora cada una de las lineas del archivo ‘invoice.css‘ es más fácil modificar y personalizar este mismo. Por ejemplo, si queremos cambiar el color del titulo “INVOICE”, todo lo que debemos de hacer es de modificar la línea que contiene el formato para el elemento “H1” asi: H1 {color:#ff3322;} y asi sucesivamente con cualquier otro elemento del que se compone el archivo ‘invoice.css’.

Ahora, si lo que deseamos es mover o cambiar de posición algun elemento, tendremos que añadir el siguiente estilo en la línea del elemento que queremos modificar así: “h1 {position: relative; top:20px; right:40px;}, el cual moveria el título INVOICE, 20 pixeles hacia abajo y 40 pixeles hacia la derecha.

Bueno, si necesitas ayuda modificando el invoice, por favor déjanos un mensaje y con gusto te ayudaremos.

Add Comment