Change a Label

If there’s no transform class that will cause QuickFile to change the text in the HTML then there is a trick that you can use to make the change in pure CSS. Each tr in the details table has a unique class name that we can target (e.g. tr-invoice-details-invno for the invoice number, tr-invoice-details-desc for the “Invoice Name”, etc. - you can find the correct one with “inspect element” in your browser), then use the special ::after selector to replace the text entirely within the CSS stylesheet:

/* hide the standard text by shrinking it to size zero */
table.invoice-details-tbl .tr-invoice-details-desc .invoice-details-left-td strong {
  font-size: 0;
}

/* add the replacement text in an ::after, overridden back to the standard font size */
table.invoice-details-tbl .tr-invoice-details-desc .invoice-details-left-td strong::after {
  font-size: 11px;
  content: "Name of invoice";
}

The ::after pseudo-element behaves as if it were the last child before the closing tag, you can imagine it as

<strong>Invoice Name<::after>Name of invoice</::after></strong>

This is why we have to explicitly countermand the font-size: 0, otherwise the ::after would inherit the zero size from its strong parent.