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

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

1. przejdź do zakładki Ustawienia > Ustawienia konta > Wydruki, 
   
   
    
2. w sekcji Konfiguracja znajdź pole Konfiguracja wydruku przez CSS - w tym polu dodaj kod zgodny ze zmianą, jaką chcesz wprowadzić w wyglądzie faktury, 
   
   
    
3. zatwierdź zmiany przyciskiem Zapisz - następnie przejdź do podglądu faktury i sprawdzić wydruk/PDF. 

Jak zwiększyć wielkość tekstu na całej fakturze? 

.invoice_outline * {

    font-size: 12px;
}

Aby tekst był większy, wpisz wartości wyższe niż w przykładzie np. 14px, 16px, 18px itd.. Analogicznie jeśli chcesz zmniejszyć wielkość tekstu na całej fakturze podaj wartości niższe np. 10px.
 

Jak zmienić kolor i wielkość czcionki w sekcji Sprzedawca?

Aby zmienić kolor i wielkość innych w sekcji Sprzedawca, należy skorzystać z poniższego kodu. 

DLA SZABLONU DEFAULT:

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.



DLA SZABLONU GRAY

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

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

DLA SZABLONU BLUE

Aby zwiększyć i zmienić kolor pola termin płatności, trzeba zastosować poniższy kod:

.additional_data p:nth-of-type(3) {
color: red !important;
font-size: 1.4em;
}
 

Jak zwiększyć wielkość nazwy faktury?

Aby zwiększyć wielkość nazwy dokumentu, skorzystaj z poniższego kodu.

Jak zwiększyć wielkość numeru faktury?

Aby zwiększyć wielkość numeru faktury, skorzystaj z poniższego kodu. 

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

Jak zwiększyć wielkość nazwy Faktura VAT?

Aby zwiększyć wielkość nazwy Faktura VAT, skorzystaj z poniższego kodu. 

DLA SZABLONU BLUE I OLD

.invoice_title h1 {    

    font-size: 5em;
}

DLA SZABLONU DEFAULT
 

1. Ten kod zwiększa sam napis faktura

.invoice_outline  .clean.to_half td p.invoice_title strong{
   font-size:4em !important;
}

2. Ten kod zwiększa numer faktury

.invoice_outline  .clean.to_half td p.invoice_title span {
   font-size:2em !important;
}
 

Jak w szablonie DEFAULT przenieść część informacji na prawą stronę wydruku?
 

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

Jak zmodyfikować nagłówki podpisów na dole faktury?

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?
 

Aby zmienić marginesy drukowanego dokumentu, należy skorzystać z kodu poniżej.
 

@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 kodu, który pozwoli 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, który znajdziesz poniżej, 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;
}