All Collections
Documents
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 over a week ago

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.

How it works

1. Find the custom CSS tool

1. Go to Settings > Documents.

2. Click Custom CSS.

3. 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 order numbers

.number{
display:none;
}

3. Hide bundle pricing on documents

.price.nested {
visibility: hidden;
}

4. Label company and/or customer on invoices

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

5. Force page break between document table and extra info from template

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

6. Hide start-at & or return-at

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

7. Hiding bundle nested pricing

td.right.autowidth.price.nested{
visibility: hidden;
}

8. Hide stock items on packing slips

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

9. Hide barcodes in packing slips

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

10. Hide duration and tax on documents

td.tax{
display:none;
}
th.vat{
display:none;
}
span.charge-label{
display:none;
}

11. 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;
}

12. Hide charge label (rate)

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

13. 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;
}

14. Hide company country on documents

#top #company-info {
.line-2, span[data-bind^="company.address"] br:nth-of-type(2) {
display: none;
}
}

15. Horizontal custom fields on documents

&#document.document-quote, &#document.document-contract, &#document.document-invoice {
div {
&.additional-information {
display: inline-block;
position: fixed;
padding-top: 50px;
div {
float: left;
width: 160px;
margin-right: 20px;
}
}
&#products {
margin-top: 140px !important;
}
}
}

16. Swap customer address and company address

#top {
.left {
float: right;
}
.right {
float: left;
}
}

17. Hide images on packing slips

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

18. Hide all pricing

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;
}

19. Hide duration and tax

td.tax{
display:none;
}
th.vat{
display:none;
}
span.charge-label{
display:none;
}

20. Hide QR & barcodes on all documents

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

21. Change the font size in the footer in invoices

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

22. Hide the Security deposit line in invoices

&#document.document-invoice {

tbody#totals tr.deposit {
display: none;
}
td.divider {
display: none;
}
}

You're all set!

You have now successfully learned how to customize documents using CSS.

Did this answer your question?