Invoice formatting with custom CSS Stylesheet

In this article

Banana invoices are formatted through a CSS Stylesheet. The extension allows you to use a customized stylesheet so you can fully modify the appearance of the invoice (this functionality requires the Advanced plan).

Following you will find information and examples that let anyone understand the basic of the CSS so that you are able to do a lot of customization to your invoice, even if you are not a CSS professional.

Banana CSS Stylesheet file

The CSS file property let you specify an CSS stylesheet file to be used for formatting the invoice. You have to enter the name of a CSS document, contained in the Documents table.

The properties you define in the custom CSS file will extend or overwrite the styles of the default stylesheet.

Cascading Style Sheet (CSS) is a specification language that allows to customize the appearance of web pages, and a subset of the whole CSS specification is also used in Banana to prepare reports. 
Here are some basics about CSS Stylesheet formatting.

  • The document, in our case the invoice, is composed by a series of Elements that contains all the data of the invoice.
  • Each element can have one or more class properties that specify which style should be used for that element.
  • Each element can contain other elements.
  • In the CSS stylesheet you specify the formatting properties of each class of style.
  • The elements hynnerit the styles of the parent element.
  • The main element for the invoice is the Document.

Add your custom CSS stylesheet

Three steps are required to define and use your CSS file:

  1. Add the document table to the Banana Accounting file.
    If it is not already present you need to add the Documents table in the Banana document with the menu command Tools > Add new features > Add document table.
  2. Add a new CSS type document to the document table.
    1. In the ID column enter the file name including the extension .css (e.g. "myStyle.css").
      If the id is missing the ".css" at the end, it won't work.
    2. In the Description column enter a comment (optional).
    3. In the Attachments column, double click on the cell or select the edit symbol, then select CSS stylesheet and confirm with Ok.
    4. An editor will open in which you can write the code.
    5. Enter or edit the script and confirm with Ok.
    6. Save the Banana Accounting file.

      invoice css customization
      Documents table - CSS stylesheet attachment
       
  3. Specify the CSS file created in the invoice layout extension.
    1. Select Settings of the Print invoices dialogue.
    2. In the Javascript/CSS > CSS file name, enter the name of the newly created CSS attachment file with the extension ".css" at the end (e.g. "myFile.css").
    3. Click Ok to confirm.

      qr invoice css settings dialog
      Settings Dialogue - CSS File Property

 

Syntax of a CSS stylesheet

The syntax of the CSS is quite simple as you see in this style definition that set the size of the Invoice title text element to 14 points and without bold.

/* this two lines are comment 
   title_text is for the invoice number */
.title_text {
  font-family: Arial;
  font-size: 14;
  font-weight: normal;
  color: #6495ED;
}

Syntax rules:

  • Element are case sensitive.
  • You specify the style name ".title_text" starting with a dot (".") and followed by the  curly open bracket "{".
    • Property name, followed by the colon ":"
    • Values followed by the semicolon ";"
    • You can have has many allowed properties you need.
  • End with the curly close bracket "}".
  • You can have has many allowed style classes.
  • The defined values overwrite the predefined one.

Comments:

Most used properties

Font

Text alignment

  • text-align
    Specify the horizontal alignment of the text.
    It is used for example to align on the right of the cell all the amounts of the invoice (i.e. "text-align: right").

Colors

For the main colors you can use the name in English (black, yellow, white, blue, red, ...) or the hexadecimal values (HEX) preceded by the # sign (e.g. #000000, #009FE3, #FF00EA).
For codes see the table at https://www.w3schools.com/cssref/css_colors.asp.

  • color
    Define the color of a text.
  • background-color
    Define the background color of an element.
    It is used for example to set the background color of the header row of the invoice details.

Positioning

All elements in the invoice are positioned relative to the prior element. You can change the positioning.

  • margin
    • margin-top
      To set the margin on the top of the element.
    • margin-right
      To set the margin on the right side of the element.
    • margin-bottom
      To set the margin on the bottom of the element.
    • margin-left
      To set the margin on the left side of the element.
      It is used for example in case it is required to move an element a bit to the right. More margin on the left means move the element to the right.
  • padding
    • padding-top
      Sets the height of the area on the top of an element.
    • padding-right
      Sets the width of the area on the right of an element.
    • padding-bottom
      Sets the height of the area on the bottom of an element.
    • padding-left
      Sets the width of the area on the left of an element.
