CODEWITHSUNDEEP
cssodoo
Ossi Mantylahti
Ossi Mantylahti

Reputation: 68

Odoo: how to edit invoice / quote layout CSS

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:

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

Upvotes: 2

Views: 6992

Answers (3)

learningsomething
learningsomething

Reputation: 11

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

Request for Quotation # 
        <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

Upvotes: 1

Ossi Mantylahti
Ossi Mantylahti

Reputation: 68

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.

Upvotes: 1

ex4
ex4

Reputation: 2428

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.

Upvotes: 0

Related Questions