We used cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. What For?

« Back to Blogs

Apply CSS From External File in Odoo Qweb Reports

Qweb reports

 

In this tutorial you will learn how to apply CSS from external .css file in the Qweb reports in both Odoo v8 and Odoo v9. As we know applying inline or internal style CSS in the Qweb reports is very tedious task because we have to restart Odoo server every time after applying very small change in the inline or internal CSS. But using the .css file we will not require to restart the Odoo server every time. So let’s start to do it.

 

STEP 1: Create CSS file:-

 

We have to create CSS file in the following directory:

<module_name>/static/src/css/<file_name>.css

 

STEP 2: Give path of your CSS file:-

 

Now put the following code in the xml file of the report. In this code I have inherited the “minimal_layout” template of the layout.xml file of the report module and gave path of the CSS file.

 

<template id="minimal_layout_inherit" inherit_id="report.minimal_layout">
      <xpath expr="//head" position="inside">
             <link rel='stylesheet' href="/<module_name>/static/src/css/<file_name>.css"/>
      </xpath>
</template>
 
  • Now Restart the server to reflect changes.

Before applying CSS

 

Before applying CSS

 

After applying CSS

 

Apply CSS from External File in Odoo Qweb

 

  • You can check that whether your CSS is loaded or not by checking log in the terminal.Check CSS is Loading or Not using Terminal
  • Please find attached “external_css_demo” module which will help you to understand in better way.

       Download Attachment:

       external_css_demo.zip

contact-us Request a callback WhatsApp