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:
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 {{{
- Changed vertical-gradient for the Log in button @@ -727,7 +727,7 @@
- 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 @@
- 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 @@
- 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:
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/
very nice