Document layouts are fully customizable using HTML & CSS, and you can add fields to your document layouts that pull data from your Current RMS system using Liquid syntax.
What are HTML and CSS?
Every webpage online is written in HTML; it’s a markup language that defines the structure of a page. CSS is used to style HTML, e.g. setting colors, image sizes, and position of elements.
Why HTML and CSS?
HTML and CSS make up all webpages, so they provide a great deal of power and flexibility in terms of layout and style.
They’re widely known languages, so any web designer or developer can begin to customize layouts without special software or skills.
They’re open and non-proprietary, so there’s lots of resources and courses online about them.
What is Liquid syntax?
Liquid syntax is a template language used in many web applications. We use Liquid syntax to place dynamic content and modify data in document layouts.
For example, you might like to include your telephone number in your document layouts. Rather than typing it in, you can use type {{ current_user.telephone }} to tell Current RMS to output the telephone number against your user profile. If you change your number in future, just edit your user profile and it will be updated on your document layouts too!
To get started with Liquid syntax, see: An introduction to Liquid syntax
Get access to the HTML & CSS of a document
To start making advanced changes, clone any of the default documents that come with Current RMS to get access to the code that makes them up.
To do this, head to System Setup > Document Layouts, find the layout you wish to customize, then choose Clone from the menu to the right.
Modifying an existing document is a great place to start if you’re new to HTML, CSS, and Liquid syntax.
Create a new document
Rather than modify an existing document, you can create an entirely new document. Go to System Setup > Document Layouts and hit the green add document button.
Header, body, footer, and stylesheet
When creating or editing a document, there are four tabs:
Header
Code here appears above the top margin of the document and is repeated on each page when printed to PDF.Body
Code here is placed between the margins of the document. This is where your main content should go.Footer
Code here appears below the bottom margin of the document and is repeated on each page when printed to PDF.Stylesheet
Place your CSS here, between<style type="text/css">and closing</style>tags.
Use the blue Preview and PDF preview buttons to preview your documents.
Next steps
Not comfortable working in HTML?
Take advantage of our document layout modification service.Looking to learn HTML and CSS?
We can’t help with this, but check out something like Codecademy or W3C Schools.Explore Liquid syntax
All of the Liquid we use is documented and we’ve described how it all works. See: An introduction to Liquid syntax