CSS Transform Class

[woter324]

Continuing the discussion from Customise any invoice or estimate label using CSS:

@Glenn

Last week we deployed an update that gives you greater control over the label text in your invoices and estimates. In fact using special CSS classes you can now override any static labels on your templates. When I say “static labels” I’m referring to these.

<img src=“//quickfile-co-uk-forum-assets.s3.dualstack.eu-west-1.amazonaws.com/original/2X/d/df3f664339cdb198fac53db7394d97e0d16ad8c9.png” width=“642” height=“225”>

We’ve included a lookup table so you can locate the names of each of these labels, you can then use special .transform- classes to override their content as per the following example.

.transform-invTypeName1 {
       content: “MY NEW LABEL”
}

The above example overrides the “INVOICE” label to “MY NEW LABEL”.

This is quite an advanced feature so I’d recommend you first read up a little bit about CSS editing here. This will explain where you can find the CSS editor along with some basic guidance on moving, resizing and styling elements.

The full guide relating to these new CSS transform classes can be found here.

Something I discovered, be careful copying and pasting Glenn’s example above. The CSS editor doesn’t like the inverted commas after content: . At least, Chrome doesn’t. They paste as curly, whereas typing them, they’re straight.

Actually, on closer inspection it looks like it was a combination of the inverted commas and a period:

Take the period out, or change the commas and it’s fine.

Hope that makes sense.

Thanks

W.

[Lurch]

Smart quotes.

Start Using Quotation Marks the “Correct” Way

The following should be correct.

.transform-invTypeName1 {
       content: "MY NEW LABEL"
}

You will often find that copying directly from forums and webpages in general will also copy things you don’t want so it’s always worth pasting into a text editor first to clear any lingering formatting and special characters.

[Glenn]

Thank you for pointing this out, I’ve corrected the original post.

It was most likely a copy + paste from Word that I missed.