odoo-docs/content/developer/tutorials/website_theme/01_theming.rst

===================
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.

.. _tutorials/website_theme/theming/setup:

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` module.

.. seealso::
   See reference documentation on how to :ref:`run Odoo <website_themes/setup/getting_started>`.

.. _tutorials/website_theme/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, …

.. seealso::
   See reference documentation on how to structure your :ref:`theming/module`.

| Start with the basics : :file:`/data`, :file:`/img`, :file:`/scss`, :file:`/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

.. _tutorials/website_theme/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.

.. seealso::
   See reference documentation on how to use :ref:`primary variables <theming/module/variables>`, as
   well as a list of all `primary variables
   <{GITHUB_PATH}/addons/website/static/src/scss/primary_variables.scss>`_ available.

| Restart your script to immediately see the application of your changes.
| Don't forget to add the path to your manifest in the script and set your module as the app
  to install.

To ensure your changes are applied correctly, log in to your website and check that your
color palette includes 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/>`_.

.. 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_TUTO_PATH}/website_airproof/static/src/scss/primary_variables.scss>`_ 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,../myprojects --db-filter=theming -d theming
      --without-demo=all -i website_airproof --dev=xml

.. _tutorials/website_theme/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

.. seealso::
   - See reference documentation on how to use :ref:`theming/module/bootstrap`.
   - A list of all `Bootstrap variables
     <{GITHUB_PATH}/addons/web/static/lib/bootstrap/scss/_variables.scss>`_ used by Odoo.
   - And `Bootstrap framework <https://getbootstrap.com/docs/4.6/getting-started/introduction/>`_
     official documentation.

.. 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 that your changes have been successfully applied
     and have not caused any errors.

.. spoiler:: Solutions

   To complete this exercise, you need to:

   #. Create your :file:`bootstrap_overridden.scss` file. You can find all the necessary information
      in the `bootstrap_overridden.scss
      <{GITHUB_TUTO_PATH}/website_airproof/static/src/scss/bootstrap_overridden.scss>`_ file from
      our example module.
   #. Declare your file in the :file:`__manifest__.py` as indicated in the documentation.

.. _tutorials/website_theme/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.

.. seealso::
   | See how you can define your :ref:`presets <theming/module/views/presets>`.
   | To start writing your file, follow the instructions for any Odoo XML page described in
     :doc:`/developer/howtos/website_themes/layout`.

.. 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
       `website_templates.xml <{GITHUB_PATH}/addons/website/views/website_templates.xml>`_.
   - To see the effect of your presets, add some **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 <{GITHUB_TUTO_PATH}/website_airproof/static/src/img/content>`_.
   - You will need to activate more views to replicate the Airproof design. Remember to add them
     throughout the creation of your website.

.. 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:: python
         :caption: ``/website_airproof/__manifest__.py``

         'depends': ['website_sale', 'website_sale_wishlist'],
         'data': [
            # Options
            'data/presets.xml',
         ]