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