Quando imposti i modelli per i preventivi, le fatture,etc., generalmente utilizzi un file Word per inserire il tuo layout. Maggiori informazioni su come impostare il tuo layout si trovano qui.


Alcuni parti dei modelli, tuttavia, non possono essere definite nel tuo documento Word. Per modificare queste parti, avrai bisogno di usare il codice CSS.


Nota: quando hai modificato il CSS di un modello, tutti i codici CSS degli altri modelli con la stessa variazione di layout saranno modificati automaticamente nello stesso modo.


1. Per modificare il codice CSS, accedi a "Impostazioni" > "Layout Documento" >  "Mostra opzioni avanzate" > "Modifica Custom CSS"



Opzioni avanzate CSS



2. Nella schermata successiva, troverai il codice CSS come mostrato di seguito:




Il codice CSS consiste di tre parti:

  • HTML
    La parte del testo che desideri modificare (per esempio ‘p’ per testo normale)
  • Proprietà
    Le proprietà che vuoi modificare
  • Valore
    Il valore di queste proprietà
  • Altra sintassi
    Hai sempre bisogno di aprire e chiudere il codice con ‘{}’ e finire una linea con ‘;’
    Se non lo fai, tutto il codice seguente non sarà riconosciuto come codice.

Un esempio delle tre parti: p {color:#000000;}

  • HTML: p
  • Proprietà: color
  • Valore: #000000


Etichette HTML

Se rilevanti, le etichette HTML possono essere usate nel codice CSS

  • p per il testo normale
  • h1 per il primo titolo
  • h2 per il secondo titolo
  • h3 per il terzo titolo
  • h4 per il quarto titolo
  • ol per un intero elenco
  • li per gli oggetti in elenco
  • * per tutte le etichette


Proprietà del testo CSS


Famiglia di caratteri:

  • Il carattere di un testo è impostato con la proprietà famiglia di caratteri.
  • Inizia con il carattere che desideri, e finisci con la famiglia generica, per permettere al browser di scegliere un carattere simile nella stessa famiglia, se non vi sono altri caratteri disponibili. Qui puoi trovare una lista dei caratteri e della corrispondente famiglia di caratteri: http://www.cssfontstack.com/Web-Fonts
  • Nota:
    • Se il nome di una famiglia di caratteri consiste in più di una parola, deve essere inserita tra virgolette, vedi esempio: "Times New Roman”.
    • Devi utilizzare le doppie virgolette e non le singole. Se copi la famiglia di caratteri da www.cssfontstack.com (come mostrato di seguito) questo dovrà essere modificato.
    • Non tutte le famiglie di caratteri sono disponibili in codice CSS in Teamleader Focus. Se il tuo carattere non è disponibile, ti raccomandiamo di sceglierne uno simile.
  • Esempio: p {font-family: "Times New Roman";}


Colore carattere:

  • Il colore del carattere si imposta tramite la proprietà colore.
  • Il valore può essere esadecimale o RGB. Si può ricavare il colore in RGB dal documento Word cliccando su "Più colori" quando scegli il tuo colore.


Nella schermata successiva, dovrai scegliere "Colori personalizzati" per vedere i valori del colore che hai usato.



Esempio: {color: rgb(0,0,0);} oppure p {color:#000000;}


  • Dimensione carattere:
    • La proprietà dimensione carattere imposta la dimensione del testo.
    • Perdefault, px è l'unità utilizzata. Tuttavia, Word utilizza 'punti' come unità. Per usare la stessa unità in CSS usa ‘pt’ oppure utilizza un convertitore da pt a px: per esempio http://www.endmemo.com/sconvert/pixelpoint.php
    • Esempio: p {font-size: 12pt;}
  • Stile del carattere:
    • La proprietà stile del carattere è utilizzata principalmente per specificare il testo corsivo.
    • Questa proprietà ha tre valori:
    • normale - Il testo viene mostrato normale
    • corsivo - Il testo vien mostrato in corsivo
    • obliquo - Il testo viene mostrato obliquo
    • Esempio: p {font-style: italic;}
  • Peso del carattere:
    • La proprietà peso carattere viene usata per definire il peso del carattere
    • Esempio: p {font-weight: bold;} - oppure - p {font-weight: 400;}
  • Spessore linea
    • La proprietà spessore della linea è utilizzata per definire la spaziatura tra due linee.
    • La percentuale 100% corrisponde alla dimensione del carattere del testo.
    • Esempio: p{line-height: 200%;- oppure - p{line-height: 20pt;}


Codice CSS per i preventivi e e le fatture in Teamleader Focus


Descrizione lunga per i prodotti

  • Utilizza ‘tag’.description per modificare l'etichetta per la descrizione lunga dei prodotti (=shortcode $LONG_DESCRIPTION$).
  • Con p.product_image puoi modificare l'etichetta per l'immagine del prodotto.
  • ‘p.description’ modifica il testo normale
  • ‘ul’ (elenco puntato) e ‘ol’ (elenco numerato) modifica le etichette per gli elenchi.


Default

/* esempio di stili per html utilizzati nella descrizione lunga dei prodotti nelle fatture o nei preventivi */

p.description{color:#666666;font-size:11px;margin-top:6px;margin-bottom:0px;margin-left:12px;}

p.description *{font-size:11px;}

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


Testo del preventivo

  • Usa .quotation_text ‘tag’ per modificare la etichetta per lo shortcode $QUOTATION_TEXT$.
  • Tag h1, h2, h3, h4, p, li possono essere utilizzati. Non utilizzare alcun no tag per influenzare tutti i tag.
  • Puoi anche definire parti di testo del tuo preventivo con caratteristiche diverse per i caratteri, ad esempio: diverso peso, il grassetto o neretto più o meno marcato e scuro rispetto al carattere normale usando i tag normale, meno spesso, spesso.
    • Esempio: .quotation_text strong{font-size:30px; color:#00FF00 per specificare il testo che viene mostrato in grassetto
  • Per il CSS del testo del preventivo sono supportati i seguenti caratteri: Arial, Calibri, Courier New, Gill Sans, Lucida Sans Unicode, Times New Roman, Verdana,... Troverai ulteriori dettagli qui


Default

/* esempio stile per testo di preventivo WYSIWYG */

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

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


Esempio

.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}


Area per le firme sul preventivo

  • Utilizzando ‘#signature_area’ nelle proprietà del testo, l'area per le firme nel preventivo può essere modificata (Shortcode = $DOCUMENT_SIGNATURE_AREA$).
  • Sino ad ora, il nostro codice CSS ha modificato solo le proprietà del testo.
  • Per l'area delle firme è possibile modificare più di questo, in quanto questa è di fatto una tabella.
  • Quindi può essere modificata usando il codice CSS per le proprietà delle tabelle, maggiori informazioni cliccando al seguente link: http://www.w3schools.com/css/css_table.asp.


Default

/* esempio stile per l'area di firma sul preventivo */

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


Esempio

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

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


Tabella per il calcolo dell'IVA

  • Attraverso il codice CSS puoi definire le impostazioni per lo shortcode $VAT_SUMMARY$
  • Come per l'area delle firme, la tabella per il calcolo dell'IVA è una tabella. Vedi "Area per le firme sul preventivo" per maggiori informazioni.

Default

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


Commenti sulle fatture

  • Usa p.comments ‘tag’ per apportare modifiche allo shortcode $COMMENTS$.
  • Tag h1, h2, h3, h4, p, li possono essere utilizzati. Non utilizzare alcun no tag per influenzare tutti i tag.


Default

/* esempio di stile per i commenti sulle fatture */p.comments{font-size:12px;}


Per poter modificare il layout degli shortcode $INVOICE_REFERENCE$ e $LEGAL_NOTES$, bisogna modificare lo stile generale (General Styles). Non è possibile modificare gli shortcode singolarmente. Tutte le modifiche apportate a questo stile generale, saranno applicate a questi due shortcode.



Nota:

Quando modifichi un modello in questo modo, il codice CSS ha priorità. Il che significa che le impostazioni date tramite CSS verranno utilizzate e non quelle derivanti dal file Word.