Home Forums Support Invoice background questions

This topic contains 5 replies, has 2 voices, and was last updated by  Hillel Coren 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #22199

    preliot
    Participant

    I’ve tried a couple of things to get a background image to work. Although pdfmake does support a background image, i can’t get it to work properly with invoice ninja. Although i am able to add a background image, i have no control over the width / height of it.

    My solution is an image as first content block and absolute positioning it. This works, but only on the first page (see my code example). My questions:

    • How can i get an invoice background on every page with the possibility to control width / height?
    • Is it possible to use a different background for pages 2-x?
     {
        "image": "data:image/png;base64...very long data uri string",
        "width": 595.28,
        "height": 841.89,
        "absolutePosition": {
          "x": 0,
          "y": 0
        } 
    

    note: width / height are A4 sizes

    • This topic was modified 1 month ago by  preliot. Reason: A4 size comment
    #22201

    Hillel Coren
    Keymaster

    Have you tried using the option on Settings > Invoice Designs > Invoice Options

    #22205

    preliot
    Participant

    Yes and i get a background.

    But, i have no control over the size, it’s gigantic and margins are all wrong.

    #22208

    Hillel Coren
    Keymaster

    There should be a ‘Background’ tab on Settings > Invoice Design > Customize where you can adjust it.

    #22215

    preliot
    Participant

    @hillel Yes, that’s it and thank you for your help!

    Now i can use a background image in the proper way and adjust it’s width / height.
    The second page doesn’t show my background image. I’ve removed the absolute position part, but still no sigar.

    I’m using the self-hosted invoice ninja and i’m adjusting the custom1 design template. I’ve copied the content from the table ‘account’ > field ‘custom_design1’:

    
    {
       "content":[
          {
             "stack":[
                {
                   "columns":[
                      {
    
                      },
                      {
                         "width":"50%",
                         "stack":"$clientDetails",
                         "fontSize":"12",
                         "margin":[
                            10,
                            50,
                            0,
                            60
                         ]
                      }
                   ]
                },
                {
                   "columns":[
                      {
                         "width":"50%",
                         "table":{
                            "body":"$invoiceDetails",
                            "widths":[
                               140,
                               70
                            ]
                         },
                         "layout":{
                            "hLineWidth":"$none",
                            "vLineWidth":"$none",
                            "hLineColor":"#E6E6E6",
                            "paddingLeft":"$none",
                            "paddingRight":"$none"
                         },
                         "fontSize":"12"
                      }
                   ]
                },
                {
                   "style":"invoiceLineItemsTable",
                   "table":{
                      "headerRows":1,
                      "widths":"$invoiceLineItemColumns",
                      "body":"$invoiceLineItems"
                   },
                   "layout":{
                      "hLineWidth":"$notFirst:1",
                      "vLineWidth":"$none",
                      "hLineColor":"#e6e6e6",
                      "paddingLeft":"$none",
                      "paddingRight":"$none",
                      "paddingTop":"$amount:10",
                      "paddingBottom":"$amount:10"
                   },
                   "fontSize":"10"
                },
                {
                   "columns":[
                      {
                         "width":"*",
                         "text":""
                      },
                      {
                         "width":"auto",
                         "style":"subtotals",
                         "table":{
                            "widths":[
                               "*",
                               70
                            ],
                            "body":"$subtotals"
                         },
                         "layout":{
                            "hLineWidth":"$none",
                            "vLineWidth":"$none",
                            "paddingLeft":"$none",
                            "paddingRight":"$none",
                            "paddingTop":"$amount:5",
                            "paddingBottom":"$amount:5"
                         },
                         "fontSize":"10",
                         "margin":[
                            0,
                            -15,
                            0,
                            0
                         ]
                      }
                   ]
                },
                {
                   "columns":[
                      "$notesAndTerms"
                   ],
                   "style":"notesAndTerms"
                }
             ],
             "margin":[
                60,
                130,
                60,
                60
             ]
          }
       ],
       "footer":{
    
       },
       "defaultStyle":{
          "fontSize":8
       },
       "styles":{
          "primaryColor":{
             "color":"$primaryColor:#299CC2"
          },
          "accountDetails":{
             "margin":[
                0,
                2,
                0,
                1
             ]
          },
          "accountAddress":{
             "margin":[
                0,
                2,
                0,
                1
             ]
          },
          "clientDetails":{
             "margin":[
                0,
                2,
                0,
                1
             ]
          },
          "tableHeader":{
             "bold":true
          },
          "costTableHeader":{
             "alignment":"right"
          },
          "qtyTableHeader":{
             "alignment":"right"
          },
          "lineTotalTableHeader":{
             "alignment":"right"
          },
          "invoiceLineItemsTable":{
             "margin":[
                0,
                16,
                0,
                16
             ]
          },
          "cost":{
             "alignment":"right"
          },
          "quantity":{
             "alignment":"right"
          },
          "tax":{
             "alignment":"right"
          },
          "lineTotal":{
             "alignment":"right"
          },
          "subtotals":{
             "alignment":"right"
          },
          "termsLabel":{
             "fontSize":0
          },
          "terms":{
             "margin":[
                0,
                20,
                0,
                0
             ],
             "fontSize":12
          },
          "fullheader":{
             "font":"$headerFont",
             "fontSize":"$fontSizeLargest",
             "bold":true
          },
          "subheader":{
             "font":"$headerFont",
             "fontSize":"$fontSizeLarger"
          },
          "help":{
             "fontSize":"$fontSizeSmaller",
             "color":"#737373"
          },
          "invoiceDocuments":{
             "margin":[
                7,
                0,
                7,
                0
             ]
          },
          "invoiceDocument":{
             "margin":[
                0,
                10,
                0,
                10
             ]
          },
          "notesAndTerms":{
             "margin":[
                0,
                0,
                0,
                0
             ]
          }
       },
       "pageMargins":[
          0,
          0,
          0,
          0
       ],
       "header":{
    
       },
       "background":{
          "image":"data:image/png;base64....large data uri string...",
          "width":595.28,
          "height":841.89
       }
    }
    
    • This reply was modified 1 month ago by  preliot.
    #22217

    Hillel Coren
    Keymaster

    Sorry, I’m not sure. It could be a bug with the library we’re using.

    Does the background image show with a different design?

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Posted in: