CSS transformations

Introduction

CSS Transforms are an extended set of CSS classes that allow you to change the textual content on an invoice or estimate. For example if you want to rename a static label on an invoice like the term “Invoice No.” you can use a CSS transform class to change it to something else like “Document No.”. You can even change the entire language for all the static labels.

Here’s an example of what we’d call static labels:

Every label on the invoice and estimate template has a name that can be accessed in the CSS editor. If you haven’t used the CSS editor yet you can find out more about where it is and what it can do here .

How to modify a static label with CSS

First you will need to identify the name of the label. Each label has a unique identifier that we must know before we can overwrite it’s content. Please see here for a list of label names

Once you know the label name you can change its content by adding the following CSS:

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

Effectively, all we have done here is prefix the label name with “.transform-” and enclosed a content attribute in the new class. The content attribute would display the new text/html you’d like to inject into the label.

Please Note: These CSS classes should only contain a contents attribute, no other styling attributes will be recognised in transform classes.

Conclusion

CSS was never designed to overwrite the textual content in web pages, so we’ve used some clever hacks to parse out these custom “.transform” classes and swap out any text. You can use the CSS transform classes in QuickFile for all kinds of customisation, from modifying the language to creating custom document types.

To explore a number of other styling techniques take a look at 10 basic CSS tricks for styling your invoices.