Home Forums Support Please Help me Customize the Hipster Template

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

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

    SemoTech
    Participant

    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"
      }
    ]
    • This topic was modified 3 weeks, 2 days ago by  SemoTech.
    #23946

    SemoTech
    Participant

    Anyone able to help?

    #23947

    SemoTech
    Participant

    Never mind, figured it out myself. Here is the customized Hipster invoice template code for anyone else that may want/need it:

    [
      {
        "columns": [
          {
            "image": "$accountLogo",
            "fit": [
              120,
              100
            ],
            "margin": [
              0,
              0,
              20,
              30
            ]
          },
          {
            "width": 10,
            "canvas": [
              {
                "type": "line",
                "x1": 0,
                "y1": 0,
                "x2": 0,
                "y2": 85,
                "lineWidth": 0.5
              }
            ]
          },
          {
            "width": 135,
            "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": 85,
                "lineWidth": 0.5
              }
            ]
          },
          {
            "width": 180,
            "stack": [
              {
                "text": "$toLabelUC",
                "style": "toLabel"
              },
              "$clientDetails"
            ]
          },
          []
        ]
      },
      {
        "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"
      }
    ]
    #23967

    Hillel Coren
    Keymaster

    Thanks for sharing the solution!

    The design editor is pretty painful to use, in the next version it will be replaced with HTML/CSS.

    #23996

    SemoTech
    Participant

    Of course Hillel, sharing is caring. Looking forward to an improved invoice editor. Any idea on general ETA (even if within a quarter) for V2?

    #24005

    Hillel Coren
    Keymaster

    We hope to release the first alpha (ie, buggy) release by the end of the month.

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

You must be logged in to reply to this topic.

Posted in: