Odoo Qweb Report (Part 2)

How to make CSS works on Odoo Qweb report v8 and v9

Binh Nguyen Xuan

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.

As you can check Odoo Report Document v8 or v9 inside “Useful remarks”:

The first time when I use CSS for the Qweb report is inherit the “report.style”. But that is stupid way since I did not know that “report.style” is the global CSS file, so I added the local report style on it. That is the reason why the older reports were used the new CSS if I modified. So I decided to learn how report style works.
In v8, you just need to call any layout and insert a style tag inside head.
At this time (05/31/2016) maybe Odoo v9 documentation is not updated. Because the “report.style” template was removed in Odoo v9 @.@.

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%;

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"/>

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" />

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

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"/>

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.