Jak zmienić wygląd niektórych elementów na fakturze?

Uwaga! Proszę pamiętać, że poniższe zmiany są widoczne jedynie na wydruku lub wygenerowanym PDF z systemu.
Podane instrukcje dotyczą wyłącznie szablonu domyślnego - default.

Aby zmienić element faktury na wydruku np. napis oryginał/kopia  trzeba przejść do menu
USTAWIENIA > USTAWIENIA KONTA > WYDRUKI (zakładka), a następnie na dole strony wypełnić pole Konfiguracja wydruku przez CSS 
(wedle schematu jak poniżej):

Na powyższym zrzucie ekranu widać jedynie prezentację okna. 
 

Aby np. zwiększyć wielkość tekstu na całej fakturze trzeba wpisać poniższy kod (działa we wszystkich szablonach):

.invoice_outline * {

    font-size: 12px;
}

Aby tekst był jeszcze większy trzeba wpisać wartości wyższe, a aby był mniejszy niższe.
Analogicznie można wpływać na wielkość innych pól na fakturze.

Aby zmienić kolor i wielkość innych elementów na wydruku/pdf faktury trzeba zastosować bardziej zaawansowany CSS:

zmiana koloru i wielkości czcionki w sekcji sprzedawca

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

Po wpisaniu powyższego kodu na czerwono zaznaczą się nam linie na dokumencie jak na zrzucie poniżej (ten styl CSS działa tylko w szablonie DEFAULT):
 

Zmiana koloru numeru konta w szablonie GRAY wymaga użycia następującego kodu:

} @media all{
#bank_field {
color: red;
}

Aby zwiększyć w szablonie BLUE pole termin płatności trzeba zastosować poniższy kod:

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

 

Jak zwiększyć wielkość nazwy faktury:

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

Jak zwiększyć wielkość numeru faktury:

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

Zwiększając wielkość font-size czcionka numeru będzie się powiększać.
 

Jak zwiększyć wielkość nazwy Faktura VAT ( szablon blue i old ):

.invoice_title h1 {    

    font-size: 5em;
}

w szablonie default poniżej (pierwszy kod zwiększa sam napis faktura, a drugi numer faktury):
 

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

Zwiększając wielkość font-size czcionka nazwy faktury będzie się powiększać.

Jak usunąć z wydruku pieczęć Opłacono (działa we wszystkich szablonach)

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

Aby w szablonie Default przenieść część informacji na prawą stronę wydruku (jak na zrzucie poniżej) należy skorzystać z poniższego kodu:

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

Aby zmodyfikować nagłówki podpisów na dole faktury (dodać do nich dopiski) trzeba zastosować poniższy kod (wpisane treści są przykładowe):

.split_three tr td:first-child strong:before {
    content: Oświadczenie i ;
    margin-bottom: 5px;
}

.split_three tr td:last-child strong:after {
    content: - osoby upoważnionej do wystawiania faktury VAT;
    margin-bottom: 5px;
}

Jak zmienić marginesy drukowanego dokumentu:
 

@page {
    size:  8.5in 11in;  /* pierwsza wartość dotyczny szerokosci a druga wysokosci kartki */   
    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;
    
}

Powyższe wartości można zmieniać w zależności od potrzeb.

Poniżej przykład jak zupełnie wyeliminować marginesy z faktury:

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

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

Jak zamienić miejscami logo i dane wystawcy w szablonie default

Tak prezentuje się faktura po zastosowaniu zmian w umiejscowieniu logo (za pośrednictwem kodu CSS, poprzez zmianę wartości procentowej zmienia się położenie obrazu na wydruku, wartości w podanym niżej kodzie są przykładowe):


 

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

Więcej na ten temat można przeczytać na tej stronie.

Dowiedz się jak zmienić położenie adresu nabywcy by pasował do koperty z okienkiem, więcej informacji pod tym linkiem.

Podpowiedzi do tego rodzaju CSS można znaleźć tutaj.

Do poznania klas CSS  i ID CSS różnych elementów na fakturze można kliknąć 2 przyciskiem myszy na fakturze i wyświetlić jej źródło. Można również skorzystać z narzędzia FIREBUG - do zainstalowania pod tym linkiem https://getfirebug.com/

Więcej na temat CSS można przeczytać na tej stronie.