/* For example it is used for the details table, to avoid that
all the texts are printed too close to the table border. */
.doc_table td {
  padding-top: 5px;
  padding-bottom: 1px;
  padding-left: 4px;
  padding-right: 4px;
}

Absolute positioning

Some elements are positioned relative to the begin of the document. The position of these elements does not depend on any other element in the document.

  • postion
    •  For the logo, header text and address elements it is used the absolute positioning ("position: absolute").

Borders

To apply borders to tables and table rows.

  • border-style
    Sets the line style for all four sides of an element's border.
    • border-top-style
    • border-right-style
    • border-bottom-style
    • border-left-style
  • border-color
    Sets the color for all four sides of an element's border.
    • border-top-color
    • border-right-color
    • border-bottom-color
    • border-left-color
  • border-width
    Sets the width for all four sides of an element's border.
    • border-top-width
    • border-right-width
    • border-bottom-width
    • border-left-width
/* For example use it to apply a double underline
 to the total line of the invoice. */
  .total_cell {
  border-bottom-style: double;
  border-bottom-color: #337ab7;
  border-bottom-width: 1px;
}

Display / Hide element

Set the attribute display to none to hide an element.  In this case the Invoice number is hidden.

.title_text {
   display: none;
}

Predefined CSS stylesheet

The Javascript layout create a document with elements that include a specific class, that is then positioned and formatted based on the CSS style definition.
If you want to add other styles class you have to modify the Javascript code by using the hook functions.

