Cuando configuras plantillas para presupuestos, facturas, etc en Teamleader, es necesario utilizar un documento de Word para configurar tu propio estilo. Para más información sobre la configuración general de tu estilo haz clic aquí.


No obstante, algunas partes de una plantilla no se pueden definir en el documento de Word o es más cómodo tener los cambios "a mano". Para modificar estas partes, necesitarás utilizar código CSS.


Nota: Cuando editas el CSS de una plantilla, todo el código CSS de otras plantillas con la misma variación de diseño se editará automáticamente en consecuencia.


1. Para editar el código CSS, simplemente ve a Parametrización > Formato de documento > Configurar ahora > Presupuestos o Facturas > Opciones avanzadas > Custom CSS.




2. En la siguiente pantalla, encontrarás el código CSS como se muestra a continuación:




El código CSS consta de tres partes::

  • HTML
    Es la parte del texto que deseas editar (por ejemplo, 'p' para el texto normal)


  • Propiedades
    Son las propiedades que deseas editar


  • Valor
    Es el valor para esas propiedades


  • Otras sintaxis
    Siempre necesitas abrir y cerrar el código con '{}' y finalizar cada línea con ';'
    Si no, todo el código subsiguiente no se verá como código. 


Un ejemplo para las tres partes: p {color: # 000000;}

  • HTML: p
  • Propiedades: color
  • Valor: #000000


Las etiquetas HTML (HTML - tags):

Si necesitas variar el formato de algunos títulos, estas etiquetas HTML se pueden utilizar en el código CSS:

  • p para el texto normal
  • h1 para el primer encabezado
  • h2 para el segundo encabezado
  • h3 para el tercer encabezado
  • h4 para el cuarto encabezado
  • ol para toda la lista
  • li para los elementos de la lista
  • * para todas las etiquetas


Propiedades del texto CSS:



Fuente:

  • La fuente de un texto se establece con la propiedad font-family.
  • Comienza con la fuente que deseas y finaliza con una familia genérica para que el navegador seleccione una fuente similar a esta, si no hay otras fuentes disponibles. Aquí puedes encontrar una lista de fuentes y sus familias: https://www.cssfontstack.com/Web-Fonts
  • Nota:
    • Si el nombre de una familia de fuentes se compone de más de una palabra, debe colocarse entre comillas, ej.: "Times New Roman”.
    • Es necesario utilizar comillas dobles y no comillas simples. Si copias la familia de fuentes desde www.cssfontstack.com (como se muestra arriba) tendrás que añadir estas comillas a mano.
    • No todas las familias de fuentes están disponibles en el CSS en Teamleader. Si tu fuente no está disponible, te recomendamos que busques una similar.
  • Ejemplo: p {font-family: "Times New Roman";}




Color de la fuente:

  • El color de un texto se establece con la propiedad de color.
  • Puedes encontrar el valor del color en este link usando hexa-decimal o RGB. RGB se puede encontrar al abrir el documento de Word haciendo clic en el botón de 'colores' haciendo clic en "Más colores".




En la siguiente pantalla, necesitarás ir a "Personalizado" para ver los valores del color que has utilizado.




  • Ejemplo: p {color: rgb (255,0,0);} OR p {color: # 000000;}




Tamaño de fuente:

  • La propiedad font-size establece el tamaño del texto.
  • De forma predeterminada, px es la unidad utilizada. Sin embargo, Word utiliza "puntos" como unidad. Para usar la misma unidad en CSS debes utilizar 'pt' o un convertidor pt a px: por ejemplo: http://www.endmemo.com/sconvert/pixelpoint.php
  • Ejemplo: p {font-size: 12pt;}
  • Estilo de fuente:
    • La propiedad font-style se utiliza principalmente para especificar el texto en cursiva.
    • Esta propiedad tiene tres valores:
      • normal - El texto se muestra normal
      • italic - El texto se muestra en cursiva
      • oblique - El texto se muestra en forma oblicua
    • Ejemplo: p {font-style: italic;}



Relieve de la fuente:

  • La propiedad font-weight especifica el relieve de una fuente.
  • Ejemplo: p {font-weight: bold;} ó p {font-weight: 400;}
  • Altura de la línea
    • La propiedad 'height property' se utiliza para especificar el espacio entre líneas.
    • El porcentaje 100% representa el tamaño de fuente del texto.
    • Ejemplo: p{line-height: 200%;} ó p{line-height: 20pt;}



Código CSS para presupuestos y facturas en Teamleader:


Descripción larga de artículos:

  • Usa la ‘etiqueta’.description para editar la descripción larga de los productos (=shortcode $LONG_DESCRIPTION$).
  • Con p.product_image you editas la imagen del producto.
  • p.description editará el texto normal
  • ‘ul’ (viñetas / bullet points) y ‘ol’ (lista numerada) editará la lista que tenga un tipo de ennumeración u otro.


Valores predeterminados:


Lo que mostramos a continuación es lo que aparece en tus ajustes de CSS. Sobre este texto hay que hacer los cambios que se quieran hasta dar con el diseño adecuado:


/* example styles for html used in longer article descriptions on invoices or quotations */
p.description{color:#666666;font-size:8px;margin-top:6px;margin-bottom:0px;margin-left:12px;}
p.description *{font-size:8px;}
p.product_image{margin-left:12px;margin-top:0px;margin-bottom:0px;}
ul.description li{background-color:none;}
ul.description li:first-child{margin-top:6px;}
ol.description li{background-color:none;}
ol.description li:first-child{margin-top:6px;}



Ediciones que se pueden hacer en el texto del presupuesto ($QUOTATION_TEXT$):

  • Utiliza la 'etiqueta' .quotation_text para editar el código abreviado $QUOTATION_TEXT$.
  • Puedes utilizar las etiquetas h1, h2, h3, h4, p, li mencionadas anteriormente. Si no pones ninguna etiqueta, se aplicará a todos los valores.
  • También puedes definir partes del texto de presupuestos que tengan un peso de fuente diferente. Ej. el texto en negrita a través de las etiquetas normal, bold, bolder, lighter. Por ejemplo: .quotation_text strong{font-size:30px; color:#00FF00 para definir todo el texto que tiene que ir en negrita.
  • Las fuentes siguientes se admiten en el CSS para el texto de presupuesto:
    • Arial
    • Calibri
    • Courier New
    • Gill Sans
    • Lucida Sans Unicode
    • Times New Roman
    • Verdana


Valores predeterminados:


Lo que mostramos a continuación es lo que aparece en tus ajustes de CSS. Sobre este texto hay que hacer los cambios que se quieran hasta dar con el diseño adecuado:



/* estilos de ejemplo de WYSIWYG en texto en presupuesto */

.quotation_text p{font-size:12px; color:#000000}

.quotation_text li{font-size:12px; color:#000000}


Por ejemplo:


.quotation_text {font-family:'Book Antiqua', Palatino, 'Palatino Linotype', 'Palatino LT STD', Georgia, serif;}

.quotation_text h1 {font-size:18pt;font-weight: bold;}

.quotation_text h2{font-size:14pt;font-weight: bold;}

.quotation_text h3{font-size:12pt;font-weight: bold;}

.quotation_text h4{font-size:10pt;font-weight: bold;}

.quotation_text p{font-size:10pt;color:#000000;}

.quotation_text li{font-size:10pt;color:#000000;}



Firmas en presupuestos:

  • Utilizando ‘#signature_area’ en las propiedades del texto, la parte de la firma puede ser editada con el código abreviado $DOCUMENT_SIGNATURE_AREA$).
  • Por ahora, nuestro CSS solo edita propiedades de texto
  • Para la firma se pueden editar más cosas ya que el área de la firma es en verdad una tabla, por lo tanto, puede ser editado mediante el uso de propiedades CSS para las tablas, puedes encontrar más información haciendo clic en el siguiente enlace: http://www.w3schools.com/css/css_table.asp.



Valores predeterminados:


Lo que mostramos a continuación es lo que aparece en tus ajustes de CSS. Sobre este texto hay que hacer los cambios que se quieran hasta dar con el diseño adecuado:


/* example styles for the signature area on quotations */

#signature_area{font-size:14px;}

#signature_area hr{color:#CCC;}

table.signature_area{width:100%}

table.signature_area td{width:50%;vertical-align:top;}

table.signature_area td:first-child{text-align:left}

table.signature_area td:last-child{text-align:right}

table.signature_area td:last-child img{float:right;}



Ejemplo:


/* example styles for the signature area on quotations */

#signature_area{font-size:12px;color: #000000;font-family: "Times New Roman";}



Tablas de IVA:


  • A través de este código CSS puedes definir los cambios del código abreviado $VAT_SUMMARY$.
  • Al igual que ocurre con el área de las firmas, el área de los IVA también se encuentran en una tabla. Puedes echar un vistazo al apartado 'Firmas en presupuestos' que acabamos de explicar en el punto anterior.


Valores predeterminados:


Lo que mostramos a continuación es lo que aparece en tus ajustes de CSS. Sobre este texto hay que hacer los cambios que se quieran hasta dar con el diseño adecuado:


table.vat_summary{font-size:14px;margin-left:100%;}

table.vat_summary th{border:1px solid #CCC;}

table.vat_summary tr{line-height:26px;}

table.vat_summary td{border:1px solid #CCC;}

table.vat_summary td:last-child,table.vat_summary th:last-child{text-align:right;}

table.vat_summary .vat_rate{width:20%;}



Comentarios en facturas:

  • Utiliza la etiqueta p.comments para editar el código abreviado $COMMENTS$.
  • Se pueden utilizar las etiquetas h1, h2, h3, h4, p, li. Si no pones ninguna etiqueta, se aplicará a todos los valores.



Valores predeterminados:


Lo que mostramos a continuación es lo que aparece en tus ajustes de CSS. Sobre este texto hay que hacer los cambios que se quieran hasta dar con el diseño adecuado:


/* example style for comments on invoices */p.comments{font-size:12px;}



Nota:

Al editar una plantilla de esta manera, CSS tiene prioridad, lo que significa que si has hecho cambios en el CSS, éstos tendrán prioridad y no el formato que aparezca en el archivo Word.