Enable Dark Mode!
create-a-custom-theme-in-odoo-14-website.jpg
By: Cirin C Baby

How to Create a Custom Theme in Odoo 14 Website?

Technical Odoo 14 Website&E-commerce

Basically, Odoo has default themes for the website. It will be installed automatically when our website module is installed. I am going to share the basic idea of creating a custom theme module in Odoo 14. Hope it will be interesting to you. So let’s get started.

You must first install the website module.

create-a-custom-theme-in-odoo-14-website-cybrosys

Once installed, you will be redirected to the page below, from where you can select a theme for your website. You can switch later.

create-a-custom-theme-in-odoo-14-website-cybrosys

Tap the 'Use This Theme' button, which will help you to select your theme for your website. It goes to the website page editor, from where you can select styles, options or blocks for your web page. You can customize your web page style here.

create-a-custom-theme-in-odoo-14-website-cybrosys

Let us now examine the basics of creating a custom theme module on the Odoo website.

create-a-custom-theme-in-odoo-14-website-cybrosys

These are the basic files to create a custom theme module.

Create a theme folder, the technical name like ‘theme_’ followed by your theme name.

__manifest__.py
{
    'name': 'My Website Theme',
    'description': 'A description for your theme.',
    'version': '1.0',
    'author': 'Your name',
    'data': [],
    'category': 'Theme/Creative',
    'depends': ['website', 'website_theme_install'],
}

create-a-custom-theme-in-odoo-14-website-cybrosys

category: Category should always be the Theme of a theme module, after the slash, it defines its subcategory

depends: we can define the modules that work for our theme.

static

The static folder contains the css / js / img folders. It helps to provide styles and design web pages.

Views

View folders to create templates or views for the website.

Structure of a web page

By default, Odoo provides a default header and footer. The content of the page makes the web page unique.

create-a-custom-theme-in-odoo-14-website-cybrosys

Create a page layout

We must have an XML file to create a page layout. It is defined under views.

page.xml
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
    <record id="test_page" model="website.page">
        <field name="name">Test page</field>
        <field name="website_published">True</field>
        <field name="url">/test</field>
        <field name="type">qweb</field>
        <field name="key">theme_your_theme.test_page</field>
        <field name="arch" type="xml">
            <t t-name="theme_your_theme.test_page_template">
                <t t-call="website.layout">
                    <div id="wrap">
                        <div class="container">
                            <h1>Test Page</h1>
                            <ul>
                                <li>Feature 1</li>
                                <li>Feature 2</li>
                                <li>Feature 3</li>
                            </ul>
                        </div>
                    </div>
                </t>
            </t>
        </field>
    </record>
</odoo>

Here, you can see some additional parameters like name and URL. 

Inside the template we use <t t-call = "website.layout">, which is called the default layout of the website. Within these, we can design our own page content. 

Url redirects the current page we created. Eg: <your_website>/test

Add this XML file in __manifest__.py file like as follows

'data': ['views/page.xml'],

The image below shows the test page website view.

create-a-custom-theme-in-odoo-14-website-cybrosys

Next, we can check how to create a menu for this page.

<record id="test_page_menu" model="website.menu">
    <field name="name">Test</field>
    <field name="page_id" ref="test_page"/>
    <field name="parent_id" ref="website.main_menu"/>
    <field name="sequence" type="int">99</field>
</record>

The page_id parameter indicates the template ID for the page layout.

create-a-custom-theme-in-odoo-14-website-cybrosys

Then you can add your own CSS / SCSS styles to make your page content more colorful and attractive.

Create a scss file inside the static folder using the class test and enter the path to the asset. Insert the asset xml file inside the manifest file.

create-a-custom-theme-in-odoo-14-website-cybrosys

style.scss
.test {
    background: #0000FF;
    padding: 1em;
    border-radius: 7px;
    margin: 2em 0 3em;
    li {
        display: block;
        position: relative;
        color: #FFF;
        padding: 2em;
        text-align: center;
        margin-bottom: 1em;
        font-size: 1.0em;
        background-color: #0000FF;
    }
}
assets.xml
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
    <template id="test_page_asset" name="My style" inherit_id="website.assets_frontend">
        <xpath expr="link[last()]" position="after">
            <link rel="stylesheet" type="text/scss" ref=/theme_your_theme/static/scss/style.scss"/>
        </xpath>
    </template>
</odoo>

Add your class in your template and update your theme. Then you can view your page as seen below.

create-a-custom-theme-in-odoo-14-website-cybrosys

You can design web pages like this. You can create snippets and use drag and drop to add snippets to your webpage. You can check out the following blog to learn more about creating snippets.


We hope this blog helps you to create a custom theme module in Odoo14.



If you need any assistance in odoo, we are online, please chat with us.



0
Comments



Leave a comment

 


whatsapp
location

Calicut

Cybrosys Technologies Pvt. Ltd.
Neospace, Kinfra Techno Park
Kakkancherry, Calicut
Kerala, India - 673635

location

Kochi

Cybrosys Technologies Pvt. Ltd.
1st Floor, Thapasya Building,
Infopark, Kakkanad,
Kochi, India - 682030.

location

Bangalore

Cybrosys Techno Solutions
The Estate, 8th Floor,
Dickenson Road,
Bangalore, India - 560042

Send Us A Message