jueves, 7 de abril de 2011

OpenERP - Customización: WebClient Customization

Actually this is not very difficult to add a logo to the web client. Here are the steps I followed: 
1. Modification of screen.css 
(/usr/local/lib/python2.6/dist-packages/openobject_web-5.2dev-py2.6.egg/addons/openerp/static/css/screen.css) 

Add the following code: 
#company_logo2 { 
    padding: 0 0; 
    width: 95%; 


p#logo2 { 
    float: left; 
    width: 110px; 
    height:65px; 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
    background: url(../images/logo-bg.png) repeat-y; 
    line-height: 50px; 


You can play on the width but not really on the height... 

2. Modification of menu.css 
(/usr/local/lib/python2.6/dist-packages/openobject_web-5.2dev-py2.6.egg/addons/openerp/static/css/menu.css) 

Change the following code: 
#shortcuts { 
    
    position: absolute; 
    float: left; 
    
    margin: 0; 
    padding: 6px 5px; 
    
    top: 35px; 
    left: 183px; 
    width: 100%; 
    height: 30px; 
    line-height: 1.2; 

    background: url(../images/top-bg-b.gif) scroll repeat-x top transparent; 

By the following one: 
#shortcuts { 
    
    position: absolute; 
    float: left; 
    
    margin: 0; 
    padding: 6px 5px; 
    
    top: 35px; 
    left: 304px; 
    width: 100%; 
    height: 30px; 
    line-height: 1.2; 

    background: url(../images/top-bg-b.gif) scroll repeat-x top transparent; 

(here my logo is around 110 px wide + some margin) 

3. modify the header.mako 
(/usr/local/lib/python2.6/dist-packages/openobject_web-5.2dev-py2.6.egg/addons/openerp/controllers/templates/header.mako) 
Change the following code: 
<p id="logo"> 
&nbsp; &nbsp; &nbsp; &nbsp; <a href="http://www.openerp.com" target="_blank"> 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img alt="OpenERP" id="company_logo" src="/openerp/static/images/openerp_small.png"/> 
&nbsp; &nbsp; &nbsp; &nbsp; </a> 
&nbsp; &nbsp; </p> 

By the following one: 
<p id="logo"> 
&nbsp; &nbsp; &nbsp; &nbsp; <a href="http://www.openerp.com" target="_blank"> 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img alt="OpenERP" id="company_logo" src="/openerp/static/images/openerp_small.png"/> 
&nbsp; &nbsp; &nbsp; &nbsp; </a> 
&nbsp; &nbsp; </p> 
&nbsp; &nbsp; <p id="logo2"> 
&nbsp; &nbsp; &nbsp; &nbsp; <a href="http://www.elico-corp.com" target="_blank"> 
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img alt="Elico Corporation" id="company_logo2" src="/openerp/static/images/elico_small.png"/> 
&nbsp; &nbsp; &nbsp; &nbsp; </a> 
&nbsp; &nbsp; </p> 

4. Add a png file 
(/usr/local/lib/python2.6/dist-packages/openobject_web-5.2dev-py2.6.egg/addons/openerp/static/images/elico_small.png) 
(110 px wide x 65px high in my case) 

Et voilà! you can have a look at the final result here: 
http://demo_v6.elico-corp.net/ 

PS: you dont need to restart the openobject-web server each time you change the css files but yes you have to when changing the mako file... 

Hope it helps! 
[/b] 

No hay comentarios:

Publicar un comentario