Invoice customisation CSS editor help

I’d like to change the default font of the Total amount in the Task section of my invoice to have no text decoration and normal font weight. This is the last figure at the end of the Task (hourly rate) section of the invoice, before the “Items” section (td.invoice-items-footer-total). It’s underlined and bold by default, the same as the Balance Due figure so my clients often confuse the two and send the wrong payment.
Editing the html in my browser inspector worked so I inserted this into my CSS editor:

.invoice-items-footer-total {
text-decoration:none;
font-weight:normal;
}

but the text doesn’t change.

Could anyone enlighten me with a bit of explanation as to what I’m doing wrong?

Thanks

Hello @almalaci

Is this the result you are after

image

I added

.thItems6 {
display:none;
}

in place of your

.invoice-items-footer-total {
text-decoration:none;
font-weight:normal;
}

Hi Steve,

Thanks for your reply. It’s not those items that I mean. The change I want to make only applies to invoices that have both Task and Items sections, so it would only show on those like Invoice #1576. It’s the 225.00 that I’d like to change to 225.00.

Hope that helps,

Laszlo

Hello @almalaci

You could try something like this

td.invoice-items-footer-total {
    font-weight: normal !important;
    text-decoration: none !important;
}

Hi Steve,
That did the trick, the ‘!important’ rule was needed to override the html.
Thanks very much, it will help a lot to avoid future confusion with my invoices.

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