How To Style The Sales Quote Price Table Column Headings
QuoteCloud is designed to automate as much layout & presentation of sales quotes as possible. When you first start with QuoteCloud, your default setup may need some slight adjustment for it to fit your organisation style perfectly. The main controls for the look & feel of sales quotes are in the Document Styles in sales quote templates.
When using price tables in the Sales Quote Editor, the presentation of the table when displayed in a sales quote can be carefully controlled by your settings in your sales quote templates. This formatting control helps for a couple of reasons:
- To prevent a Sales Consultant from creating badly presented (ugly!) tables
- To ensure that tables are converted to PDF format properly
When a Sales Consultant inserts a price table, the preloaded formatting and settings from the sales quote template will be used for the table format. These settings can be overridden by the Sales Consultant in the Price Table Properties function of the Sales Quote Editor.
To edit the style of the column headings, hover over the price table headings and click on the Paintbrush Icon to the right of the table, as highlighted below.
The Table Header Style options panel will open. If the current style is set to the default style, the toggle on the right will show INHERIT.
The options available to edit are:
- Background
- Fonts
- Border & Position
When the toggle is switched to CUSTOM it will appear green. This means that the settings are just for this specific Sales Quote and will not translate across other quotes.
To adjust the background colour of the colour headings, simply click on the circle and select the preferred colour. This can be done by using the colour selector range or entering the HEX code in the field. Click CHOOSE to save.
As shown below, the heading background colour is now grey (#ededed).
The Fonts options allow for customisation of the:
- Colour
- Font Size
- Font Weight
- Font Style
- Font Family
- Heading Case
Changing the font colour follows the same process above - selecting the colour from the colour picker or entering a HEX code. For the purpose of this example, the font colour has been changed to orange (#ea5013), as shown below.
To adjust the font size, simply enter your preferred number or click the up / down arrows.
The Font Weight option allows you to select from Bold, Normal, or Light.
Font Style provides the option to make the headings Normal or Italic.
The Font will default to the font family in the Company Settings. If there is a need to adjust the font, simply select from the dropdown list.
Heading Case provides the options to Capitalise the text (first letter of each word capitalised) and Uppercase (all letters of each word capitalised).
Borders & Position sets the border (bottom line) of the column headers. As shown below, the border colour has been set to black (#000000) so is showing a solid black line.
The border style can be changed between solid, dashed, and dotted.
Adjusting the padding above and below the headings can be done by entering the height in px metrics (80px above and 20px below as in the example below).
The border line thickness can be set in the bottom box (3px in the example below).
Related User Guide Topics
