diff --git a/content/developer/tutorials/website/01_theming.rst b/content/developer/tutorials/website/01_theming.rst new file mode 100644 index 000000000..e0ee2dd48 --- /dev/null +++ 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 ` + +.. _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:`` + +.. _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 `. + +.. seealso:: + Documentation on :ref:`` 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:``. + - `Bootstrap overridden SCSS + <{GITHUB_PATH}/addons/web/static/lib/bootstrap/scss/_variables.scss>`. + - And `Bootstrap framework ` + 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:``. + 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`` + + + + + + + + + #. 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', + ] + \ No newline at end of file