Simple customization

Self-Hosted | v5
#1

Hello everyone.

After much suffering I have managed to get Invoice Ninja v5 working on my Synology NAS.

I already have almost everything configured, I just want to make a simple customization in the invoices and quotes template.

  • I would like to know how I can add a small image in the footer of the document, as a signature.

  • I would like to add the bank account number in the template but that it is well visible, if I add it in the terms of invoicing or budget appears in text format (no bold and no option to increase the weight of the font). If possible I would like to add a box like the invoice details (where the invoice number and date are shown), but below the product table.

I hope that both modifications will be easy.

Thank you very much.

Regards.

#2

@cm84

Glad to hear you have got everything working.

The templates in v5 are just plain css/html so you can add a image anywhere by using tags

If you wish for the image in the footer, just add this into the footer tab.

#3

Thanks for the answer.

I pretty much had an idea that the solution would be that, add the code to add the image.

My doubt is where I upload the image?

From the GUI I have not found where to upload images (in v4 I seemed to see what there was a section where to do it).

Or if it is in a specific directory, what is it?

Thank you again.

#4

You could load it anywhere that is accessible on the web. if you wish - you could add it to the public/images folder and then reference it from there.

#5

hello again.

I’ve almost got it to taste.

One last minute question. How do I add a blank line break between “Terms” and my text? It is too close together.

imagen

#6

It should work to use a BR or P HTML tag

#7

Sorry for the absence but I have been sick with COVID.

I managed to make the line breaks, thank you very much.

Now I get a new change in the product table.

I want to raise to the top the title of the concept, because if I add a lot of text in the description it looks a bit bad aesthetically. how can I do it?

imagen
imagen1210×777 45.7 KB

#8

@ben can you please advise?

#9

Hi again.

@ben can you help me please?

Anothers problems.

In the budget details, the validity of the quotes does not appear despite having this field added in the configuration.

On the other hand the size of the logo I can not reduce it, I have changed the maximum percentage of the html code and in the preview if it is reduced but then when the PDF is generated (in quotes at least) the logo is still large which reduces the table of the details.

#10

Is this what you trying to achieve?

image
image1920×964 121 KB

If so, you can use following CSS:

[data-ref="product_table-product.item-td"] {
    vertical-align: top;
}

For the rest of issues, please open threads separately, this allows us to track issues more easily.

#11

Great, it’s working! thanks @ben
For unit cost, units and total can be put in the top as well?

the other problems I have already solved, I just found another bug that I can’t solve, but I will open a new thread for it.

#12

You can follow the same practice I used, we have documentation for this: Free Source Available Invoicing, Expenses & Time-Tracking | Invoice Ninja

#13

This was very helpful but I am stuck. I was able to get all of the fields but the service rate to align on top. The HTML mode of the design editor doesn’t have a preview for services so I am not sure how to verify the tag. This is what I have.

[data-ref=“task_table-task.rate-td”] {
vertical-align: top;
}

#14

Finally was able to see a preview with items and tasks, maybe from a recent update. The tag for service rate is “task_table-task.cost-td”.