This is embarrassing but I am struggling to customize the Hipster invoice template. I need to move the logo to the LEFT in the top row, inline and before the | “From” entry for my company.
I tweaked the code a bit but could surely use some help to move the logo to the other side of the page. Can anyone here help? Thanks in advance!
Here is the template code:
[
{
"columns": [
{
"width": 10,
"canvas": [
{
"type": "line",
"x1": 0,
"y1": 0,
"x2": 0,
"y2": 75,
"lineWidth": 0.5
}
]
},
{
"width": 140,
"stack": [
{
"text": "$fromLabelUC",
"style": "fromLabel"
},
"$accountDetails"
]
},
{
"width": 30,
"stack": [
{
"text": " "
},
"$accountAddress"
],
"margin": [
10,
0,
0,
16
]
},
{
"width": 10,
"canvas": [
{
"type": "line",
"x1": 0,
"y1": 0,
"x2": 0,
"y2": 75,
"lineWidth": 0.5
}
]
},
{
"stack": [
{
"text": "$toLabelUC",
"style": "toLabel"
},
"$clientDetails"
]
},
[
{
"image": "$accountLogo",
"fit": [
90,
90
]
}
]
]
},
{
"text": "$entityTypeUC",
"margin": [
0,
4,
0,
8
],
"bold": "true",
"fontSize": 22
},
{
"columnGap": 16,
"columns": [
{
"width": "auto",
"text": [
"$invoiceNoLabel",
" ",
"$invoiceNumberValue"
],
"bold": true,
"color": "$primaryColor:#bc9f2b",
"fontSize": 10
},
{
"width": "auto",
"text": [
"$invoiceDateLabel",
" ",
"$invoiceDateValue"
],
"fontSize": 10
},
{
"width": "auto",
"text": [
"$dueDateLabel?",
" ",
"$dueDateValue"
],
"fontSize": 10
},
{
"width": "*",
"text": [
"$balanceDueLabel",
" ",
{
"text": "$balanceDue",
"bold": true,
"color": "$primaryColor:#bc9f2b"
}
],
"fontSize": 10
}
]
},
{
"margin": [
0,
26,
0,
0
],
"style": "invoiceLineItemsTable",
"table": {
"headerRows": 1,
"widths": "$invoiceLineItemColumns",
"body": "$invoiceLineItems"
},
"layout": {
"hLineWidth": "$none",
"vLineWidth": "$amount:.5",
"paddingLeft": "$amount:8",
"paddingRight": "$amount:8",
"paddingTop": "$amount:8",
"paddingBottom": "$amount:8"
}
},
{
"columns": [
{
"stack": "$notesAndTerms",
"width": "*",
"margin": [
0,
12,
0,
0
]
},
{
"width": 200,
"style": "subtotals",
"table": {
"widths": [
"*",
"36%"
],
"body": "$subtotals"
},
"layout": {
"hLineWidth": "$none",
"vLineWidth": "$notFirst:.5",
"paddingLeft": "$amount:8",
"paddingRight": "$amount:8",
"paddingTop": "$amount:12",
"paddingBottom": "$amount:4"
}
}
]
},
"$signature",
{
"stack": [
"$invoiceDocuments"
],
"style": "invoiceDocuments"
}
]