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.