How to inherit Odoo website theme to add custom fonts and css

137 Views Asked by At

I am trying to inherit current website theme (Odoo v16) and add custom fonts/css to it. In documentation I was only able to find how to create new theme from scratch but not how to inherit it. This is what I've done (so far with no success):

Module folder structure:

    website_theme/
├── __init__.py
├── controllers/
├── models/
│   __init__.py
│   website_inherit.py 
├── static/
│   src/
│       css/
│       custom_styles.css
│       fonts/
│       Walkway_Bold.ttf
├── views/
│   odoo_theme.xml
├── __manifest__.py

This are the contents of files:

init.py

# -*- coding: utf-8 -*-

from . import models

manifest.py

{
    'name': 'Website theme',
    'description': 'Customisation for website theme',
    'version': '1.0',
    'author': 'author',
    'data': ['views/odoo_theme.xml'],
    'category': 'Website',
    'depends': ['website',],
    'assets': {
        'web._assets_primary_variables': [
            "website_theme/static/src/css/custom_styles.css",
        ],
    },
    'installable': True,
}

/models/init.py

# -*- coding: utf-8 -*-

from . import website_inherit

/models/website_inherit.py

from odoo import models

class WebsiteInherit(models.Model):
    _inherit = 'website'

/static/src/css/custom_styles.css

@font-face {
    font-family: 'WalkwayBold';
    src: url('/custom_website/static/src/fonts/Walkway_Bold.ttf') format('truetype');
}


$o-theme-font-configs: map-merge($o-theme-font-configs, (
    'WalkwayBold': (
        'family': ('WalkwayBold'),
    ),
));

/views/odoo_theme.xml

<odoo>
    <data>
        <!-- Adding font-face declarations -->
        <template id="website.layout" inherit_id="website.layout">
            <xpath expr="//head" position="inside">
                <link rel="stylesheet" type="text/css" href="/website_theme/static/src/css/custom_styles.css"/>
            </xpath>
        </template>
    </data>
</odoo>

I updated this module (using .sh editor) and restarted server. Found module in apps and try to install it. This is the error I get:

You cannot create recursive inherited views.

View error context:
'-no context-'

There is way to add custom CSS / JS in website editor but coming from Wordpress I'd like to have module for this and store this information in separate file/module outside the editor. Also, I need to use font that is not available in Google Fonts repository. Appreciate any help here, thank you.

0

There are 0 best solutions below