Here you can see the complete CSS stylesheet used for invoices documents.

  • Some styles are initialized with the predefined values set by the users (value that begin with the $. 
    For example The $font_family is replaced with the font name family specified by the user or initialized with the Javascript variable initialization function.
  • Test starting with /* and ending with */ are comments
/* Page definition.
   Sets margins of the document.
   Each elements of the invoice is positioned relative to these margins. */
@page {
  margin-top: 0cm;
  margin-bottom: 0cm;
  margin-left: 0cm;
  margin-right: 0cm;
}
/* Properties for all the content of the document.
   This values will be used for all elements, unless there is not a specific definition.
   Sets font family, font size and text color. */
body {
  font-family: $font_family;
  font-size: $font_size;
  color: $text_color;
}
/* Vertically align the content of a cell in a table. */
td {
  vertical-align: top;
}
/* Text that is right aligned. 
   This class is used in combination of others */
.right {
  text-align: right;
}
/* Text that is center aligned. 
   This class is used in combination of others */
.center {
  text-align: center;
}
/* Font that is bold. */
.bold {
  font-weight: bold;
}
/* The width of the area on the right of an element.
   This value is the space between an element and its border. */
.padding-right {
  padding-right: 20px;
}
/* The width of the area on the left of an element.
   This value is the space between an element and its border. */
.padding-left {
  padding-left: 20px;
}
/* The top border of an element.
   Sets the line style, the line color and the line width of the border. 
   Used for example as horizontal line between the items and the total net */
.border-top {
  border-top-style: solid;
  border-top-color: $color_title_total;
  border-top-width: thin;
}
/* Text of the header when printed on the right of the document.
   Sets margins and position relative to the document.
   When no logo is used, text alignment is set to right. */
.header_text {
  margin-top: 1.2cm;
  margin-left: 1.2cm;
  margin-right: 1.2cm;
  text-align: right;
  position: absolute;
}
/* Text of the row 1 of the header (if defined through Invoice settings).
   Sets bold and size 16 of the font. */
.header_row_1 {
  font-weight: bold;
  font-size:16pt;
}
/* Text of the row 2, row 3, row 4 and row 5 of the header (if defined through Invoice settings).
   Sets bold and size 10 of the font. */
.header_row_2_to_5 {
  font-weight: bold;
  font-size: 10pt;
}
/* Logo positioning.
   Sets margins and position relative to the document. */
.logo {
  margin-top: 1.2cm;
  margin-left: 1.34cm;
  margin-right: 1.2cm;
  position: absolute;
}
/* Text of the information table when printed on the left of the document.
   Sets font size and margins relative to the document and the prior element. */
.info_table_left {
  font-size: $font_size;
  margin-top: 4.5cm;
  margin-left: 1.2cm;
  margin-right: 1.2cm;
}
/* Text of the information table when printed on the right of the document.
   Sets font size and margins relative to the document and the prior element. */
.info_table_right {
  font-size: $font_size;
  margin-top: 5.5cm;
  margin-left: 12.3cm;
  margin-right: 1.2cm;
}
/* Text of the information table when printed on page 2 and above.
   Sets font size and margins relative to the document and the prior element. */
.info_table_row0 {
  font-size: $font_size;
  margin-top: 4.5cm;
  margin-left: 1.2cm;
  margin-right: 1.2cm;
}
/* Cells of the information table rows when printed on the left.
   Sets the space between the text in the cell and the cell border (top and bottom). */
table.info_table_left td {
  padding-top: 0px;
  padding-bottom: 0px;
}
/* Cells of the information table rows when printed on the right.
   Sets the space between the text in the cell and the cell border (top and bottom). */
table.info_table_right td {
  padding-top: 0px;
  padding-bottom: 0px;
}
/* Cells of the information table rows when printed on page 2 and above.
   Sets the space between the text in the cell and the cell border (top and bottom). */
table.info_table_row0 td {
  padding-top: 0px;
  padding-bottom: 0px;
}
/* Display the information table for pages 2 and above.
   For pages 2 and above it is used a different information table (.info_table_row0).
   This table is not displayed on first view of the document (page 1).
   On first page it is used the other one (.info_table_left or .info_table_right). */
@page:first-view table.info_table_row0 {
  display: none;
}
/* Can be used to set the column width of the first column of info table 
   width: 100px */
.info_table_first_column {
}
/* Can be used to set the column width of the second column of info table 
   width: 100px */
.info_table_second_column {
}
/* Address positioning when printed on the right.
   Sets margins and position relative to the document.
   Sets also the font size. */
.address_table_right {
  font-size: $font_size;
  top: 4.5cm;
  left: 12.3cm;
  width: 7.5cm;
  position: absolute;
}
/* Address positioning when printed on the left.
   Sets margins and position relative to the document.
   Sets also the font size. */
.address_table_left {
  top: 5.5cm;
  left: 2.2cm;
  width: 7.5cm;
  position: absolute;
}
/* Address positioning when printed on the right,
   and moved horizontally/vertically through Invoice settings.
   Sets margins and position relative to the document.
   Sets also the font size. */
.custom_address_table_right {
  font-size: $font_size;
  top: $right_address_margin_top;
  left: $right_address_margin_left;
  width: 7.5cm;
  position: absolute;
}
/* Address positioning when printed on the left,
   and moved horizontally/vertically through Invoice settings.
   Sets margins and position relative to the document.
   Sets also the font size. */
.custom_address_table_left {
  top: $left_address_margin_top;
  left: $left_address_margin_left;
  width: 7.5cm;
  position: absolute;
}
/* Small address line of the sender, above the customer's address.
   Sets font size, text alignment.
   Sets also a bottom border used as underline. */
.small_address {
  font-size: 7pt;
  text-align: center;
  border-bottom-style: solid;
  border-bottom-color: $text_color;
  border-bottom-width: 1px;
  margin-bottom: 0.3cm;
}
/* Shipping address positioning.
   Sets font size and margins relative to the information table. */
.shipping_address {
  font-size: $font_size;
  margin-top: 0.4cm;
  margin-left: 1.2cm;
  margin-right: 1.2cm;
}
/* Shipping address title.
   Sets font weight and color of the text. */
.title_shipping_address {
  font-weight: bold;
  color: $color_title_total;
}
/* Invoice title.
   Sets font size, font weight and color of the text. */
.title_text {
  font-size: $font_size_title;
  font-weight: bold;
  color: $color_title_total;
}
/* Begin text positioning.
   Sets margins relative to the prior element.
   It is used all the available width of the document to insert the text. */
.section_class_begin {
  margin-top: 1.0cm;
  margin-left: 1.2cm;
  margin-right: 1.2cm;
  width: 100%;
}
/* Table for the begin text.
   Use all the available width of the document. */
.begin_text_table {
  width: 100%;
}
/* Begin text style.
   Sets the font size of the text. */
.begin_text {
  font-size: $font_size;
}
/* Invoice details positioning, first page.
   Sets the top margin relative to the prior element (begin text/title) */
.section_class_details:first-view {
  margin-top: 0.5cm;
}
/* Invoice details positioning, page 2 and above.
   Sets the margins relative to the prior element (information) */
.section_class_details {
  font-size: $font_size;
  margin-top: 0.5cm;
  margin-bottom: 0.5cm;
  margin-left: 1.3cm;
  margin-right: 1.2cm;
}
/* Invoice details table width.
   Use all the available width of the document. */
.doc_table {
  width: 100%;
}
/* Header row of the invoice details.
   Sets font size, font weight, text color and background color. */
.doc_table_header {
  font-size: $font_size_header;
  font-weight: bold;
  color: $text_color_details_header;
  background-color: $background_color_details_header;
  border-bottom: thin solid $color_title_total;
}
/* Cells of the invoice details table.
   Sets the space between the text in the cell and the cell border (top, bottom, left and right). */
.doc_table td {
  padding-top: 5px;
  padding-bottom: 1px;
  padding-left: 0px;
  padding-right: 0px;
}
/* Cells of header row of the invoice details table.
   Sets the space between the text in the cell and the cell border (top, bottom, left and right). */
.doc_table_header td {
  padding-top: 4px;
  padding-bottom: 2px;
  padding-left: 0px;
  padding-right: 0px;
}
/* Item row of the invoice details.
   Sets font weight. */
.item_cell {
  
}
/* Total row of the invoice details.
   Sets font size, font weight and text color. 
   Sets also a bottom border used as double underline for the entire row. */
.total_cell {
  font-size: $font_size_total;
  font-weight: bold;
  color: $color_title_total;
  border-bottom-style: double;
  border-bottom-color: $color_title_total;
  border-bottom-width: 1px;
}
/* Subtotal row of the invoice details.
   Sets the font weight and a bottom border used as underline for the entire row. */
.subtotal_cell {
  font-weight: bold;
  border-bottom-style: solid;
  border-bottom-color: $color_title_total;
  border-bottom-width: thin;
}
/* Header cell of the invoice details.
   Sets the font weight as bold. */
.header_cell {
  font-weight: bold;
}
/* VAT text style of the invoice details.
   Sets the font size of the text.
   Used when printing the invoice details using gross amounts, through Invoice settings. */
.vat_info {
  font-size: $font_size;
}
/* Even rows style of the invoice details.
   Sets the background color for even rows. */
.even_rows_background_color {
  background-color: $background_color_alternate_lines;
}
/* Final texts positioning.
   Sets margins relative to the prior element (invoice details).
   Applied to notes, greetings and final texts. */
.section_class_final_texts {
  margin-top: 0cm;
  margin-bottom: 0.5cm;
  margin-left: 1.26cm;
  margin-right: 1.0cm;
}
/* Footer top border positioning. 
   Sets margins relative to the prior element (final texts).
   Sets also a top border line over the text. */
.footer_line {
  margin-left: 1.2cm;
  margin-right: 1.0cm;
  border-top-style: solid;
  border-top-color: $color_title_total;
  border-top-width: thin;
}
/* Footer positioning and style.
   Sets margins relative to the prior element (footer line). 
   Sets also font size and use all the available width of the document. */
.footer_table {
  font-size: 8pt;
  margin-bottom: 2.0cm;
  margin-left: 1.2cm;
  margin-right: 1.0cm;
  width: 100%;
}

 

Help us improve the documentation

We welcome feedback on how to improve this page.

Tell us what theme needs a better explanation or how to clarify a topic.

Share this article: Twitter | Facebook | LinkedIn | Email