Odoo: how to edit invoice / quote layout CSS

2
votes

We are building an Odoo 13 EE / CE installation and would like to make small changes for PDF quotations and invoices. There are small problems that would be pretty simple to fix with editing CSS file. Those are:

  • Increasing the size of the customer logo (upper left hand corner)
  • Reducing the font size of sender name and address as they overfow to multiple lines
  • Fixing the too small text area where recipient name and address are. Modify its location at the middle right hand corner (above the Quotation #S000003)
  • Adding a style for generic terms and conditions (small print)

From Settings -> General -> Business Documents -> Layout, We can see that this PDF is using external_layout_standard QView and we can access the XML architecture of this report. However, editing this view as an Odoo admin does not allow access to CSS files where we would be able to modify <DIV class> attributes like font size and element size.

This server is hosted on Odoo.sh platform, so we do not have an access to the file system. Our options are either to modify the system parameters or create a totally new extension. The latter seems a bit overkill because the changes are so small and we actually would need to go and modify all Odoo-generated PDFs like quotations, order confirmations, purchase orders, repair orders etc. etc.

So, can anyone advice what is the correct approach of modifying these Odoo-generated PDFs and how to access their CSS?

Screen captures illustrating the problem:

https://snipboard.io/9UYmBd.jpg

enter image description here https://snipboard.io/8pIjB9.jpg

enter image description here

3
cssodoo
Add inline CSS if possible. – Keval Mehta

3 Answers

1
votes

Thanks to @Ex4 for the idea. The quick & dirty solution is exactly to add a style attribute for DIV sections. This is hardly the ideal solution, but resolves the inmediate problem.

To apply the QnD-solution, follow the steps:

  1. Settings with Developer mode on -> Edit document layout under Business documents

  2. Look for section

<div class="col-6" name="company_address">
    <div t-field="company.partner_id" t-options="{&quot;widget&quot;: &quot;contact&quot;, &quot;fields&quot;: [&quot;address&quot;, &quot;name&quot;], &quot;no_marker&quot;: true}"/>
</div>

Add Style attribute (style="font-size:14px") for inner <div>:

<div class="col-6" name="company_address">
    <div t-field="company.partner_id" style="font-size:14px" t-options="{&quot;widget&quot;: &quot;contact&quot;, &quot;fields&quot;: [&quot;address&quot;, &quot;name&quot;], &quot;no_marker&quot;: true}"/>
</div>
  1. This changes the sender company address font size. We do still need to change the recipient address font size.
  2. Navigate to Settings -> Technical -> Views (under User interface)
  3. Search for address_layout
  4. Add same style attbute (style="font-size:14px") for section:
<div style="font-size:14px" name="address" t-att-class="colclass">
    <t t-raw="address"/>
</div>

The end result is not the prettiest layout in the world, but it works: https://snipboard.io/oDicR7.jpg

The right way is apparently to inherit 'account.report_invoice_document' and then change the template code. So this is not possible with only Odoo admin UI. It requires writing a small extension.

1
votes

I too had this problem and with thanks to Ossi Mantylahti who pointed me to this thread I have managed to change the address format also both purchase order and RFQ pdf documents to make them more acceptable

Modify this file for purchase orders Technical -> Views -> report_purchaseorder_document Locate the section 

        <h4 t-if="o.state in ['sent', 'to approve']">Purchase Order #<span t-field="o.name"/></h4>
        <h4 t-if="o.state in ['purchase', 'done']">Purchase Order #<span t-field="o.name"/></h4>
        <h4 t-if="o.state == 'cancel'">Cancelled Purchase Order #<span t-field="o.name"/></h4>

For RFQ modify views -> report_purchasequotation_document Request for Quotation

Note these header tags were h2's

0
votes

As a quick 'n dirty solution, could you just give style attribute to a element.

As far as I know you cannot modify CSS from user interface. You have to create a custom module and install it instead.