Extending CSS and JavaScript for the website

In this recipe, we'll see how to add custom style sheets and JavaScript to the website.

Getting ready

Create an empty module named ch13_r01 and install it in your test database. Make sure this module depends on the website module, as we use some of its functionality.

How to do it...

Override the main website template to inject your code:

1. Add a file called views/templates.xml and add an empty view override:

   <odoo>
       <template id="assets_frontend" inherit_id="website.assets_frontend">
           <xpath expr="." position="inside">
               <!-- points 2 & 3 go here /-->
           </xpath>
       </template>
   </odoo>

2. Add a reference to your CSS file:

   <link href="/ch13_r01/static/src/css/ch13_r01.css" rel="stylesheet" type="text/css"/>

3. Add a reference to your JavaScript file:

   <script src="/ch13_r01/static/src/js/ch13_r01.js&quot...