diff --git a/content/developer/howtos/website_themes/theming.rst b/content/developer/howtos/website_themes/theming.rst index 1e563356d..c606c2509 100644 --- a/content/developer/howtos/website_themes/theming.rst +++ b/content/developer/howtos/website_themes/theming.rst @@ -1,3 +1,5 @@ +.. _howtos/website/theming: + ======= Theming ======= @@ -10,6 +12,8 @@ theme module. In this chapter, you will discover how to: - Get the most out of Bootstrap variables. - Add custom styles and JavaScript. +.. _theming/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 when running Odoo in your development environment. +.. _theming/module/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. +.. _theming/module/structure: + File structure -------------- @@ -79,12 +87,17 @@ package its theme like a module. * - views - Custom views and templates (`*.xml`) +.. _theming/module/initialization: + Initialization -------------- 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. + +.. _theming/module/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 (Blogs, Events, eCommerce, ...), you can also add them. +.. _theming/options: + Default options =============== @@ -164,6 +179,8 @@ First, try to construct your theme by using Odoo's default options. This ensures .. seealso:: :doc:`Odoo coding guidelines <../../../contributing/development/coding_guidelines>` +.. _theming/module/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 color palette: http://localhost:8069/website/demo/color-combinations +.. _theming/module/bootstrap: + Bootstrap variables ------------------- @@ -492,6 +511,8 @@ values and *not* the :file:`primary_variables.scss` file. http://localhost:8069/website/demo/bootstrap +.. _theming/module/views: + Views ----- @@ -541,6 +562,8 @@ By reading the source code, templates related to options are easily found. +.. _theming/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 files to the bundle. +.. _theming/assets/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'); } +.. _theming/assets/interactivity: + Interactivity -------------