How to Add CSS Files to a Custom Module in Odoo

How to add css files to a custom module in Odoo?

You must create the css file in this route: /module_name/static/src/css/module_name.css. Example of file:
```
 .openerp .classname{
     margin: 12px 0px 12px 0px;
 }
```

Create the file /module_name/views/module_name.xml with this content:

 <?xml version="1.0"?>
 <openerp>
     <data>
         <template id="assets_backend" name="module_name assets" inherit_id="web.assets_backend">
             <xpath expr="." position="inside">
                 <link rel="stylesheet" href="/module_name/static/src/css/module_name.css"/>
             </xpath>
         </template>
     </data>     
 </openerp>

Add the xml file to your __openerp.__py

 'data': [
     'views/module_name.xml',
 ],

Add the class to the elements in the view

 <div class="classname">                            
     <field name="field_name" class="other_class"/>
 </div>

How to use custom CSS in an Odoo 10 POS addon

My Javascript and CSS are now being added to the point_of_sale.assets files. It turns out that my QWeb template file in static/src/xml/ had errors which caused some of the Odoo app files to not be found. It might also be the reason why Odoo didn't update web.assets_backend.js and the point_of_sale.assets js and css files.

Here's my updated XML assets file:

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="assets" inherit_id="point_of_sale.assets" name="donation assets">
        <xpath expr="." position="inside">
            <script type="text/javascript" src="/donation/static/lib/jquery.sglide.js"></script>
            <script type="text/javascript" src="/donation/static/lib/sGlide.js"></script>
            <script type="text/javascript" src="/donation/static/src/js/donation.js"></script>
        </xpath>

        <xpath expr="//link[@id='pos-stylesheet']" position="after">
            <link rel="stylesheet" href="/donation/static/src/css/donation.css" />
        </xpath>
    </template>
</odoo>

How to override website_slides CSS?

You need to inherit the website.assets_frontend template to include the new scss file.

First, create a module (you can check the Building a Module documentation), then:

Add website_slides module to the manifest depends list.

Inherit the website.assets_frontend template like following:

<?xml version="1.0" encoding="utf-8"?>
<odoo>

    <template id="assets_frontend" inherit_id="website.assets_frontend" name="Slides Frontend Assets">
        <xpath expr="//link[last()]" position="after">
            <link rel="stylesheet" type="text/scss" href="/MODULE_NAME/static/src/scss/website_slides.scss" t-ignore="true"/>
        </xpath>
    </template>

</odoo>

Create an assets.xml XML file and add to it the above code then add it to the data list in the manifest file.

Create a scss file under static/src/scss/website_slides.scss and add the following scss code:

.o_wslides_gradient {
    background-image: linear-gradient(120deg, #7C7BAD, darken(#7C7BAD, 10%));
}

Error after adding CSS code to my module (ODOO 12)

You have defined the scss => GestionIMMO/static/src/scss/GestionIMMO.scss
where on the assets you add the wrong path ref /GestionIMMO/static/src/css/GestionIMMO.css.

Correct to the

<link rel="stylesheet" href="/GestionIMMO/static/src/scss/GestionIMMO.scss"/>

Thanks

How to Add CSS Files to a Custom Module in Odoo