Spis treści artykułu:
- jak zmienić wygląd niektórych elementów na fakturze,
- jak zwiększyć wielkość tekstu na całej fakturze,
- jak zmienić kolor i wielkość czcionki w sekcji Sprzedawca,
- jak zwiększyć wielkość nazwy faktury,
- jak zwiększyć wielkość numeru faktury,
- jak zwiększyć wielkość nazwy Faktura VAT,
- jak w szablonie DEFAULT przenieść część informacji na prawą stronę wydruku,
- jak zmodyfikować nagłówki podpisów na dole faktury,
- jak zmienić marginesy drukowanego dokumentu,
- jak zmienić kolor uwag w szablonie GRAY,
- jak zamienić miejscami logo i dane wystawcy w szablonie DEFAULT.
Dowiedz się, jak skorzystać z tej funkcji, korzystając z interaktywnego przewodnika.
Jak zmienić wygląd niektórych elementów na fakturze?
Dzięki opcji konfiguracji wydruku przez CSS, dostępnej od planu Start, możesz dostosować wybrane elementy wizualne do swoich potrzeb, modyfikując ich standardowy wygląd.
Podane instrukcje dotyczą wyłącznie szablonu domyślnego - default, chyba, że informacja przy kodzie wskazuje inaczej.
Aby zmienić element faktury na wydruku, należy dodać właściwy kod CSS w dedykowanym polu. W tym celu:
- przejdź do zakładki Ustawienia > Ustawienia konta > Wydruki,

- w sekcji Konfiguracja znajdź pole Konfiguracja wydruku przez CSS - w tym polu dodaj kod zgodny ze zmianą, jaką chcesz wprowadzić w wyglądzie faktury,

- zatwierdź zmiany przyciskiem Zapisz - następnie przejdź do podglądu faktury i sprawdzić wydruk/PDF.
Jak zwiększyć wielkość tekstu na całej fakturze?
Aby zwiększyć wielkość tekstu na całej fakturze, należy skorzystać z poniższego kodu. UWAGA! Kod działa dla szablonów systemowych poza szablonem SKY.
.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.
Dla szablonu SKY należy zastosować ten sam kod z dopiskiem !important.
.invoice_outline * {
font-size: 12px !important;
}
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, gdzie wartość w nawiasie parametru p:nth-last-of-type(3) wskazuje na wiersz, w którym numer konta jest widoczny, może się to różnić w zależności od wyświetlanych na fakturze danych:
}@media all{
div.no-page-break > #summary p:nth-last-of-type(3){
color: blue;
}
}
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.
DLA SZABLONU DEFAULT:
} @media all {
.invoice_title strong { font-size: 20px; }
.invoice_title span { font-size: 20px;
} DLA SZABLONU OLD I BLUE:
} @media {
.invoice_title strong, .invoice_title h1 {
font-size: 20px; !important
} } DLA SZABLONU PLAIN BLACK, GRAY, SIMPLE, SKY
} @media {
#document_type{font-size:50px;}
#document_number{font-size:50px;}
}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 zmienić kolor uwag w szablonie GRAY?
Aby zmienić kolor uwag, skorzystaj z poniższego kodu.
}@media all{
#notes{
color: blue;
}
}
Jak zamienić miejscami logo i dane wystawcy w szablonie DEFAULT?
Tak wygląda wydruk faktury z domyślnym ustawieniem logo.

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;
}
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 znajdziesz w TYM artykule.
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.
Interaktywny przewodnik poprowadzi Cię krok po kroku na rzeczywistych ekranach Fakturowni, umożliwiając łatwe zrozumienie i wykonanie potrzebnych działań.
Kliknij Start aby rozpocząć, a następnie klikaj w niebieskie pola, lub użyj strzałek w prawym dolnym rogu do nawigowania po instrukcji.
Sprawdź również:
Konfiguracja wydruku przez CSS - kody CSS
Jak wstawić własne czcionki na szablonie?
Jak zmienić nazwę Nabywca na Płatnik?
Jak zmienić kolor dla nagłówków kolumn?