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.