[ADD] Page 1 : Theming

2025-02-20 18:02:01 +01:00 · 2025-02-20 18:02:01 +01:00 · 605b1627e7
commit 605b1627e7
parent 86e8741509
1 changed files with 181 additions and 0 deletions
--- a/content/developer/tutorials/website/01_theming.rst
+++ b/content/developer/tutorials/website/01_theming.rst
@ -0,0 +1,181 @@
+.. _website/theming:
+
+===================
+Chapter 1 - Theming
+===================
+
+Now that you have Odoo installed and your server is running locally, it’s time to create your own
+theme module for your website.
+
+Setup
+=====
+
+The first step is to ensure that Odoo is running correctly locally. To do this, use a Shell script
+to run the server. 
+In this script, define the database name and install only the website application.
+
+.. seealso::
+   Documentation on how to :ref:`run Odoo <ANCOR setup/getting_started>`
+
+.. _website/theming/module:
+
+Build your module structure
+===========================
+
+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
+where you are going to add your XML pages, SCSS, JS, …
+Start with the basics : `/data`, `/img`, `/scss`, `/js`
+Don’t 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:
+- name (required)
+- description
+- category
+- version
+- author
+- license
+- depends
+
+.. seealso::
+   Documentation on :ref:`<ANCOR website_themes/theming/theme_module>`
+
+.. _website/theming/odoo_variables:
+
+Declare Odoo variables
+======================
+
+In the :file:`primary_variables.scss` file, you can override the default Odoo SCSS variables to
+match your design. 
+
+Based on the Airproof design, create your :file:`primary_variables.scss` file and define the
+following elements:
+- Headings font family : Space Grotesk
+- Content font family : Lato
+- The color palette name and the 5 main colors that compose it : #000000, #BBE1FA, #CEF8A1, #FFFFFF,
+  #0B8EE6
+- Header & Footer : Use one of the default templates for the moment, we will create a custom header
+  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.
+
+To ensure your changes are applied correctly, log in to your website and verify that your
+color palette contains your specified colors.
+
+.. tip::
+   You will need to override more variables to replicate the Airproof design. Remember to add them
+   throughout the creation of your website.
+
+.. note::
+   The font families are from `Google fonts <https://fonts.google.com/>`.
+
+.. seealso::
+   Documentation on :ref:`<ANCOR theming/#odoo-variables>` and `primary variables
+   <{GITHUB_PATH}/addons/website/static/src/scss/primary_variables.scss>`.
+
+.. spoiler:: Solutions
+   To complete this exercise, you need to:
+   #. 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.
+   #. 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:
+
+   .. code-block:: xml
+
+      ./odoo-bin --addons-path=../enterprise,addons --db-filter=theming -d theming --without-demo=all -i website_airproof --dev=xml
+
+.. _website/theming/bootstrap_variables:
+
+Declare Bootstrap variables
+===========================
+
+On top of the default Odoo variables, you can also redefine the Bootstrap variables.
+Bootstrap is a front-end framework which is included by default in Odoo. 
+
+Based on the Airproof design, define the following elements:
+- Headings font sizes :
+
+  - h1 : 3.125rem
+  - h2 : 2.5rem
+  - h3 : 2rem
+  - h4 : 1.75rem
+  - h5 : 1.5rem
+  - h6 : 1.25rem
+
+- Inputs border radius : 10px
+- Inputs border color : black
+- Inputs border width : 1px
+- Large buttons border radius : 0px 10px 10px 10px
+
+.. tip::
+   - You will need to override more variables to replicate the Airproof design. Remember to add them
+     throughout the creation of your website.
+   - Make it a habit to regularly check locally whether your changes have been successfully applied
+     and have not caused any errors.
+
+.. seealso::
+   - Documentation on :ref:`<ANCOR theming/#bootstrap-variables>`.
+   - `Bootstrap overridden SCSS
+     <{GITHUB_PATH}/addons/web/static/lib/bootstrap/scss/_variables.scss>`.
+   - And `Bootstrap framework <https://getbootstrap.com/docs/4.6/getting-started/introduction/>`
+     official documentation.
+
+.. _website/theming/presets:
+
+Define presets
+==============
+
+In addition to the variables we have just covered, you can also activate specific views to modify
+the design. 
+
+Add your :file:`presets.xml` file and based on the Airproof design, activate the appropriate views
+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
+- On the shop page, activate the filtering by categories only on the left side
+
+.. tip::
+   - To complete the exercise, you need to install the eCommerce (`website_sale`) and wishlist
+     (`website_sale_whishlist`) applications.
+     Be careful! Referencing an application in your code that hasn't been installed will result in
+     an error.
+   - In order to find the templates to activate or not, go to the source code:
+     `odoo/addons/website/views/**`.
+     For example, you can find all the templates for the header in
+     :file:`odoo/addons/website/views/website_templates.xml`.
+   - To see the effect of your presets, add products (Airproof Mini, Airproof Robin, Warranty,
+     Charger cable) and create eCommerce categories (Warranties, Accessories, and Drones with camera
+     drones and waterproof drones) in the database.
+     You will find the product images `here <>`.
+   - You will need to activate more views to replicate the Airproof design. Remember to add them
+     throughout the creation of your website.
+
+.. seealso::
+   Documentation on :ref:`<ANCOR theming.html/views>`.
+   To start writing your file, follow the instructions for any Odoo XML page described in
+   :doc:`/developer/howtos/website_themes/layout`.
+
+.. spoiler:: Solutions
+   To deactivate the Call-to-action:
+   #. 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
+      .. code-block:: xml
+         :caption: ``/website_airproof/data/presets.xml``
+
+         <?xml version="1.0" encoding="utf-8"?>
+         <odoo>
+            <!-- Disable Call-to-action in header -->
+            <record id="website.header_call_to_action" model="ir.ui.view">
+               <field name="active" eval="False"/>
+            </record>
+        </odoo>
+   #. In the manifest, add the 2 apps and declare your file.
+      .. code-block:: xml
+         :caption: ``/website_airproof/__manifest__.py``
+
+         'depends': ['website_sale', 'website_sale_wishlist'],
+         'data': [
+            # Options
+            'data/presets.xml',
+         ]
+