Odoo Help

Welcome!

This community is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.

0

How to override CSS on the point of sale?

By
Pascal Tremblay
on 2/17/15, 1:03 PM 2,172 views

Hello all,

 

If I change the CSS code in this file : /home/odoo/addons/point_of_sale/static/src/css/pos.css

I automatically see my changes on the POS.

 

But if I make this changes in my custom module css : /home/odoo/addons/report_lapagept/static/src/css/pos_as.css

impossible to override the original CSS. I never see the changes. Only if they are in the original pos.css.

 

I have tried 2 ways to import my pos_as.css file in my custom module :

  • I put it in my __openerp__.py            

'css': [
        'static/src/css/pos_as.css',
    ],

  • I also tried with a xml file (like usually), but I'm not sure of my declaration

        <template id="assets_pos_as" name="Assets POS - AS" inherit_id="web.assets_backend">
            <xpath expr="." position="inside">
                <link rel="stylesheet" href="/report_lapagept/static/src/css/pos_as.css"/>
            </xpath>
        </template>

 

So, what is the best way TO OVERRIDE the original CSS in the point of sale of Odoo v8?

Thanks all

0

Pascal Tremblay

--Pascal Tremblay--
1312
| 5 2 7
Alma, Canada
--Pascal Tremblay--


Pascal Tremblay
On 3/11/15, 2:21 PM

Did not find better (shorter) way until today.

In /home/odoo-test/odoo-test/addons/pos_lapagept/__openerp__.py :

{
 
    'depends' : ['point_of_sale',],
    "data" : [
                'lapagept_templates.xml',
              ],
}
 

In /home/odoo-test/odoo-test/addons/pos_lapagept/lapagept_templates.xml :

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

<openerp>
    <data>
<template id="index_as" name="POS Index - AS">&lt;!DOCTYPE html&gt;
<html>
    <head>
        <title>Odoo POS - AS</title>

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta http-equiv="content-type" content="text/html, charset=utf-8" />

        <meta name="viewport" content=" width=1024, user-scalable=no"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="mobile-web-app-capable" content="yes"/>

        <link rel="shortcut icon"    sizes="196x196" href="/point_of_sale/static/src/img/touch-icon-196.png"/>
        <link rel="shortcut icon"    sizes="128x128" href="/point_of_sale/static/src/img/touch-icon-128.png"/>
        <link rel="apple-touch-icon"                 href="/point_of_sale/static/src/img/touch-icon-iphone.png"/>
        <link rel="apple-touch-icon" sizes="76x76"   href="/point_of_sale/static/src/img/touch-icon-ipad.png"/>
        <link rel="apple-touch-icon" sizes="120x120" href="/point_of_sale/static/src/img/touch-icon-iphone-retina.png"/>
        <link rel="apple-touch-icon" sizes="152x152" href="/point_of_sale/static/src/img/touch-icon-ipad-retina.png"/>

        <link rel="shortcut icon" href="/web/static/src/img/favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="/point_of_sale/static/src/fonts/lato/stylesheet.css" />
        <link rel="stylesheet" href="/point_of_sale/static/src/fonts/font-awesome-4.0.3/css/font-awesome.min.css" />
        <link rel="stylesheet" href="/point_of_sale/static/src/css/pos.css" id="pos-stylesheet"/>
        <link rel="stylesheet" href="/pos_lapagept/static/src/css/pos_as.css"/>
        <link rel="stylesheet" href="/point_of_sale/static/src/css/keyboard.css" />

        <t t-call-assets="web.assets_common" t-css="false" />
        <t t-call-assets="web.assets_backend" t-css="false" />

        <script type="text/javascript" id="loading-script">
            $(function() {
            var s = new openerp.init(<t t-raw='modules' />);
                <t t-raw='init' />
            });
        </script>

    </head>
    <body>
        <div class='openerp openerp_webclient_container'>
            <table class='oe_webclient'>
                <tr>
                    <td class='oe_application' />
                </tr>
            </table>
        </div>
    </body>
</html>
</template>
<template id="index_pt" name="POS Index - PT">&lt;!DOCTYPE html&gt;
<html>
    <head>
        <title>Odoo POS - PT</title>

        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta http-equiv="content-type" content="text/html, charset=utf-8" />

        <meta name="viewport" content=" width=1024, user-scalable=no"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta name="mobile-web-app-capable" content="yes"/>

        <link rel="shortcut icon"    sizes="196x196" href="/point_of_sale/static/src/img/touch-icon-196.png"/>
        <link rel="shortcut icon"    sizes="128x128" href="/point_of_sale/static/src/img/touch-icon-128.png"/>
        <link rel="apple-touch-icon"                 href="/point_of_sale/static/src/img/touch-icon-iphone.png"/>
        <link rel="apple-touch-icon" sizes="76x76"   href="/point_of_sale/static/src/img/touch-icon-ipad.png"/>
        <link rel="apple-touch-icon" sizes="120x120" href="/point_of_sale/static/src/img/touch-icon-iphone-retina.png"/>
        <link rel="apple-touch-icon" sizes="152x152" href="/point_of_sale/static/src/img/touch-icon-ipad-retina.png"/>

        <link rel="shortcut icon" href="/web/static/src/img/favicon.ico" type="image/x-icon"/>
        <link rel="stylesheet" href="/point_of_sale/static/src/fonts/lato/stylesheet.css" />
        <link rel="stylesheet" href="/point_of_sale/static/src/fonts/font-awesome-4.0.3/css/font-awesome.min.css" />
        <link rel="stylesheet" href="/point_of_sale/static/src/css/pos.css" id="pos-stylesheet"/>
        <link rel="stylesheet" href="/pos_lapagept/static/src/css/pos_pt.css"/>
        <link rel="stylesheet" href="/point_of_sale/static/src/css/keyboard.css" />

        <t t-call-assets="web.assets_common" t-css="false" />
        <t t-call-assets="web.assets_backend" t-css="false" />

        <script type="text/javascript" id="loading-script">
            $(function() {
            var s = new openerp.init(<t t-raw='modules' />);
                <t t-raw='init' />
            });
        </script>

    </head>
    <body>
        <div class='openerp openerp_webclient_container'>
            <table class='oe_webclient'>
                <tr>
                    <td class='oe_application' />
                </tr>
            </table>
        </div>
    </body>
</html>
</template>


    </data>
</openerp>

All the CSS in the file /home/odoo-test/odoo-test/addons/pos_lapagept/static/src/css/pos_as.css will override the CSS in the original pos.css file. It works very well.

But now, somebody here could say to me why it's written « Odoo » rather than « Odoo POS - AS » when I inspect the code. See below image. ??????

 

 

Your Answer

Please try to give a substantial answer. If you wanted to comment on the question or answer, just use the commenting tool. Please remember that you can always revise your answers - no need to answer the same question twice. Also, please don't forget to vote - it really helps to select the best questions and answers!

About This Community

This community is for professionals and enthusiasts of our products and services. Read Guidelines

Question tools

1 follower(s)

Stats

Asked: 2/17/15, 1:03 PM
Seen: 2172 times
Last updated: 3/16/15, 8:10 AM