Odoo 14 header customization

Question

In Odoo 14 I would like to edit my invoice. I've been sitting on it for a few hours now and can't get any further. Many header customization are described for Odoo 12 or below and do not give me a concrete answer. I want to have my company address on the right side of the invoice and the buyer's address on the left side where the company address was.

I would like to edit the header so that the company address only appears on the first page and the logo remains on the continuous pages.

When I create a <div class=header>. The whole header is no longer displayed on any page.

<?xml version="1.0"?>
<t t-name="web.external_layout_standard">
        <div class="" t-attf-class="header o_company_#{company.id}_layout" t-att-style="report_header_style">
            <div class="row" >
                <div class="col-6 mb4">
                    <img t-if="company.logo" t-att-src="image_data_uri(company.logo)" style="max-height: 75px;width:80%; object-fit:contain;" alt="Logo"/>
                    <span style="width:150%; font-weight:bold; font-size:smaller;padding:0;margin-bottom:-10px;">Professionelle Businesslösung für Ihren Erfolg</span><br/>
                    <span style="width:150%; font-size:smaller;padding:0;margin-top:-10px;">Smart Solutions - Video Producing - IT Network - Aircraft Solutions</span>
                </div>
                <div class="col-9 text-right" style="margin-top:22px;" t-field="company.report_header" name="moto" />
            </div>
            <div t-if="company.logo or company.report_header" class="row zero_min_height">
                <div class="col-12">
                    <div style="border-bottom: 3px solid #fa0219;"/>
                </div>
            </div>
            <div class="row" style="height:15px;">
                <div class="col-6" style="font-size:x-small;width:100%; padding:50px 0 0 50px;height:20px;">
                 <span>test</span>
                </div>
                <div class="col-6" name="company_address" style="float:right; text-align:right;padding-top:15px; ">
                   <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}"/>
                      <span class="o_force_ltr" t-field="company.phone"/><br/>
                      <span t-field="company.email"/><br/>
                      <span t-field="company.website"/>
                    </div>
                </div>
            </div>
            

        <div style="" t-attf-class="article o_report_layout_standard o_company_#{company.id}_layout" t-att-data-oe-model="o and o._name" t-att-data-oe-id="o and o.id" t-att-data-oe-lang="o and o.env.context.get('lang')">
            <div style="" class="pt-5">
                <!-- This div ensures that the address is not cropped by the header. -->
                <t style="" t-call="web.address_layout"/>
            </div>
            <div style="" class="pt-5">
              <t t-raw="0"/>
            </div>        
        </div>

        <div t-attf-class="footer o_standard_footer o_company_#{company.id}_layout">
            <div class="" style="border-top: 1px solid #fa0219;color:gray;">

                <div name="financial_infos" style="font-size:smaller; text-align:left;float:left;width:90%;margin-top:5px;">
                    <span t-field="company.report_footer"/>
                    <div t-if="report_type == 'pdf'" class="text-muted">
                      Seite: <span class="page"/> / <span class="topage"/>
                    </div>
                </div>
                <div style="float:right;width:69px; text-align:center;margin-top:5px;font-size:smaller;">
                  <img width="69" height="50" src="data:image/gif;>img</img>
                  <span style="width:100%;margin-bottom:2px;padding:0;">ISO</span>
                  <span style="width:100%;margin-bottom:2px;padding:0;">9001:2015</span>
                  <span style="width:100%;margin-bottom:2px;padding:0;">Zertifiziert</span>
                </div>
            </div>
        </div>
    </t>

Answer 1

Odoo expects external_layout to have three main divs: header, article and footer next to each other to render properly.

Looking at your code you put your new lines of code next to a header instead of inside it. This most likely won't work, unless you inherit and change parent view even deeper inside Odoo's source code - which I wouldn't recommend.

You could try putting all of your code inside header or article divs. See if it at least displays and take it from there.

EDIT:

For controlling visibility of a header you could check OCA module Report Qweb Element Page Visibility. Currently there is no version for Odoo 14.0 but it shouldn't be too hard to implement it by yourself as it is basically only a single XML file.

Using functionality from the module above you could just add a class first-page to elements that should be only visible on the first page.

<div class="header">
    <div>
        <!-- Company logo etc - visible on every page -->
    </div>
    <div class="first-page">
        <!-- Company address etc - visible only on the first page -->
    </div>
</div>