Cuando configuras plantillas para presupuestos, facturas, etc en Teamleader Focus, 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 > Haz clic en el tipo de documento donde quieres efectuar cambios (presupuestos, facturas...) > Haz clic en 'Mostrar opciones avanzadas' justo debajo de la vista preliminar > Personalizar 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 Focus. 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 Focus:


Descripción larga de artículos ($LONG_DESCRIPTION$):

  • Usa la ‘etiqueta’.description para editar la descripción larga de los productos
  • Con p.product_image puedes editar 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 numeració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 tus 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.
  • El uso de las siguientes fuentes es admitido en el CSS para el texto de presupuesto: Arial, Calibri, Courier New, Gill Sans, Lucida Sans Unicode, Times New Roman, Verdana... Encontrarás disponible información adicional aquí


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;}
.quotation_text table{font-size:12px; color:#000000}



Firmas en presupuestos ($DOCUMENT_SIGNATURE_AREA$):

  • 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 otros elementos ya que el área que le corresponde es en realidad una tabla, por lo tanto, puede ser editada mediante el uso de las 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. Los cambios que quieras hacer deben ser realizados sobre este texto hasta lograr con el diseño deseado:


/* 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 ($VAT_SUMMARY$):


  • 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 ($COMMENTS$):

  • 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;}



Códigos abreviados $LEGAL_NOTES$ y $INVOICE_REFERENCE$:


Para editar el formato de estos dos códigos abreviados, es necesario editar el apartado 'General styles', al comienzo de la ventana. Ten en cuenta que estos códigos no se pueden editar de forma individual, sino que los cambios que se apliquen en este apartado, se aplicarán a estos dos códigos abreviados de forma conjunta y al resto de la plantilla que no tenga un formato ya aplicado:




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.