CSS to hide the "sent" stamp but not the "paid" one

Invoice CSS
1

There’s an option in the invoice customisation section to select whether to show or hide the status stamp on the PDF version of invoices, but this is a global toggle - you either show all stamps or hide all stamps. I would like something a bit more fine-grained:

  • if the stamp is “sent” then hide it
  • if the stamp is anything else, show it

I have some customers who pay up front, and I send them the invoice with the “paid in full” stamp as a receipt, but other customers who I invoice first and they pay later. For this latter group I’d like to be able to send a PDF without the “SENT” stamp.

The “sent” stamp is a bit of an odd one out as it’s more of a note-to-self to distinguish the sent from draft invoices in my admin view, as opposed to the other stamps (paid, overdue, etc.) that are a signal to the customer about the status of their invoice.

Hiding the “sent” stamp globally is not a problem:

.invStamp_SENT {
    display: none;
}

but when I try to hide it only in the print version:

@media print {
    .invStamp_SENT {
        display: none;
    }
}

this has no effect, with the stamp still shown in all cases. In fact, if I reverse the logic:

.invStamp_SENT {
    display: none;
}

@media screen {
    .invStamp_SENT {
        display: inline-block;
    }
}

it still has no effect, suggesting that the print PDF generator is using the screen media type instead of print.

  1. can this be changed so we can have different rules for print vs screen?
  2. if not is there any other way I could hide the “SENT” stamp on PDFs but leave it visible on screen, without affecting any of the other stamps?
2

Answering my own question…

.invStamp_SENT {
    display: none;
}

body.page-sales-preview .invStamp_SENT {
    display: inline-block;
}

The trick here is that the body.page-sales-preview container only exists in the web preview page, it doesn’t exist in the DOM that the PDF renderer is working from so the print version just uses the less specific display: none rule.