This is the Part 2 of the Odoo Qweb Report Series. You can check the Part 1: Installation and Quick Creation.

Each company has difference report style, actually. When I written the first report, I add the style attributes inside the html tags. That is the fastest way, but if you are the web developer, that is not the best way to add style to html elements. You can check in the event module (odoo native module) “event/report/event_event_templates.xml” there are a lot of style attributes added directly to div elements.

For Odoo v8

Step 1: Creating style report template

Let’s consider that style template as a style.css file:

<template id="odoo_qweb_report_sample.product_template_report_template_style">
	.page {
	    font-size: 20px;
	    font-weight: bold;
	    text-align: center;
	    width: 100%;
	}
</template>

Step 2: Defined the report layout

<template id="odoo_qweb_report_sample.product_template_report_template_layout" inherit_id="web.layout">
    <xpath expr="//head" position="inside">
        <style type="text/css">
            <t t-call="odoo_qweb_report_sample.product_template_report_template_style"/>
        </style>
    </xpath>
</template>

You can choose any layout template which render the html doctype :D

Step 3: Call the new layout in the first line of the report template

<template id="odoo_qweb_report_sample.product_template_report_template">
    <t t-call="odoo_qweb_report_sample.product_template_report_template_layout"/>
    <t t-call="report.html_container">
        <t t-foreach="docs" t-as="o">
            <div class="page">
		<t t-esc="o.name" />
	    </div>
	</t>
    </t>
</template>

When you call the layout include the style tag on header, the report function will be recognize the CSS and add to reports.

If you are using Odoo v8. That's enough for you. The sample code available on my github repository branch 2.0.2.0.

But when I apply those code lines in v9. I face some trouble. Actually, Odoo v9 does not support you define the individual css class style. May be they want to user (developer) defined the global CSS class for all of Qweb reports. That is great idea. But if you want to make the CSS by yourself on each report. Let's consider to next steps and make everything simply.

Only v9

Step 4: Add CSS condition for “report.minimal_layout”

Creating new folder to inheritance

Add this code inside:

<template id="minimal_layout" inherit_id="report.minimal_layout">
    <xpath expr="//head" position="inside">
        <t t-if="css">
            <style type="text/css">
                <t t-raw="css"/>
            </style>
        </t>
    </xpath>
</template>

Step 5: Override the function which render pdf

Create new model for inheritance

Since too much line inside this function so please check in my github repository branch 2.0.1 with all of sample code.

After apply the inheritance, you can upgrade module and print your result.

Inside the sample code, please consider that branch 2.0 for v8 and branch 2.0.1 for v9.