Add Styles

Odoo includes Bootstrap by default. This means that you can take advantage of all Bootstrap styles and layout functionalities out of the box.

Of course Bootstrap is not enough if you want to provide a unique design. The following steps will guide you through how to add custom styles to your theme. The final result won't be pretty, but will provide you with enough information to build upon on your own.

Let’s start by creating an empty file calledstyle.lessand place it in a folder calledlessin your static folder. The following rules will style our_Services_page. Copy and paste it, then save the file.

.services {
    background: #EAEAEA;
    padding: 1em;
    margin: 2em 0 3em;
    li {
        display: block;
        position: relative;
        background-color: #16a085;
        color: #FFF;
        padding: 2em;
        text-align: center;
        margin-bottom: 1em;
        font-size: 1.5em;
    }
}

Our file is ready but it is not included in our theme yet.

Let’s navigate to the view folder and create an XML file calledassets.xml. Add the default Odoo xml markup and copy/paste the following code. Remember to replacetheme folderwith your theme’s main folder name.

<template id="mystyle" name="My style" inherit_id="website.assets_frontend">
    <xpath expr="link[last()]" position="after">
        <link href="/theme folder/static/less/style.less" rel="stylesheet" type="text/less"/>
    </xpath>
</template>

We just created a template specifying our less file. As you can see, our template has a special attribute calledinherit_id. This attribute tells Odoo that our template is referring to another one in order to operate.

In this case, we are referring toassets_frontendtemplate, located in thewebsitemodule.assets_frontendspecifies the list of assets loaded by the website builder and our goal is to add our less file to this list.

This can be achieved using xpath with the attributesexpr="link[last()]"andposition="after", which means "take my style file and place it after the last link in the list of the assets".

Placing it after the last one, we ensure that our file will be loaded at the end and take priority.

Finally addassets.xmlin your__manifest__.pyfile.

Update your theme

Our less file is now included in our theme, it will be automatically compiled, minified and combined with all Odoo’s assets.