From 7541b7e20bb862a7461b06c427a55a669d64b8cb Mon Sep 17 00:00:00 2001 From: Brandon Mercier <113701731+bram-odoo@users.noreply.github.com> Date: Mon, 23 Feb 2026 15:44:20 +0100 Subject: [PATCH] [IMP] howtos/website_theming: Adapts "Layout" chapter closes odoo/documentation#16589 Signed-off-by: Brandon Mercier (bram) --- .../howtos/website_themes/layout.rst | 210 +++++++++++------- 1 file changed, 131 insertions(+), 79 deletions(-) diff --git a/content/developer/howtos/website_themes/layout.rst b/content/developer/howtos/website_themes/layout.rst index e84f732bca..cc64960119 100644 --- a/content/developer/howtos/website_themes/layout.rst +++ b/content/developer/howtos/website_themes/layout.rst @@ -207,7 +207,7 @@ below: .. code-block:: xml - + This XPath moves the element with `.o_footer_scrolltop_wrapper` class before the element with the @@ -255,6 +255,42 @@ QWeb QWeb is the primary templating engine used by Odoo. It is an XML templating engine mainly used to generate HTML fragments and pages. +`t-call` directives can receive parameters: + +.. code-block:: xml + + + + + + + + + My page title + + + + + + + +.. list-table:: + :header-rows: 1 + :stub-columns: 1 + :widths: 20 80 + + * - Attribute (examples) + - Description + * - `_icon="true"` + - Pass the raw value (here a boolean set to `true`) + * - `_item_class.f="dropdown"` + - Pass value as a string + * - `additional_title.translate="My page title"` + - Pass value as a string + .. seealso:: :doc:`QWeb templates documentation <../../reference/frontend/qweb>`. @@ -281,7 +317,7 @@ First, create a record to declare the field. This field has to be linked to an e html manual 0 - + .. note:: Fields creation is also possible (and recommended) through `a model using Python `_. @@ -300,10 +336,10 @@ interface and fill it afterwards. view_blog_post_form_category blog.post - + - + @@ -318,7 +354,7 @@ The field value can be shown somewhere in a page by calling `model_name.field_na .. code-block:: xml :caption: ``/website_airproof/views/website_blog_templates.xml`` -

+

.. _website_themes/layout/background : @@ -393,7 +429,7 @@ Enable one of the header default templates. :caption: ``/website_aiproof/data/presets.xml`` - + Explicitly set the desired template in the `primary_variables.scss` file. @@ -403,15 +439,15 @@ Explicitly set the desired template in the `primary_variables.scss` file. $o-website-values-palettes: ( ( - 'header-template': 'Contact', + 'header-template': 'stretch', ), ); .. code-block:: xml :caption: ``/website_airproof/data/presets.xml`` - - + + .. _website_themes/layout/header/standard/mobile : @@ -423,7 +459,7 @@ Each header template comes with the `template_header_mobile` template ensuring a experience accross every devices. .. seealso:: - `Mobile header template on Odoo's Git repository `_ + `Mobile header template on Odoo's Git repository `_ .. _website_themes/layout/header/custom : @@ -442,9 +478,9 @@ Create your own template and add it to the list. Use the following code to add an option for your new custom header on the Website Builder. .. code-block:: xml - :caption: ``/website_airproof/static/src/website_builder/header_option.xml`` + :caption: ``/website_airproof/static/src/website_builder/header_template_option.xml`` - + - + - + .. list-table:: :header-rows: 1 @@ -472,10 +508,12 @@ Use the following code to add an option for your new custom header on the Websit * - Attribute - Description * - views - - The template to enable + - The template(s) to enable * - vars - - The name given to the variable - * - src + - The name given to the variable (same as used into `primary_variables.scss`) + * - checkVars + - Determine if `vars` are compared to set the option status. + * - src (in `Img`) - The thumbnail of the custom template shown in the templates selection on the Website Builder Now you have to explicitly define that you want to use your custom template in the Odoo SASS @@ -527,9 +565,8 @@ Logo .. code-block:: xml - - - + .. important:: @@ -544,10 +581,9 @@ Menu .. code-block:: xml - - - - + .. _website_themes/layout/header/components/signin : @@ -557,10 +593,9 @@ Sign in .. code-block:: xml - - - - + .. _website_themes/layout/header/components/user_dropdown : @@ -569,14 +604,13 @@ User dropdown .. code-block:: xml - - - - - - - - + .. _website_themes/layout/header/components/language_selector : @@ -585,9 +619,8 @@ Language selector .. code-block:: xml - - - + .. _website_themes/layout/header/components/cta : @@ -596,9 +629,8 @@ Call to action .. code-block:: xml - - - + .. _website_themes/layout/header/components/navbar_toggler : @@ -607,13 +639,12 @@ Navbar toggler .. code-block:: xml - - - + .. seealso:: - You can add a :ref:`header overlay ` to position your header over the content of - your page. It has to be done on each page individually. + You can add a :ref:`header overlay ` to position + your header over the content of your page. It has to be done on each page individually. .. _website_themes/layout/footer : @@ -640,7 +671,7 @@ footer template first. :caption: ``/website_aiproof/data/presets.xml`` - + .. code-block:: scss @@ -656,7 +687,7 @@ footer template first. :caption: ``/website_airproof/data/presets.xml`` - + .. _website_themes/layout/footer/custom : @@ -670,15 +701,15 @@ active footer template first. **Option** .. code-block:: js - :caption: ``/website_airproof/static/src/website_builder/airproof_footer_plugin.js`` + :caption: ``/website_airproof/static/src/website_builder/footer_option_plugin.js`` import { Plugin } from "@html_editor/plugin"; import { registry } from "@web/core/registry"; import { _t } from "@web/core/l10n/translation"; import { FooterTemplateChoice } from "@website/builder/plugins/options/footer_template_option"; - export class AirproofFooterPlugin extends Plugin { - static id = "airproofFooter"; + export class AirproofFooterOptionPlugin extends Plugin { + static id = "airproofFooterOption"; resources = { footer_templates_providers: () => [ { @@ -688,15 +719,30 @@ active footer template first. title: _t("Airproof"), view: "website_airproof.footer", varName: "airproof", - imgSrc: "/website_airproof/static/src/img/wbuilder/template_footer_opt.svg", + imgSrc: "/website_airproof/static/src/img/wbuilder/template-footer-opt.svg", }, }, ], }; } - registry.category("website-plugins").add(AirproofFooterPlugin.id, AirproofFooterPlugin); + registry.category("website-plugins").add(AirproofFooterOptionPlugin.id, AirproofFooterOptionPlugin); +.. list-table:: + :header-rows: 1 + :stub-columns: 1 + :widths: 20 80 + + * - Property + - Description + * - title + - Display title of the template + * - view + - Template that is enabled. + * - varName + - Value used in `primary_variables.scss` under `footer-template`. + * - imgSrc + - The thumbnail of the custom template shown in the templates selection on the Website Builder **Declaration** @@ -712,7 +758,7 @@ active footer template first. **Template** .. code-block:: xml - :caption: ``/website_airproof/views/website_templates.xml`` + :caption: ``/website_airproof/views/website_templates.xml``