Modify OpenERP 7 Web Client Style

Here is a simple tutorial how to change the style of OpenERP 7 Web Client. The easiest way is to modify base.sass file and convert it to CSS.

Prepare your Debian system

In order to be able to convert SASS file to CSS you will need to install sass package from RubyGems. First you need to install rubygems using the following command:

ADVERTISEMENT

apt-get install rubygems

After that you will need to fix your path because if you try to run sass you will get sass: Command not found error. To do this type the following commands on your terminal and relogin to refresh your basj script.

echo 'PATH=/var/lib/gems/1.8/bin:$PATH' > /etc/profile.d/gemspath.sh
chmod 0755 /etc/profile.d/gemspath.sh

Now we can use gem to install sass package:

gem install sass

Now that we have our sass converter installed we can start changing base.sass file

Modify OpenERP 7 Web Client Style

In this tutorial I’m going to change the OpenERP 7 Web Client Login page.

For easier editing we need to change sass file and then convert it to css. The base.sass file is located in openerp-web/addons/web/static/src/css/

First make a copy of the original file:

cd openerp-web/addons/web/static/src/css
cp base.sass base.sass.original

Now make the changes you want open the base.sass in your editor and make your changes:

vi base.sass

Here is my diff file of the changes i made for my Login Page:

--- base.sass.original 2013-09-02 15:56:24.000000000 +0200
+++ base.sass 2013-09-02 21:29:24.000000000 +0200
@@ -727,7 +727,7 @@
 border: 1px solid #222
 color: white
 margin: 0
- @include vertical-gradient(#b92020, #600606)
+ @include vertical-gradient(#303030, #70AFD8)
 @include radius(4px)
 @include box-shadow((0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(155, 155, 155, 0.4) inset))
 input, select
@@ -749,8 +749,8 @@
 padding: 5px 10px
 color: #eee
 border: solid 1px #333
- background: #1e1e1e
- background: rgba(30,30,30,0.94)
+ background: #464646
+ background: rgba(70,70,70,0.98)
 @include radius(0 0 8px 8px)
 input
 padding: 2px 4px
@@ -762,15 +762,15 @@
 right: 0
 bottom: 0
 text-shadow: 0 1px 1px #999999
- @include vertical-gradient(#b41616, #600606)
+ @include vertical-gradient(#303030, #70AFD8)
 .oe_login_pane
 position: absolute
 top: 50%
 left: 50%
 margin: -160px -166px
 border: solid 1px #333333
- background: #1e1e1e
- background: rgba(30,30,30,0.94)
+ background: #464646
+ background: rgba(70,70,70,0.98)
 padding: 22px 32px
 color: #eee
 text-align: left
@@ -781,7 +781,7 @@
 font-size: 18px
 .oe_login_logo
 position: absolute
- top: -70px
+ top: -80px
 left: 0
 width: 100%
 margin: 0 auto

You can start your changed around line 710 where you will see // Login {{{

  1. Changed vertical-gradient for the Log in button @@ -727,7 +727,7 @@
  2. Changed background for the .oe_login_dbpane which is the background for selecting your Databases if you have more then one @@ -749,8 +749,8 @@
  3. Changed vertical-gradient for the lower part of the page (from red to gray-blue) and background for .oe_login_pane which is the background for the box around Username and Password fields @@ -762,15 +762,15 @@
  4. Added 10 more pixels for the logo i made mine a bit bigger @@ -781,7 +781,7 @@

After you make the changes in the same directory openerp-web/addons/web/static/src/css/ type make

cd openerp-web/addons/web/static/src/css
make

you should get output like this:

openerp@oerpdev:~/openerp-web/web/addons/web/static/src/css$ make
sass --trace -t expanded base.sass base.css

Also I’ve changed the logo on top of the login_pane with my own logo. You can do this by overwriting openerp-web/addons/web/static/src/img/logo2.png or you can edit openerp-web/addons/web/static/src/xml/base.xml

vi openerp-web/addons/web/static/src/xml/base.xml

Change:

<div><img src='/web/static/src/img/logo2.png'/></div>

To:

<div><img src='/web/static/src/img/your_logo.png'/></div>

Here is the final result that i got:

OpenERP 7 Web Client Style

I hope this is a good starting point for you so you will be able to style your OpenERP 7 Web Client to suit your needs.

RubyGems: http://rubygems.org/
OpenERP Web: https://launchpad.net/openerp-web
SASS: http://sass-lang.com/