support Click to see our new support page.

Website Themes In Odoo

Website Themes In Odoo
Author

Sahdiya MammoottySept. 16, 2019

Odoo Website Themes

A website is important in business where to connect the company status in online and to support the company. Sometimes where to start eCommerce business. To build a website is not that easy for a person have no knowledge of code. And the nature of the website changes in accordance with the nature of the company. Building a website for a company requires subtle techniques so as to attract the audience and stay on top. But in odoo ERP software make a website in an easier way. It doesn't matter if you are creating an e-commerce software, company website or customer relationship management portal, odoo website builder module can handle it all. Odoo has a complete freedom for the designer to design their own theme according to their need. The odoo website themes will showcase the content of your website using captivating designs.

 

SETUP

In ODOO, website builder is a default module. We have to trigger the website features by installing website module in it.

module-installation

Also in odoo, website themes module is there as a default module. We can install from the apps. In default theme, it contain very basic theme structures. When designers want to upgrade or create a new theme, odoo provide complete freedom to use it.

webtheme-installation

After installing theme module we can access default themes (bootswatch theme and default theme) in the module. Or separately install Bootswatch theme and default theme module from the app list (in localhost).

bootswatch-theme

If we install website theme module here we have option to select theme(i.e; bootswatch theme or default theme) while selecting theme corresponding module will install automatically.

select-theme-odoo

After installing odoo website builder and website theme, then go to website menu, and to start editing by just dragging blocks.

editing-odoo-website

Simply going “Go to website” we can set website theme. To enable contact forum, e-commerce etc.. we have to install those modules separately.

install-modules-odoo

Tapping edit menu we can get a new page with a lot block on right side. Here we can drag blocks to create a website/edit website.

edit-web-odoo

Add the blocks according to company needs and set the website theme. Then save the theme. To add menu bar item from the content menu also add the pages according to company need from the content menu.

customize-odoo-website -themes-page

Customize tab contain your html; file as well CSS files. Here also we can edit the theme.

The one of the most exciting features of this module is translating web pages. It is done by adding different languages into website.

webpage-translate-odoo-website-themes

HOW TO CREATE A NEW ODOO WEBSITE THEME

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 enable in your setup and it acts exactly like the CMS's base structure, except that you don’t have to create or maintain it. It will upgrade automatically within your Odoo installation and, since it is include in the Website Builder module, everything is smoothly integrate 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
  • jQueryj
  • Query UI
  • underscore.js

An Odoo theme is not a folder containing HTML or PHP files, it’s a modular framework written in XML. Using classical web design workflows, you usually code the layout of the entire page. The result of this is a “static” web page. You can update the content, of course, but your client will need you to work on making even basic changes.Creating themes for Odoo is a total change of perspective. Instead of defining the complete layout for a page, you can create blocks (snippets) at let the user choose where to “drag & drop” them, creating the page layout on their own. We call this modular design.

Odoo XML file overview:- Any Odoo XML file starts with encoding specifications.

After that, you have to write your code inside a <odoo> tag.

[XML]

<?xml version="1.0" encoding="utf-8" ?>

<odoo>

 ## YOUR CODE HERE

</odoo>

Almost every element and option that you create has to be placed inside a <template> tag, like in this example.

[XML]

<template id="my_title" name="My title">

<h1>This is an HTML block</h1>

<h2 class="lead">And this is a subtitle</h2>

</template>

A template tag only defines a piece of html code or options - but it does not necessarily coincide with a visual arrangement of elements.

The above code defines a title, but it will not be displayed anywhere because that template is not associated with any part of the Odoo default structure. In order to do that you can use xpath, qWeb or a combination of both. Since XML files are only loaded when you install the theme, you will have to force reloading every time you make changes on an xml file. To do that, click on the Upgrade button in the module’s page.

odoo_erp_services

LinkedIn LinkedIn

Leave a Comment