ESTIMATE Header name colour

How can I change the colour on the Estimate header word ‘ESTIMATE’ and also the word ‘INVOICE’ on the invoice page.

Its too faint when its printed and customers think its an Invoice - you can imagine the confusion!

Hi @Howard

If you go into the Invoice Style Gallery when previewing an invoice, you can edit the CSS of your template. You would need to edit the part where it says .invoice-header-label, for example:

.invoice-header-label {
    color: black !important;
}

If you can’t see a part starting with .invoice-header-label, you can copy and paste the above section into the editor.

This can use a variety of values, if you go to this page, pick your colour and grab the number (either the some starting with a hash, or the one starting ‘rgb’), all you need to do then is simply pop it in place of the word black above, like so:

.invoice-header-label {
    color: #1e63ed !important;
}

or

.invoice-header-label {
    color: rgb(19, 66, 4) !important;
}

It’s worth noting that this will affect both invoices and estimates.

I hope that helps, but let us know if you need any help.

1 Like

Hi, I am struggling a bit to find the exact page for the style gallery. I have the paid version of the screens. Can you do a->b->c type pointer to the page, thanks

Of course. There’s a few screenshots which point out the different parts in the following post. You can access them from the preview invoice page.

The post covers something different, but it would still be the same method to open the CSS editor.

Hopefully this helps!

This topic was automatically closed after 7 days. New replies are no longer allowed.