Skip to content

Changing the color and size of invoice elements using advanced CSS codes

• Number of views: 7067 • 1 min read
To change the color and size of certain invoice elements, go to Settings > Account settings > Print settings > Customize print with CSS and paste the following CSS code:

You may select whether your changes will apply to a printed invoice, previewed invoice, or both.

In order for the changes to apply to printed invoices only, start by pasting the following code:

}
@media print{ 

In order for the changes to apply to previewed invoices only, start by pasting the following code:

}
@media screen{ 

In order for the changes to apply to printed and previewed invoices, start by pasting the following code:

}
@media all{ 


Changing the color and font in the seller section (only works in the Default template):

table.clean.to_half > tbody > tr > td:first-child p + p + p { color: red !important; font-size:1.4em; }</code>

<code>table.clean.to_half > tbody > tr > td:first-child p + p + p + p{ color: #000 !important; }</code>

<code>table.clean.split_half > tbody > tr > td:first-child p:last-child{ color: red !important; font-size:1.4em; }</code>



These codes will make the Due date and your Bank info stand out:

duedate

 
In order for it to work in the Blue template, paste the following code:

.additional_data p + p + p { color: red !important; font-size:1.4em; }

Was this entry helpful?

Share

Comments (2)

Wayne 2026-10-30 15:56

How to change the colour of the button as this does not work

.btn-default {
color: #ffffff;
background-color: #34a1b1;
border-color: #ccc;
font-weight: 700;
}

Carolina Escobar
Carolina 2026-11-03 09:30

The CSS codes mentioned here are only for the Default template as mentioned in the article. If you are using another template these codes wont work. The code is intended to change the color of some of the elements in the invoice as described in the article. If you have more questions, do not hesitate to contact us at: info@invoiceocean.com