This guide explains how to change your Odoo theme or template manually from the CentOS or Ubuntu server command line.
Connect to Your Remote Server
The first thing you need to do is connect to the server where your Odoo instance is hosted by using SSH. Here's the guide to show you how to do that. This will allow you to execute the commands on your server from the terminal.
Creating a Theme
Once you’re in, let's find your Odoo home folder, since it's where we will be working in.
Use the following command to find the Odoo binary file:
sudo find / -type f -name 'odoo-bin'If you get a result with a path like /opt/odoo/odoo13/odoo-bin, then your Odoo home folder is /opt/odoo/odoo13 (the path may be different for you).
If you don't get any results, it means that you're running an older version of Odoo. Try looking for the odoo.py file instead:
sudo find / -type f -name 'odoo.py'You will get a result with a path like /opt/odoo/odoo.py, which means that your Odoo home folder is /opt/odoo (the path may be different for you).
Now, let's switch to the odoo user:
sudo su odoo
Navigate to your Odoo home folder (the path might be different for you, see examples above):
cd /opt/odoo/odoo13
Use this command to see the details of your Odoo background process:
ps aux | grep odoo
You will see a list of processes that have the word ‘odoo’ in their process name/info. Look for a line like this (should start with odoo):
odoo 1043 0.3 7.4 408392 75092 ? Ssl 13:42 0:01 /usr/bin/python3 /usr/bin/odoo --config /etc/odoo/odoo.conf --logfile /var/log/odoo/odoo-server.logIn this example, there are two paths before the --config (in some cases just -c) argument.
The first one, /usr/bin/python3, indicates that Odoo uses a system-wide Python environment. This is good, because it means you don't have to do anything extra for the next step.
If your path looks similar to this one (i.e. the path starts with /usr/bin/), then you are ready to proceed to the next command.
However, if you have a newer Odoo version, your Python path may look like this: /opt/odoo/odoo13-venv/bin/python3.
As you can see, there is venv in the path, which means that Odoo is not using the default system-wide Python version, but a separate virtual environment.
If that's your case, then you need to activate the virtual environment before executing any Odoo commands (otherwise you'll get an error).
In our example, the path ends with python3. We need to change it so that it ends with activate instead.
Before: /opt/odoo/odoo13-venv/bin/python3
After: /opt/odoo/odoo13-venv/bin/activate
Now we have to use that path to activate the virtual environment with the following command (again, the path may be slightly different for you):
source /opt/odoo/odoo13-venv/bin/activate
Finally, we can create a basic Odoo module and a theme template:
./odoo.py scaffold -t theme "Dummy Theme" addonsNote: change ./odoo.py to ./odoo-bin if you get an error about a missing file.
If the command is successful, you will have a new directory called dummy_theme/ in the addons/ directory.
The ./addons/dummy_theme/static is a directory where stylesheet files are located.
The ./addons/dummy_theme/views is a directory with XML files that describe the theme and its features to Odoo.
Creating a Template
In Odoo, a template is just a page with some XML formatting. You can simply copy and paste the page contents from the example below to create a new template.
Use the following command to create a new file in the ./addons/dummy_theme/views/ directory called pages.xml and open it:
nano ./addons/dummy_theme/views/page.xml
Paste (or type in) the following lines:
<template id="website.hello" name="Homepage" page="True">
<t t-call="website.layout">
<div id="wrap" class="oe_structure oe_empty">
</div>
</t>
</template>Save the file by pressing Ctrl + o and then Enter. Exit the file with Ctrl + x.
The next stepp is to tell Odoo to ignore certain files in your dummy theme. Start editing the __manifest__.py file.
nano ./addons/dummy_theme/__manifest__.py
Find the lines containing the following filenames: options.xml, snippets.xml, and pages.xml. There will be a total of three lines. Before each line, put the following character: # (hashtag sign).
Anything that goes after the hashtag sign gets ignored by Python (and therefore Odoo). It's called a comment, and is used to omit certain pieces of code/configuration from being executed.
Your __manifest__.py should look similar to this:
{
# Theme information
'name':'Dummy Theme',
'description': ' ',
'category': 'Theme',
'version':'1.0',
'depends': ['website'],
# templates
'data': [
# 'views/options.xml',
# 'views/snippets.xml'
],
# demo pages
'demo': [
# 'demo/pages.xml',
],
# Your information
'author':'My company',
'website': '',
}
Use the following command to run the Odoo server and update the theme
./odoo.py -u dummy_themeNote: change ./odoo.py to ./odoo-bin if you get an error about a missing file.
Note 2: if you're getting the socket error, it means that Odoo is already running.
Now that your Odoo instance is running, install the theme from the graphical interface.
Go to the following link to see it:
http://localhost:8069/page/hello Note: change localhost to the IP address of your remote server if you're not running Odoo locally.
Editing Page Content
Let's try to make some changes to the content with Bootstrap (a CSS framework for easy styling).
<template id="website.hello" name="Homepage" page="True">
<t t-call="website.layout">
<div id="wrap" class="oe_structure oe_empty">
<section>
<div class="container">
<div class="row">
<h1>This is Your Content</h1>
<p>Isn't amazing to edit everything</p>
<hr/>
</div>
</div>
</section>
</div>
</t>
</template>
Save the file and restart Odoo. You should now be able to see the changes.
Adding a New Item to the Menu
Adding the following lines after <div id="wrap" class="oe_structure oe_empty"> in the page.xml file will add the new page to your menu:
<record id="hello_menu" model="website.menu">
<field name="name">Hello</field>
<field name="url">/page/hello</field>
<field name="parent_id" ref="website.main_menu"/>
<field name="sequence" type="int">20</field>
</record>
Save the file and restart Odoo. You should now be able to see the changes.
Styling Pages With Less
We can add styling to the page by using LESS, which is an extension of CSS.
Create a style directory in the odoo/addons/dummy_theme/static:
mkdir ./addons/dummy_theme/static/style
Now, create and open a file where the style rules will be stored called custom.less:
nano ./addons/dummy_theme/static/style/custom.less
Enter the following lines to change the color of the Header 1 tag, as well as add border and background color to the span elements:
h1 {
color: #215487;
}
span {
border: 2px solid black;
background-color: #eee;
}Save the file and close it.
Add the newly created asset custom.less to your main template - page.xml. Paste the following lines into the file:
<template id="dummy_theme_asset" name="website assete for Dummy theme" inherit_id="website.assets_frontend">
<xpath expr="." position="inside">
<link rel="stylesheet" href="/dummy_theme/static/style/custom.less"/>
</xpath>
</template>Save the file and restart Odoo. You should now be able to see the changes.
Creating a Layout With Bootstrap
Open your template file ./addons/theme_dummy/views/pages.xml and add a new section (paste this code after the existing <section> tag):
<section>
<div class="container">
<div class="row">
<div class="alert alert-primary" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="col-md-6 bg-blue">
<h2>BLUE it!</h2>
</div>
<div class="col-md-6 bg-green">
<h2>GREEN THAT!</h2>
</div>
</div>
</div>
</section>
Open ./addons/theme_dummy/static/style/custom.less file and add these lines to change the color of the alerts:
@brand-primary: #1abc9c;
@color-blue: #3498db;
@color-green: #2ecc71;
.bg-blue { background: @color-blue; }
.bg-green { background: @color-green; }
.h2 { color: white; }
Save the file and restart Odoo. You should now be able to see the changes.
Build Your First Snippet
Open ./addons/dummy_theme/__manifest__.py and remove the # (hashtag) character at the beginning of the line with 'views/snippets.xml'. The result should look like this:
{
# Theme information
'name':'Dummy Theme',
'description': ' ',
'category': 'Theme',
'version':'1.0',
'depends': ['website'],
# templates
'data': [
# 'views/options.xml',
'views/snippets.xml'
],
# demo pages
'demo': [
# 'demo/pages.xml',
],
# Your information
'author':'My company',
'website': '',
}
Create and open a snippets.xml file in the views directory of the theme:
nano ./addons/dummy_theme/views/snippets.xml
Now that you're in, let's add a snippet to the website menu. Before you type in the HTML, you must determine the position of the snippet on the web page. In our case, we will be adding it at the end of the Structure section.
Type in the following code into the file:
<template id="snippets" inherit_id="website.snippets" name="Clean Theme snippets">
<xpath expr="//div[@id='snippet_structure']" position="inside">
<div>
</div>
</xpath>
</template>Notice the empty <div> tag. The snippet will go inside of it.
Let's also add a thumbnail to our snippet. Create a new <div> tag with the class oe_snippet_thumbnail:
<xpath expr="//div[@id='snippet_structure']" position="inside">
<div>
<div class="oe_snippet_thumbnail">
<img class="oe_snippet_thumbnail_img" src="/theme_Dummy/static/img/blocks/block_title.png"/>
<span class="oe_snippet_thumbnail_title">SNIP IT!</span>
</div>
</div>
</xpath>
Note: change the path to an image to the actual image path on your server. The size should be 100x79px.
Congratulations, you can now use your snippet and drag-and-drop it on the page.
Snippet Body
Your snippet's body should be in a <section> tag with a class oe_snippet_body. Inside, there should be a bootstrap layout (container and rows).
<xpath expr="//div[@id='snippet_structure']" position="inside">
<div>
<div class="oe_snippet_thumbnail">
<img class="oe_snippet_thumbnail_img" src="/theme_Dummy/static/img/blocks/block_title.png"/>
<span class="oe_snippet_thumbnail_title">SNIP IT!</span>
</div>
<section class="oe_snippet_body fw_categories">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt32 mb32">
<h2>A great Title</h2>
<h3 class="text-muted ">And a great subtitle too</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
</div>
</div>
</section>
</div>
</xpath>
Adding Images to Your Snippet
To add an image to a snippet, all you need to do is set a css background image.
Create a directory for images:
mkdir ./addons/dummy_theme/static/imgThis is where you should store your images. If you need to create directories inside the img directory for categorization - you can.
Open ./addons/dummy_theme/static/style/custom.less and type in the following lines to set the background css images for the .dummy-boy and .dummy-girl classes.
@img-01: url("../img/img-boy.png");
.dummy-boy { background-image: @img-01; }
@img-02: url("../img/img-girl.png");
.dummy-girl { background-image: @img-02; }Note: change image URLs to the URLs of the actual images on your server.
Now open the view file ./addons/dummy_theme/views/pages.xml and add the following HTML code:
<div class="row">
<div class="col-md-12 text-center mt32 mb32">
<h2 class="options_simple_snippet">A great Title, prmize</h2>
<h3 class="text-muted">And a great subtilte too</h3>
<p>Awesome Snippet</p>
<div class="dummy-boy"></div>
<div class="dummy-girl"></div>
</div>
</div>
Congratulations, you can now use your snippet and drag-and-drop it on the page.
If you are a SolaDrive customer and use one of our Odoo VPS Hosting services you can simply ask our expert Odoo specialists to change your Odoo theme or template for you. We are available 24/7 via chat or ticket and will take care of your request immediately.
