[IMP] Improve & correct page structure

This commit is contained in:
celine de lannoy 2025-02-24 13:16:33 +01:00
parent 605b1627e7
commit f3bfd277ef

View File

@ -7,15 +7,17 @@ Chapter 1 - Theming
Now that you have Odoo installed and your server is running locally, its time to create your own Now that you have Odoo installed and your server is running locally, its time to create your own
theme module for your website. theme module for your website.
.. _website/theming/setup:
Setup Setup
===== =====
The first step is to ensure that Odoo is running correctly locally. To do this, use a Shell script | The first step is to ensure that Odoo is running correctly locally. To do this, use a Shell script
to run the server. to run the server.
In this script, define the database name and install only the website application. | In this script, define the database name and install only the website application.
.. seealso:: .. seealso::
Documentation on how to :ref:`run Odoo <ANCOR setup/getting_started>` Documentation on how to :ref:`run Odoo <ANCOR setup/getting_started>`.
.. _website/theming/module: .. _website/theming/module:
@ -23,12 +25,14 @@ Build your module structure
=========================== ===========================
Now that we know everything is working properly, let's start building our module. Now that we know everything is working properly, let's start building our module.
Based on the following structure, start creating your module that will be used as a theme. This is
| Based on the following structure, start creating your module that will be used as a theme. This is
where you are going to add your XML pages, SCSS, JS, … where you are going to add your XML pages, SCSS, JS, …
Start with the basics : `/data`, `/img`, `/scss`, `/js` | Start with the basics : `/data`, `/img`, `/scss`, `/js`
Dont forget to add the :file:`__init__.py` and :file:`__manifest__.py` files | Dont forget to add the :file:`__init__.py` and :file:`__manifest__.py` files
In your :file:`__manifest__.py` file, you can declare your module with the following information: In your :file:`__manifest__.py` file, you can declare your module with the following information:
- name (required) - name (required)
- description - description
- category - category
@ -50,14 +54,16 @@ match your design.
Based on the Airproof design, create your :file:`primary_variables.scss` file and define the Based on the Airproof design, create your :file:`primary_variables.scss` file and define the
following elements: following elements:
- Headings font family : Space Grotesk - Headings font family : Space Grotesk
- Content font family : Lato - Content font family : Lato
- The color palette name and the 5 main colors that compose it : #000000, #BBE1FA, #CEF8A1, #FFFFFF, - The color palette name and the 5 main colors that compose it : #000000, #BBE1FA, #CEF8A1, #FFFFFF,
#0B8EE6 #0B8EE6
- Header & Footer : Use one of the default templates for the moment, we will create a custom header - Header & Footer : Use one of the default templates for the moment, we will create a custom header
later. later.
Restart your script to already see the application of your changes.
Don't forget to add the path to your manifest and set your module as the app to install. | Restart your script to already see the application of your changes.
| Don't forget to add the path to your manifest and set your module as the app to install.
To ensure your changes are applied correctly, log in to your website and verify that your To ensure your changes are applied correctly, log in to your website and verify that your
color palette contains your specified colors. color palette contains your specified colors.
@ -67,32 +73,36 @@ color palette contains your specified colors.
throughout the creation of your website. throughout the creation of your website.
.. note:: .. note::
The font families are from `Google fonts <https://fonts.google.com/>`. The font families are from `Google fonts <https://fonts.google.com/>`_.
.. seealso:: .. seealso::
Documentation on :ref:`<ANCOR theming/#odoo-variables>` and `primary variables Documentation on :ref:`<ANCOR theming/#odoo-variables>`. And see all the `primary variables
<{GITHUB_PATH}/addons/website/static/src/scss/primary_variables.scss>`. <{GITHUB_PATH}/addons/website/static/src/scss/primary_variables.scss>`_ available.
.. spoiler:: Solutions .. spoiler:: Solutions
To complete this exercise, you need to: To complete this exercise, you need to:
#. Create your :file:`primary_variables.scss` file. You can find all the necessary information in #. Create your :file:`primary_variables.scss` file. You can find all the necessary information in
the `primary_variables.scss <{GITHUB_PATH}>` file from our example module. the `primary_variables.scss <{GITHUB_PATH}>`_ file from our example module.
#. Declare your file in the :file:`__manifest__.py` as indicated in the documentation. #. Declare your file in the :file:`__manifest__.py` as indicated in the documentation.
#. Install your module via your script. In our example, it looks like this: #. Install your module via your script. In our example, it looks like this:
.. code-block:: xml .. code-block:: xml
./odoo-bin --addons-path=../enterprise,addons --db-filter=theming -d theming --without-demo=all -i website_airproof --dev=xml ./odoo-bin --addons-path=../enterprise,addons --db-filter=theming -d theming
--without-demo=all -i website_airproof --dev=xml
.. _website/theming/bootstrap_variables: .. _website/theming/bootstrap_variables:
Declare Bootstrap variables Declare Bootstrap variables
=========================== ===========================
On top of the default Odoo variables, you can also redefine the Bootstrap variables. On top of the default Odoo variables, you can also redefine the Bootstrap variables. Bootstrap is a
Bootstrap is a front-end framework which is included by default in Odoo. front-end framework which is included by default in Odoo.
Based on the Airproof design, define the following elements: Based on the Airproof design, define the following elements:
- Headings font sizes : - Headings font sizes :
- h1 : 3.125rem - h1 : 3.125rem
@ -116,8 +126,8 @@ Based on the Airproof design, define the following elements:
.. seealso:: .. seealso::
- Documentation on :ref:`<ANCOR theming/#bootstrap-variables>`. - Documentation on :ref:`<ANCOR theming/#bootstrap-variables>`.
- `Bootstrap overridden SCSS - `Bootstrap overridden SCSS
<{GITHUB_PATH}/addons/web/static/lib/bootstrap/scss/_variables.scss>`. <{GITHUB_PATH}/addons/web/static/lib/bootstrap/scss/_variables.scss>`_.
- And `Bootstrap framework <https://getbootstrap.com/docs/4.6/getting-started/introduction/>` - And `Bootstrap framework <https://getbootstrap.com/docs/4.6/getting-started/introduction/>`_
official documentation. official documentation.
.. _website/theming/presets: .. _website/theming/presets:
@ -130,35 +140,39 @@ the design.
Add your :file:`presets.xml` file and based on the Airproof design, activate the appropriate views Add your :file:`presets.xml` file and based on the Airproof design, activate the appropriate views
to meet the following client requests: to meet the following client requests:
- Deactivate the Call-to-action in the header
- Deactivate the wishlist feature in the shop but activate it on the product page - Deactivate the Call-to-action in the header.
- On the shop page, activate the filtering by categories only on the left side - Deactivate the wishlist feature in the shop but activate it on the product page.
- On the shop page, activate the filtering by categories only on the left side.
.. tip:: .. tip::
- To complete the exercise, you need to install the eCommerce (`website_sale`) and wishlist - | To complete the exercise, you need to install the **eCommerce** (`website_sale`) and
(`website_sale_whishlist`) applications. **wishlist** (`website_sale_whishlist`) applications.
Be careful! Referencing an application in your code that hasn't been installed will result in | **Be careful!** Referencing an application in your code that hasn't been installed will
an error. result in an error.
- In order to find the templates to activate or not, go to the source code: - | In order to find the templates to activate or not, go to the source code:
`odoo/addons/website/views/**`. `odoo/addons/website/views/**`.
For example, you can find all the templates for the header in | For example, you can find all the templates for the header in
:file:`odoo/addons/website/views/website_templates.xml`. :file:`odoo/addons/website/views/website_templates.xml`.
- To see the effect of your presets, add products (Airproof Mini, Airproof Robin, Warranty, - | To see the effect of your presets, add **products** (*Airproof Mini*, *Airproof Robin*,
Charger cable) and create eCommerce categories (Warranties, Accessories, and Drones with camera *Warranty*, *Charger cable*) and create **eCommerce categories** (*Warranties*, *Accessories*
drones and waterproof drones) in the database. , and *Drones* with *Camera drones* and *Waterproof drones*) in the database.
You will find the product images `here <>`. | You will find the product images `here <>`_.
- You will need to activate more views to replicate the Airproof design. Remember to add them - You will need to activate more views to replicate the Airproof design. Remember to add them
throughout the creation of your website. throughout the creation of your website.
.. seealso:: .. seealso::
Documentation on :ref:`<ANCOR theming.html/views>`. | Documentation on :ref:`<ANCOR theming.html/views>`.
To start writing your file, follow the instructions for any Odoo XML page described in | To start writing your file, follow the instructions for any Odoo XML page described in
:doc:`/developer/howtos/website_themes/layout`. :doc:`/developer/howtos/website_themes/layout`.
.. spoiler:: Solutions .. spoiler:: Solutions
To deactivate the Call-to-action: To deactivate the Call-to-action:
#. The view you have to find is in :file:`odoo/addons/website/views/website_templates.xml l:2113` #. The view you have to find is in :file:`odoo/addons/website/views/website_templates.xml l:2113`
#. Create your :file:`presets.xml` file with the right records #. Create your :file:`presets.xml` file with the right records
.. code-block:: xml .. code-block:: xml
:caption: ``/website_airproof/data/presets.xml`` :caption: ``/website_airproof/data/presets.xml``
@ -170,6 +184,7 @@ to meet the following client requests:
</record> </record>
</odoo> </odoo>
#. In the manifest, add the 2 apps and declare your file. #. In the manifest, add the 2 apps and declare your file.
.. code-block:: xml .. code-block:: xml
:caption: ``/website_airproof/__manifest__.py`` :caption: ``/website_airproof/__manifest__.py``