From f7d9d8eaacc967d6e0e6ed641ed876ae036b9203 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Fri, 15 Jan 2021 08:40:43 +0000 Subject: [PATCH] [REF] doc: update theme & website tutorial + doc This fixes some details and reorganize the order of the tutorial. It also introduces a more detailed section for the SCSS customization. A very detailed and updated version of this tutorial is being made for the 14.0 version and later. task-2440442 closes odoo/odoo#64700 X-original-commit: 08d44d444490713ca39618a67f441bbd84b8b900 Signed-off-by: Quentin Smetz (qsm) --- .../theme_tutorial_assets/img/folder.jpg | Bin 6260 -> 0 bytes .../img/theme_folder.jpg | Bin 0 -> 9643 bytes doc/howtos/themes.rst | 578 ++++++++++-------- 3 files changed, 327 insertions(+), 251 deletions(-) delete mode 100755 doc/howtos/theme_tutorial_assets/img/folder.jpg create mode 100755 doc/howtos/theme_tutorial_assets/img/theme_folder.jpg diff --git a/doc/howtos/theme_tutorial_assets/img/folder.jpg b/doc/howtos/theme_tutorial_assets/img/folder.jpg deleted file mode 100755 index af2acb93d56e224a78da407d43a1549fafaa8c06..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6260 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 diff --git a/doc/howtos/theme_tutorial_assets/img/theme_folder.jpg b/doc/howtos/theme_tutorial_assets/img/theme_folder.jpg new file mode 100755 index 0000000000000000000000000000000000000000..066e85c61586cbe35b934a70d75e2863a378e58d GIT binary patch literal 9643 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 New Page` and +Website Builder. Click on :menuselection:`New --> New Page` and add a page name. Inspect the page using your browser. .. code-block:: html -
-
-
-
-
+
+
+
+
+
-Extend the default Header + +Add Styles +========== + +Introduction +------------ + +The most important feature or your theme should be the style it provides. +Odoo includes Bootstrap by default. This means that you can take advantage of all Bootstrap styles and layout functionalities out of the box. + +Of course Bootstrap is not enough if you want to provide a unique design. The following steps will guide you through how to add custom styles to your theme. +The final result won't be pretty, but will provide you with enough information to build upon on your own. + +Let’s start by creating an empty file called **style.scss** and place it in a folder called **scss** in your static folder. +Let's add an example rule which adds a top border on the footer. Copy and paste it, then save the file. + +.. code-block:: scss + + footer { + border-top: 5px solid theme-color('primary'); + } + +Our file is ready but it is not included in our theme yet. + +Let’s navigate to the view folder and create an XML file called *assets.xml*. +Add the default Odoo xml markup as seen before then copy/paste the following +code between the Odoo tags. Remember to replace ``theme_tutorial`` with your +theme’s main folder name. + +.. code-block:: xml + + + +We just created a template specifying our scss file. As you can see, +our template has a special attribute called ``inherit_id``. This +attribute tells Odoo that our template is referring to another one in +order to operate. + +In this case, we are referring to ``assets_frontend`` template, +located in the ``website`` module. ``assets_frontend`` specifies the +list of assets loaded by the website builder and our goal is to add +our scss file to this list. + +This can be achieved using xpath with the attributes +``expr="link[last()]"`` and ``position="after"``, which means "*take my +style file and place it after the last link in the list of +assets*". + +Placing it after the last one, we ensure that our file will +be loaded at the end and takes priority. + +Finally add **assets.xml** in your **__manifest__.py** file in the data section. + +Update your theme. + +.. image:: theme_tutorial_assets/img/restart.png + + +Our scss file is now included in our theme, it will be automatically compiled, minified and combined with all Odoo’s assets. + +You can now see the beautiful footer border on the website. + + +Advanced tips for styling ------------------------- +In the introduction, we saw how to add a basic file of CSS rules into the +system to extend the website. This is actually the last step you should need to +add style to your theme. + +The Odoo website builder already allows the user to create pages by adding a +large variety of default well-designed blocks. It also allows a large set of +customization possibilities. What may not be straightforward for the user is to +combine all of those options to make something really beautiful. This is where +your theme can shine. First try to construct the spirit of your theme by +enabling a nice set of Odoo default options. This also allows you to ensure two +things: + +- You do not re-invent something which already exists. If Odoo provides an + option to have a border on the footer, don't recode it yourself. Enable it, + then extend it if needed. + +- You ensure that the user can still use all of Odoo features with your theme. + Again, if Odoo provides an option to have a border on the footer and that you + recode it yourself, you may break the default option or make it useless, + making the user have a bad experience. Your option might also not work as well + with all the other Odoo features relying on it. + +So here are the steps to create a robust and consistent style for your theme: + +\(1) Set the values for Odoo-provided SCSS variables + +Odoo declares many CSS rules, most being entirely customizable by overridding +the related SCSS variables. First, create a new file called primary_variables.scss +and add it the same way as the style.scss file. The only difference it that +you won't add it in the ``assets_frontend`` template but in the ``_assets_primary_variables`` +template. + +.. code-block:: xml + + + + +.. important:: + + That file must only contain definition and overrides of SCSS variables and + mixins. + +Add those: + +.. code-block:: scss + + $o-color-palettes: ( + ( + 'o-color-1': #85AFA8, + 'o-color-2': #7E566B, + 'o-color-3': #85909A, + 'o-color-4': #969397, + 'o-color-5': #422335, + ), + ( + 'o-color-1': #54787D, + 'o-color-2': #6B9997, + 'o-color-3': #615145, + 'o-color-4': #C6CCA5, + 'o-color-5': #412342, + ), + ); + +This defines two color palettes for the user to choose from. Odoo relies +on five named colors to be used by the website builder. By defining those in +your theme, you ensure a consistent colored Odoo theme. Starting with Odoo 14.0, +a lot more variable are there for you to customize. + +.. note:: + + All variables defined through those "palettes" SCSS maps can later be + customized by the users themselves. + +\(2) Set the values for Bootstrap variables that Odoo do not surcharge + +If Odoo does not provide the variable you are looking for, then try to find a +Bootstrap variable which allows it. Indeed all Odoo layouts respect Bootstrap +structures and use Bootstrap components or extensions of them. So if you +customize a bootstrap variable, you add a generic style for the whole user +website. + +Bootstrap values **must** not be overridden in the primary_variables.scss file but +in another dedicated file, extending the ``_assets_frontend_helpers`` template. + +.. code-block:: xml + + + +With for example: + +.. code-block:: scss + + $dropdown-min-width: 200px; + +.. important:: + + Make sure to not override Bootstrap variables which depend on Odoo variables + of step (1). Otherwise, you might break the possibility for the user to + customize them using the Odoo website builder. + +\(3) Add your own CSS rules as seen in the introduction + +You may also want to design your snippet first, as we will see in a later +section of this tutorial. + + +Extend Odoo Layout +================== + By default, Odoo header contains a responsive navigation menu and the company’s logo. You can easily add new elements or style the existing one. To do so, create a **layout.xml** file in your **views** folder and add the default Odoo xml markup. -.. code-block:: xml - - - - - - - - -Create a new template into the ```` tag, copy-pasting the following -code. +Then copy-pasting the following code. .. code-block:: xml - -