[IMP] Improve & correct page structure
This commit is contained in:
parent
605b1627e7
commit
f3bfd277ef
@ -7,15 +7,17 @@ Chapter 1 - Theming
|
|||||||
Now that you have Odoo installed and your server is running locally, it’s time to create your own
|
Now that you have Odoo installed and your server is running locally, it’s 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
|
|
||||||
where you are going to add your XML pages, SCSS, JS, …
|
| Based on the following structure, start creating your module that will be used as a theme. This is
|
||||||
Start with the basics : `/data`, `/img`, `/scss`, `/js`
|
where you are going to add your XML pages, SCSS, JS, …
|
||||||
Don’t forget to add the :file:`__init__.py` and :file:`__manifest__.py` files
|
| 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:
|
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``
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user