Ako zmeniť vzhľad niektorých prvkov na faktúre? – Vzhľad faktúry – BitFaktura.sk

POZOR! Pamätajte, prosím, na to, že nižšie uvedené zmeny sú viditeľné iba na výtlačku alebo vo vygenerovanom PDF súbore. Uvedené návody sa týkajú výhradne východiskovej šablóny - default.

Pre zmenu akéhokoľvek prvku na výtlačku, napr. nápisu Originál/Kópie, je nutné v menu Nastavenie - Nastavenie účtu - Nastavenie tlače (záložka) a následne v spodnej časti stránky vyplniť pole Konfigurácia výtlačku pomocou CSS. Napr. pre zväčšenie veľkosti textu na celej faktúre je nutné vložiť nasledujúci kód (funguje pri všetkých šablónach):

.invoice_outline * {
font-size: 12px;
}

Na to, aby bol text ešte väčší, je nutné vložiť vyššie hodnoty, na to, aby bol menší, naopak hodnoty menšie. Podobným spôsobom môžeme ovplyvniť veľkosť ďalších polí na faktúre. Pre zmenu farby a veľkosti iných častí výtlačku / pdf súboru faktúry je nutné použiť pokročilejší css kód: Zmena farby a veľkosti písma v časti predávajúci.

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 vložení vyššie uvedeného kódu sa nám červenou farbou označia riadky dokumentu (tento CSS štýl funguje iba pri šablóne DEFAULT). Pre zväčšenie poľa termín splatnosti na šablóne BLUE je nutné použiť nižšie uvedený kód:

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

------------------------- Ako zväčšiť veľkosť názvu faktúry: .invoice_title strong { font-size: 3em; } Ako zväčšiť veľkosť čísla faktúry: 

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

Navyšovaním veľkosti hodnoty font-size sa bude písmo číslice zväčšovať. ------------------------- Ako zväčšiť veľkosť názvu Faktúra (šablóna blue a old): 

.invoice_title h1 {    
font-size: 5em;
}

v šablóne default nižšie: (prvý kód zväčšuje samotné slovo Faktúra, druhý potom číslo faktúry). 1.

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

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

Navyšovaním veľkosti hodnoty font-size sa bude písmo názvu faktúry zväčšovať. ------------------------- Ako z výtlačku odstrániť pečiatku Zaplatené (funguje u všetkých šablón).

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

------------------------- Na to, aby sme mohli v šablóne Default presunúť časť informácií na pravú stranu dokumentu. … je nutné použiť nasledujúci kód:

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

------------------------- Na úpravu hlavičky a podpisov v spodnej časti faktúry (ich pridanie do popisu) je nutné použiť nižšie uvedený kód (uvedené obsahy slúžia iba ako príklad).

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

Ako zmeniť okraje pri tlačenom doklade:

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

Vyššie uvedené hodnoty je možné zmeniť podľa potreby. Nižšie je uvedený príklad, ako úplne eliminovať okraje na faktúre:

.invoice_outline {
margin: 0 !important;
padding: 0 !important;
}    
@page{size:portrait;margin:0;padding:0;}

------------------------------------------- Ako vymeniť logá a údaje vystaviteľa pri šablóne default

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

--------------------------------------------- Viac informácií nájdete tu: http://www.tutorialspoint.com/css/css_paged_media.htm --------------------------------------------- Rovnako môžete použiť nástroj FIREBUG - je možné nainštalovať pomocou odkazu: https://addons.mozilla.org/en-US/firefox/addon/firebug/

Komentáre