An introduction for web designers

If you are a web designer using Odoo for the first time, you are in the right place. This introduction will outline the basics of Odoo theme creation.

Note

Odoo’s team has created a framework that’s powerful and easy to use. There’s no need to know special syntaxes to use this set of tools.

From common CMS to Odoo

Note

If you always think and work in the same way, you’ll probably get the same results. If you want something completely new, then try something different.

Where is my header.php file?

This is usually the first question from a web designer used to working with Wordpress or Joomla and coming to Odoo for the first time.

Indeed, when using common CMSs, you have to code several files (like header.php, page.php, post.php, etc.) in order to create a basic structure for your website. With those systems, this base structure acts as a design foundation that you have to update over time to ensure compatibility within your CMS. So, even after you have spent hours coding the files, you have not even started on the design yet.

Thisdoes notapply to creating Odoo themes.

Note

We think that theme design should be simple (and powerful). When we created our Website Builder, we decided to start from scratch instead of relying on what already existed. This approach gave us the freedom to focus on the things that are really important for designers: styles, content and the logic behind them. No more struggling with technical stuff.

Odoo default theme structure

Odoo comes with a default theme structure. It is a very basic “theme” that provides minimal structure and layout. When you create a new theme, you are actually extending this. Indeed it’s always enabled in your setup and it acts exactly like the CMS’s base structure we mentioned above, except that you don’t have to create or maintain it. It will upgrade automatically within your Odoo installation and, since it is included in the Website Builder module, everything is smoothly integrated by default.

As a result, you are totally free to focus on design while this structure does the job of providing integrations and functionality.

Main features:

• Basic layouts for pages, blog and eCommerce
• Website Builder integration
• Basic Snippets
• Automatic Less/Sass compiling
• Automatic Js and CSS minification and combination

Main technologies:

• Twitter Bootstrap
• jQuery
• jQuery UI
• underscore.js