Skip to main content
All CollectionsDocuments
How to customize documents using CSS
How to customize documents using CSS

Learn how to elevate document formatting even further by implementing CSS in Booqable.

Catrin Donnelly avatar
Written by Catrin Donnelly
Updated yesterday

In Booqable, you can now add your own CSS (SASS) to make visual adjustments to documents, such actions such as changing colors and font sizes, or hiding specific elements. 

Follow the article below to learn everything possible with customizing documents through CSS in Booqable.

Note: Custom CSS provided in this article is just a suggestion. While we’re unable to offer support for custom CSS, we hope it helps point you in the right direction!

How it works

1. Find the custom CSS tool

  • Go to Settings > Documents.

  • Click Custom CSS.

  • Specify which document to edit

By default, the styling is applied to all documents. To style a specific document, you can use a parent selector.

&#document.document-quote {
  /* styling for quotes */
}

&#document.document-contract {
  /* styling for contracts */
}

&#document.document-invoice {
  /* styling for invoices */
}

&#document.packing_slip {
  /* styling for packing slip */
}

The CSS codes below can be used to customize your documents. Please note that the codes below are just a suggestion, and they can be edited and customized according to your needs.

2. Hide bundle pricing on documents

.price.nested {
visibility: hidden;
}

3. Add a label to company and/or customer on documents

#top .right::before {
content: 'Company Information';
}
#top .left::before {
content: 'Customer Information';
}

4. Force page break on a PDF between the document table and the additional document information

@media print{
table.table{
page-break-after: always;
}}

5. Hide pickup and return dates and times

.starts-at, .stops-at {
display: none !important;
}

6. Hide stock items on packing slips

&#document.packing_slip {
ul.stock{
display: none;
}
}

7. Hide barcodes on packing slips

&#document.packing_slip {
img.barcode-img {
display: none;
}
}

8. Hide taxes

th.vat span, td.tax span, td.charged span {
display: none;
}
th.vat, td.tax {
width: 1px;
padding: 0;
}
th.name, td.name {
width: 100%;
}
th.price, td.price {
padding-left: 0;
}

9. Hide charge label (rate)

#products table .charge-label {
display: none;
}

10. Hide all pricing on documents

td.right.autowidth.price, td.right.autowidth.tax, td.right.autowidth.total{
display:none;
}
tbody#totals{
display:none;
}
th.right.autowidth.price, th.right.vat, th.right.autowidth.total{
display:none;
}

11. Hide product images on packing slips

&#document.packing_slip {
&.packing_slip .product-image {
display: none;
}
}

12. Hide QR & barcodes on all documents

&#document.document-quote, &#document.document-contract, &#document.document-invoice, &#document.packing_slip {
.qr_code, .barcode-img {
display: none;
}
}

13. Change the font size in the footer on invoices

#footer .view .rx-content p {
font-size:12px !important;
}

14. Hide the security deposit line on invoices

&#document.document-invoice {

tbody#totals tr.deposit {
display: none;
}
td.divider {
display: none;
}
}
Did this answer your question?