Non VAT registered business - "Sub Total" display:none

[alan_mcbrien]

For a business that is not VAT registered the “Sub Total” shown in the “invoice-footer-tbl” on Estimates and Invoices is unrequired.

How do I hide “Sub Total”?

I have found in the Language Table for Invoices and Estimates http://www.quickfile.co.uk/resources/language

Sub Total = footer_01

I have tried with…

.invoice-footer_01{
display:none;
}

But that did nothing.

Any ideas on how to remove “Sub Total”?

[alan_mcbrien]

Also had a look at “Settings - Invoice Settings”.

Whilst there are check boxes for picking which “Invoice Labels”

There is no facility when looking at “Footer Totals” for unchecking “Sub Total”

Perhaps have a check box added to “Footer Totals” to easily remove this from showing on Estimates and Invoices,

[alan_mcbrien]

The “Sub Total” shown on Estimates and Invoices is used when VAT is applied to the net figure, but if not VAT registered this looks rather strange on the documents as always the same as the “Total” box.

[ian_roberts]

@alan_mcbrien

I have tried with…

.invoice-footer_01{
display:none;
}

But that did nothing.

Any ideas on how to remove “Sub Total”?

Looking at the structure with “inspect element” in my browser, I reckon this should work:

.footer-sub-total {
  display: none;
}

The language table isn’t a list of the classes that apply to the existing parts of the invoice, it’s a list of the special classes you would override if you want to change the wording of any of the labels (e.g. to rename “Sub Total” to “Total ex VAT” or similar).

[alan_mcbrien]

A big hug to you Ian for that one. Looks much neater without “Sub Total” displaying. Changed the topic from “feature” to “howto”

[ian_roberts]

Thanks. As a general rule, if you want to know what to customise in the CSS then your browser’s developer tools are your friend - typically you right click on the thing you want to customise and “inspect element”. Here I inspected the cell with the sub total amount and it gave me:

and you can see there that the sub total row as a whole has class="footer-sub-total". The final part of the puzzle is knowing that in CSS you select by class by adding a leading dot

.footer-sub-total {
  /* customisations go here */
}

You can also use more complex selectors, for example if I wanted to highlight the invoice balance cell with a red border. You can’t distinguish this one by a single class selector, but let’s look at the element tree:

So we want the invoice-footer-right-td cell (one element can have several classes at once) that is inside the footer-balance row. In CSS you do “X inside Y” by the selector that finds Y first, then a space, then the selector that finds X - think of it as working your way down from the top of the tree, first look for Y, then inside the Y look for X:

.footer-balance .invoice-footer-right-td {
  border: 2pt dashed red;
}