Skip to Content
Menu
This question has been flagged
1 Reply
3844 Views

Hello, can anyone advise on best way to edit the Graphene web theme colour swatches and fonts? Have tried replacing existing colours and fonts with no luck. Cannot find any support for the theme either.

Avatar
Discard
Best Answer

Before you start to customize themes, make yourself familiar with creating themes: https://www.odoo.com/documentation/10.0/howtos/themes.html, then study the components and code of your theme.

Please be aware that css and less code can not be inherited, but must be overwritten. The last version found while compiling the asset bundles will be valid.

If you want to change colors and or fonts of an existing theme, you will have to change the corresponding assets.

Example: Changing the color set of the graphene theme

Create a new theme module with the structure as explained in the documentation. Add theme_graphene as a dependency in the __manifest__.py file.

Odoo's paid themes usually offer multiple color presets (in theme_graphene they are called palettes) which can be selected in a theme customization modal menu. If you do not want to modify the modal menu, you can replace the colors for a particular preset, in this case let's modify the palette Gardenia.

1. Copy the asset containing the color presets:

theme_graphene/static/src/less/color.less

Replace the color values of the palette Gardenia as you like. Save the file in your new module

// =============================
// === Theme's Palette =========
// =============================

@color-alpha-gardenia    : #85AFA8;
@color-beta-gardenia     : #7E566B;
@color-gamma-gardenia    : #85909A;
@color-delta-gardenia    : #969397;
@color-epsilon-gardenia  : #422335;

2. Create a view to append your new file color.less to the frontend asset bundle:

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <template id="less" name="theme graphene less" inherit_id="website.assets_frontend" active="True" priority="1">
        <xpath expr="link[last()]" position="after">
            <link href="/your_module_name/static/src/less/color.less" rel="stylesheet" type="text/less"/>
        </xpath>
    </template>
</odoo>

It is important to use the position "after" to make it work properly (your less file must be loaded last).

In a similar way you can change your fonts.

3. Clap your hands and gimme an upvote, because I'm not a developer ;-)

Avatar
Discard