Własny szablon wydruku faktury pozwala zmienić układ i wygląd dokumentów generowanych przez system. Opcja przydaje się każdemu, kto chce dostosować fakturę do identyfikacji wizualnej firmy. Po wklejeniu kodu HTML i CSS szablon jest gotowy do użycia na nowych i istniejących dokumentach.
Jak otworzyć edytor szablonu faktury?
Aby stworzyć własny szablon faktury bazując na szablonach systemowych:
- przejdź do zakładki Ustawienia > Ustawienia konta > Szablony,
- zjedź na dół strony do sekcji Własny szablon wydruku faktury i kliknij przycisk Dodaj nowy szablon.
Skąd pobrać pliki szablonu z GitHub?
System korzysta z szablonów w formacie Handlebars (HBS). Do wyboru jest kilka szablonów systemowych w tym: DEFAULT (układ podstawowy) i BLUE (wariant z niebieskim akcentem kolorystycznym). Pobierz odpowiednie pliki i skopiuj ich zawartość:
- pobierz plik HTML szablonu DEFAULT: default.hbs.html - skopiuj całą jego zawartość,
- pobierz plik CSS szablonu DEFAULT: default.css - skopiuj całą jego zawartość,
- jeśli chcesz użyć wariantu BLUE zamiast DEFAULT, pobierz plik CSS: blue.css - użyj go zamiast pliku Default CSS w kroku 2,
Wszystkie przykładowe szablony znajdziesz też w repozytorium na GitHub.
Jak wkleić kod HTML i CSS szablonu?
- W edytorze szablonu wklej skopiowany kod HTML do górnego pola (pole HTML) - możesz również skorzystać z opcji Załaduj przykładowy szablon.
- Wklej skopiowany kod CSS do dolnego pola (pole CSS).
- Wprowadź swoje modyfikacje w kodzie.
- Kliknij Zapisz, aby zatwierdzić zmiany .
Poniżej widok edytora z zaznaczonymi polami HTML (górne) i CSS (dolne):
Jak zmienić szablon DEFAULT na wygląd szablonu BLUE?
Szablon BLUE różni się od DEFAULT kolorystyką i wymaga jednej dodatkowej zmiany w kodzie HTML - przeniesienia konkretnego elementu w inne miejsce. Poniżej zaznaczono element, który należy przenieść.
HTML odpowiedzialny za wyświetlanie nazwy i numeru dokumentu przed zmianą.
HTML po zmianie.
- Pobierz plik blue.css i skopiuj jego zawartość.
- W edytorze szablonu wklej kod blue.css do dolnego pola (pole CSS) - zastąpi on domyślny CSS.
- W górnym polu (pole HTML) przenieś zaznaczony element w miejsce wskazane na obrazku powyżej.
- Kliknij Zapisz.
Co warto wiedzieć o działaniu szablonów?
Szablon utworzony w ten sposób jest nowym, niezależnym szablonem, nawet jeśli bazuje na jednym z szablonów systemowych.
Dokumenty wystawione wcześniej zachowują szablon, z którym zostały utworzone. Zmiana domyślnego szablonu w ustawieniach konta lub działu wpływa wyłącznie na nowe dokumenty. Szablon archiwalnego dokumentu zmieni się tylko wtedy, gdy zostanie wybrany ręcznie podczas edycji tego dokumentu.