How to use custom CSS in an Odoo 10 POS addon - css

Question

My custom CSS isn't being loaded when I launch the POS app, but it's loaded into web.assets_backend.1.css in the dashboard. My custom Javascript is being loaded correctly. Is this the correct way to load the CSS? Thanks for your help.
<?xml version="1.0" encoding="UTF-8"?>
<odoo>
<data>
<template id="assets_backend" inherit_id="web.assets_backend" name="donation_assets_backend">
<xpath expr="." position="inside">
<link rel="stylesheet" href="/donation/static/src/css/donation.css" />
<script type="text/javascript" src="/donation/static/src/js/donation.js"></script>
<script type="text/javascript" src="/donation/static/src/js/jquery.sglide.js"></script>
<script type="text/javascript" src="/donation/static/src/js/sGlide.js"></script>
<script type="text/javascript" src="/donation/static/src/js/donation_frontend.js"></script>
</xpath>
</template>
</data>
</odoo>

Answer 1

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>

Answer 2

Not sure, but did you add the point_of_sale module in the dependencies of your donation module?
If not add "depends" : ["point_of_sale"], to the dict in your _openerp_.py. Add more dependencies if needed.
Now the point_of_sale module and it's assets gets loaded first.
Edit: Try inherit_id="point_of_sale.assets" instead of inherit_id="web.assets_backend". That could do it for you.

Answer 3

You need to update the path of css file in three places.
1.inherit_id="web.assets_backend"
2.inherit_id="web.assets_frontend"
3.inherit_id="point_of_sale.assets"
In the templates which inherites the above templates.
The code is shown below.
<template id="assets_backend" name="sub_menu assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<link rel="stylesheet" href="/pos_update/static/src/css/mypos.css"/>
</xpath>
</template>
<template id="assets_frontend" name="sub_menu assets front" inherit_id="web.assets_frontend">
<xpath expr="." position="inside">
<link rel="stylesheet" href="/pos_update/static/src/css/mypos.css"/>
</xpath>
</template>
<data>
<template id="assets" inherit_id="point_of_sale.assets">
<xpath expr="." position="inside">
<link rel="stylesheet" href="/pos_update/static/src/css/mypos.css"/>
<script type="text/javascript" src="/pos_update/static/src/js/cancel.js"></script>
</xpath>
</template>
</data>
You also need to ensure that if you want to modify an existing template then the stylesheet name must not be changed.
If you want to create a stylesheet for your template the you only need to set the path of stylesheet in only one place, ie in the main template file in which you are setting the path of js file.
<template id="assets" inherit_id="point_of_sale.assets">
<xpath expr="." position="inside">
<link rel="stylesheet" href="/pos_update/static/src/css/mypos.css"/>
<script type="text/javascript" src="/pos_update/static/src/js/cancel.js"></script>
</xpath>
</template>