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.
Once cloned, use HTML, CSS, and Liquid Syntax to refine the layout. Liquid Syntax is particularly powerful for inserting dynamic content into your documents. For guidance, refer to Liquid Syntax Documentation.
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.
Troubleshooting Document Layout Visibility Issues
If a document layout you’ve created isn’t appearing as an option (e.g., for purchase orders), here's a simple step-by-step troubleshooting guide:
Check Document Status: Ensure that the document layout is set to Active.
Verify Status Associations: Confirm that the layout is associated with the appropriate statuses. For instance, purchase orders will only display document layouts linked to their specific status settings.
Edit and Verify Settings: Navigate to
System Setup > Document Layouts. Select the document in question and edit its settings to verify its status and associations.
By ensuring the above configurations, your document layout should appear as an available option.
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 for more advanced modifications?Check out our Document Modification Service Request page for expert assistance with complex customizations.
Looking to learn HTML and CSS?We can’t help with this, but check out something like Codecademy or W3C Schools.
Explore Liquid syntax of the Liquid we use is documented and we’ve described how it all works. See: An introduction to Liquid syntax