Focus: The focus of this Self Help article is to provide you information and steps in order in order to use Custom CSS for your templates.

What is Custom CSS?  Customized CSS can be used in the Template theme editor, so you can easily customize the look and feel of proposals without being a web developer or HTML&CSS guru. Sometimes we need something more sophisticated, which may only be possible with a little CSS tweaking.  Quote Roller provides CSS support to give you more control over styling your templates and proposals. Using custom CSS code, you can hide elements, change fonts, text size, backgrounds, modify the pricing table and do pretty much everything that can be done with CSS in the confides of the Quote Roller System.

Step 1: To add custom CSS code.   Go to Templates > Create or edit your template and click on Change Design. 

Step 2: On the left, scroll all the way down until you see the gray button “edit custom CSS”.

 
Please note: After you Add the Custom CSS code, click on the orange button “Save and Apply”. Next, if you plan on using the PDF Version of the proposal, click on “Download PDF” This will test to see if the PDF Version will work correctly with the added code. If it does not work, then there is an issue with the code.

Where can I get a list of elements that can be styled?

Use Web inspector(Chrome) or Firebug(Firefox) to understand a structure of the document and find out which elements could be styled. The same structure is used for web and PDF versions.

If you would like to view examples of Custom CSS code that you can add, click here.

Have Questions, please feel free to contact us?
For faster support, please login into your Quote Roller account and click on the blue Help/Questions button found on the upper right of your account.