This commit is contained in:
Carlos Valverde 2025-02-21 18:09:10 +01:00
parent 86e8741509
commit 4ce1c8e237

View File

@ -1,3 +1,5 @@
.. _howtos/website/theming:
======= =======
Theming Theming
======= =======
@ -10,6 +12,8 @@ theme module. In this chapter, you will discover how to:
- Get the most out of Bootstrap variables. - Get the most out of Bootstrap variables.
- Add custom styles and JavaScript. - Add custom styles and JavaScript.
.. _theming/module:
Theme module Theme module
============ ============
@ -19,6 +23,8 @@ theme, you are extending the default theme.
Remember to add the directory containing your module to the `addons-path` command-line argument Remember to add the directory containing your module to the `addons-path` command-line argument
when running Odoo in your development environment. when running Odoo in your development environment.
.. _theming/module/naming:
Technical naming Technical naming
---------------- ----------------
@ -33,6 +39,8 @@ The first step is to create a new directory.
In this documentation, we will use **Airproof** (a fictional project) as an example. In this documentation, we will use **Airproof** (a fictional project) as an example.
.. _theming/module/structure:
File structure File structure
-------------- --------------
@ -79,12 +87,17 @@ package its theme like a module.
* - views * - views
- Custom views and templates (`*.xml`) - Custom views and templates (`*.xml`)
.. _theming/module/initialization:
Initialization Initialization
-------------- --------------
An Odoo module is also a Python package with a :file:`__init__.py` file containing import An Odoo module is also a Python package with a :file:`__init__.py` file containing import
instructions for various Python files in the module. This file can remain empty for now. instructions for various Python files in the module. This file can remain empty for now.
.. _theming/module/declaration:
Declaration Declaration
----------- -----------
@ -143,6 +156,8 @@ always required. It usually contains much more information.
To create a website theme, you only need to install the Website app. If you need other apps To create a website theme, you only need to install the Website app. If you need other apps
(Blogs, Events, eCommerce, ...), you can also add them. (Blogs, Events, eCommerce, ...), you can also add them.
.. _theming/options:
Default options Default options
=============== ===============
@ -164,6 +179,8 @@ First, try to construct your theme by using Odoo's default options. This ensures
.. seealso:: .. seealso::
:doc:`Odoo coding guidelines <../../../contributing/development/coding_guidelines>` :doc:`Odoo coding guidelines <../../../contributing/development/coding_guidelines>`
.. _theming/module/variables:
Odoo variables Odoo variables
-------------- --------------
@ -436,6 +453,8 @@ The colors used in a color combination are accessible and can be overridden thro
The Website Builder automatically generates a page to view the color combinations of the theme The Website Builder automatically generates a page to view the color combinations of the theme
color palette: http://localhost:8069/website/demo/color-combinations color palette: http://localhost:8069/website/demo/color-combinations
.. _theming/module/bootstrap:
Bootstrap variables Bootstrap variables
------------------- -------------------
@ -492,6 +511,8 @@ values and *not* the :file:`primary_variables.scss` file.
http://localhost:8069/website/demo/bootstrap http://localhost:8069/website/demo/bootstrap
.. _theming/module/views:
Views Views
----- -----
@ -541,6 +562,8 @@ By reading the source code, templates related to options are easily found.
<field name="active" eval="False"/> <field name="active" eval="False"/>
</record> </record>
.. _theming/assets:
Assets Assets
====== ======
@ -548,6 +571,8 @@ For this part, we will refer to the `assets_frontend` bundle located in the web
specifies the list of assets loaded by the Website Builder, and the goal is to add your SCSS and JS specifies the list of assets loaded by the Website Builder, and the goal is to add your SCSS and JS
files to the bundle. files to the bundle.
.. _theming/assets/styles:
Styles Styles
------ ------
@ -579,6 +604,8 @@ Feel free to reuse the variables from your Bootstrap file and the ones used by O
font-family: o-website-value('headings-font'); font-family: o-website-value('headings-font');
} }
.. _theming/assets/interactivity:
Interactivity Interactivity
------------- -------------