From df788fc48597da9f7f88720a5522b5e9cc287aef Mon Sep 17 00:00:00 2001 From: CVDE-odoo Date: Thu, 20 Apr 2023 14:32:38 +0000 Subject: [PATCH] [ADD] developer/howto: guide for theming A complete guide on how to create a custom website theme for Odoo closes odoo/documentation#4416 X-original-commit: 892fd3e2acf2296f36b5bfaf755b25f0661b1645 Signed-off-by: Antoine Vandevenne (anv) Signed-off-by: Castillo Jonathan (jcs) --- content/administration/install/install.rst | 2 + content/developer/howtos.rst | 6 + content/developer/howtos/themes.rst | 1110 ----------------- content/developer/howtos/themes/Intro.jpg | Bin 34344 -> 0 bytes .../developer/howtos/themes/after-menu.png | Bin 90382 -> 0 bytes content/developer/howtos/themes/cms.jpg | Bin 26015 -> 0 bytes .../developer/howtos/themes/def_structure.jpg | Bin 28760 -> 0 bytes .../howtos/themes/functionalities.jpg | Bin 11727 -> 0 bytes content/developer/howtos/themes/page.jpg | Bin 62196 -> 0 bytes .../howtos/themes/page_structure.jpg | Bin 30602 -> 0 bytes content/developer/howtos/themes/restart.png | Bin 724 -> 0 bytes .../howtos/themes/seo_snippet_good.png | Bin 158711 -> 0 bytes .../howtos/themes/seo_snippet_wrong.png | Bin 75244 -> 0 bytes .../howtos/themes/services_page_menu.png | Bin 3513 -> 0 bytes .../howtos/themes/services_page_nostyle.png | Bin 12961 -> 0 bytes content/developer/howtos/themes/snippet.jpg | Bin 33063 -> 0 bytes .../developer/howtos/themes/snippet_bar.png | Bin 32119 -> 0 bytes .../howtos/themes/snippet_custom_method.png | Bin 39087 -> 0 bytes .../howtos/themes/snippet_default.png | Bin 23694 -> 0 bytes .../howtos/themes/snippet_options.png | Bin 27575 -> 0 bytes .../howtos/themes/snippet_options2.png | Bin 28440 -> 0 bytes content/developer/howtos/themes/styles.jpg | Bin 40789 -> 0 bytes .../developer/howtos/themes/theme_folder.jpg | Bin 9643 -> 0 bytes content/developer/howtos/website_themes.rst | 37 + .../howtos/website_themes/animations.rst | 44 + .../website_themes/animations/animations.png | Bin 0 -> 12782 bytes .../howtos/website_themes/building_blocks.rst | 503 ++++++++ .../developer/howtos/website_themes/forms.rst | 134 ++ .../howtos/website_themes/going_live.rst | 40 + .../howtos/website_themes/gradients.rst | 52 + .../howtos/website_themes/layout.rst | 619 +++++++++ .../howtos/website_themes/navigation.rst | 212 ++++ .../developer/howtos/website_themes/pages.rst | 309 +++++ .../website_themes/pages/header-overlay.png | Bin 0 -> 133650 bytes .../website_themes/pages/icon-options.png | Bin 0 -> 17845 bytes .../website_themes/pages/media-window.png | Bin 0 -> 102482 bytes .../developer/howtos/website_themes/setup.rst | 256 ++++ .../website_themes/setup/database-backup.png | Bin 0 -> 11637 bytes .../website_themes/setup/download-backup.png | Bin 0 -> 12480 bytes .../website_themes/setup/models-page.png | Bin 0 -> 28416 bytes .../website_themes/setup/welcome-homepage.png | Bin 0 -> 26451 bytes .../howtos/website_themes/shapes.rst | 233 ++++ .../howtos/website_themes/theming.rst | 637 ++++++++++ .../website_themes/theming/dashboard.png | Bin 0 -> 347459 bytes .../howtos/website_themes/theming/purple.png | Bin 0 -> 84228 bytes .../theming/theme-colors-airproof.png | Bin 0 -> 331579 bytes .../theming/theme-colors-big.png | Bin 0 -> 15021 bytes .../website_themes/theming/theme-colors.png | Bin 0 -> 4093 bytes .../howtos/website_themes/translations.rst | 69 + .../translations/edit-translations.png | Bin 0 -> 30246 bytes .../translations/translate-button.png | Bin 0 -> 6278 bytes .../howtos/website_themes/web-design.png | Bin 0 -> 88360 bytes redirects/15.0.txt | 1 + 53 files changed, 3154 insertions(+), 1110 deletions(-) delete mode 100644 content/developer/howtos/themes.rst delete mode 100644 content/developer/howtos/themes/Intro.jpg delete mode 100755 content/developer/howtos/themes/after-menu.png delete mode 100755 content/developer/howtos/themes/cms.jpg delete mode 100644 content/developer/howtos/themes/def_structure.jpg delete mode 100755 content/developer/howtos/themes/functionalities.jpg delete mode 100755 content/developer/howtos/themes/page.jpg delete mode 100755 content/developer/howtos/themes/page_structure.jpg delete mode 100644 content/developer/howtos/themes/restart.png delete mode 100644 content/developer/howtos/themes/seo_snippet_good.png delete mode 100644 content/developer/howtos/themes/seo_snippet_wrong.png delete mode 100755 content/developer/howtos/themes/services_page_menu.png delete mode 100755 content/developer/howtos/themes/services_page_nostyle.png delete mode 100755 content/developer/howtos/themes/snippet.jpg delete mode 100755 content/developer/howtos/themes/snippet_bar.png delete mode 100644 content/developer/howtos/themes/snippet_custom_method.png delete mode 100755 content/developer/howtos/themes/snippet_default.png delete mode 100755 content/developer/howtos/themes/snippet_options.png delete mode 100755 content/developer/howtos/themes/snippet_options2.png delete mode 100755 content/developer/howtos/themes/styles.jpg delete mode 100755 content/developer/howtos/themes/theme_folder.jpg create mode 100644 content/developer/howtos/website_themes.rst create mode 100644 content/developer/howtos/website_themes/animations.rst create mode 100644 content/developer/howtos/website_themes/animations/animations.png create mode 100644 content/developer/howtos/website_themes/building_blocks.rst create mode 100644 content/developer/howtos/website_themes/forms.rst create mode 100644 content/developer/howtos/website_themes/going_live.rst create mode 100644 content/developer/howtos/website_themes/gradients.rst create mode 100644 content/developer/howtos/website_themes/layout.rst create mode 100644 content/developer/howtos/website_themes/navigation.rst create mode 100644 content/developer/howtos/website_themes/pages.rst create mode 100644 content/developer/howtos/website_themes/pages/header-overlay.png create mode 100644 content/developer/howtos/website_themes/pages/icon-options.png create mode 100644 content/developer/howtos/website_themes/pages/media-window.png create mode 100644 content/developer/howtos/website_themes/setup.rst create mode 100644 content/developer/howtos/website_themes/setup/database-backup.png create mode 100644 content/developer/howtos/website_themes/setup/download-backup.png create mode 100644 content/developer/howtos/website_themes/setup/models-page.png create mode 100644 content/developer/howtos/website_themes/setup/welcome-homepage.png create mode 100644 content/developer/howtos/website_themes/shapes.rst create mode 100644 content/developer/howtos/website_themes/theming.rst create mode 100644 content/developer/howtos/website_themes/theming/dashboard.png create mode 100644 content/developer/howtos/website_themes/theming/purple.png create mode 100644 content/developer/howtos/website_themes/theming/theme-colors-airproof.png create mode 100644 content/developer/howtos/website_themes/theming/theme-colors-big.png create mode 100644 content/developer/howtos/website_themes/theming/theme-colors.png create mode 100644 content/developer/howtos/website_themes/translations.rst create mode 100644 content/developer/howtos/website_themes/translations/edit-translations.png create mode 100644 content/developer/howtos/website_themes/translations/translate-button.png create mode 100644 content/developer/howtos/website_themes/web-design.png diff --git a/content/administration/install/install.rst b/content/administration/install/install.rst index 661dc52cd..fc6eca666 100644 --- a/content/administration/install/install.rst +++ b/content/administration/install/install.rst @@ -645,6 +645,8 @@ Dependencies `_ for it to support headers and footers. See our `wiki `_ for more details on the various versions. +.. _setup/install/source/running_odoo: + Running Odoo ------------ diff --git a/content/developer/howtos.rst b/content/developer/howtos.rst index adcf15d6d..9e798f08e 100644 --- a/content/developer/howtos.rst +++ b/content/developer/howtos.rst @@ -17,6 +17,7 @@ How-to guides howtos/create_reports howtos/accounting_localization howtos/translations + howtos/website_themes howtos/provide_iap_services howtos/connect_device @@ -68,6 +69,11 @@ How-to guides Learn how to provide translation abilities to your module. + .. card:: Website themes + :target: howtos/website_themes + + Learn how to customize your website by creating a custom theme. + .. card:: Provide IAP services :target: howtos/provide_iap_services diff --git a/content/developer/howtos/themes.rst b/content/developer/howtos/themes.rst deleted file mode 100644 index d889246c6..000000000 --- a/content/developer/howtos/themes.rst +++ /dev/null @@ -1,1110 +0,0 @@ -:orphan: - -============== -Theme Tutorial -============== - -.. warning:: - - This tutorial is outdated and won't work out of the box. - -.. rst-class:: lead - -Odoo celebrates freedom. Freedom for the designer to go further and -freedom for the user to customize everything according to their needs. - -Ready to create your own theme? Great. Here are some things you should know before you begin. This tutorial is a guide to creating an Odoo theme. - -.. image:: themes/Intro.jpg - - -An introduction for web designers -================================= - -If you are a web designer using Odoo for the first time, you are in the right place. -This introduction will outline the basics of Odoo theme creation. Odoo’s team has created a framework that’s powerful and easy to use. - -From common CMS to Odoo ------------------------ - -.. note:: - If you always think and work in the same way, you’ll probably get the same results. If you want something completely new, then try something different. - -**Where is my header.php file?** - -This is usually the first question from a web designer used to working with Wordpress or Joomla and coming to Odoo for the first time. - -.. container:: row - - .. container:: col-sm-4 - - .. image:: themes/cms.jpg - - .. container:: col-sm-7 - - Indeed, when using common CMSs, you have to code several files (like header.php, page.php, post.php, etc.) in order to create a basic structure for your website. With those systems, this base structure acts as a design foundation that you have to update over time to ensure compatibility within your CMS. So, even after you have spent hours coding the files, you have not even started on the design yet. - - This **does not** apply to creating Odoo themes. - - -.. note:: - We think that theme design should be simple (and powerful). When we created our Website Builder, we decided to start from scratch instead of relying on what already existed. This approach gave us the freedom to focus on the things that are really important for designers: styles, content and the logic behind them. No more struggling with technical stuff. - -Odoo default theme structure ----------------------------- - -.. container:: row - - .. container:: col-sm-8 - - Odoo comes with a default website structure. - It is a very basic “theme” that provides minimal structure and layout. When you create a new theme, you are actually **extending** this. - Indeed it’s always enabled in your setup and it acts exactly like the CMS’s base structure we mentioned above, except that you don’t have to create or maintain it. - It will upgrade automatically within your Odoo installation and, since it is included in the Website Builder module, everything is smoothly integrated by default. - - As a result, you are totally free to focus on design while this structure does the job of providing integrations and functionality. - - .. container:: col-sm-4 - - .. image:: themes/def_structure.jpg - -.. container:: row - - .. container:: col-md-6 - - **Main features:** - - * Basic layouts for pages, blog, eCommerce and much more - * Website Builder integration - * Basic Snippets - * Automatic Sass compiling - * Automatic Js and CSS minification and combination - - .. container:: col-md-6 - - **Main technologies:** - - * Twitter Bootstrap - * jQuery - * jQuery UI - * underscore.js - -Thinking "modular" -================== - -An Odoo theme is not a folder containing HTML or PHP files, it’s a modular framework written in XML. Never worked with XML files before? Don’t worry, after following the tutorial, you’ll be able to create your first theme with only basic knowledge of HTML. - -Using classical web design workflows, you usually code the layout of the entire page. The result of this is a “static” web page. You can update the content, of course, but your client will need you to work on making even basic changes. - -Creating themes for Odoo is a total change of perspective. Instead of defining the complete layout for a page, you can create blocks (snippets) and let the user choose where to “drag&drop” them, creating the page layout on their own. -We call this modular design. - -Imagine an Odoo theme as a “list” of elements and options that you have to create or extend. -As a designer, your goal is to style these elements in order to achieve a wonderful result, regardless of where the end user chooses to place them. - -Let’s take a tour of our “list” elements: - -.. container:: row - - .. figure:: themes/snippet.jpg - :figclass: col-sm-6 - - Snippets (or building-blocks) - - A piece of HTML code. The user will drag&drop, modify and combine them using our built-in Website Builder interface. You can define sets of options and styles for each snippet. The user will choose from them according to their needs. - - .. figure:: themes/page.jpg - :figclass: col-sm-6 - - Pages - - These are normal web pages, except that they will be editable by the final user and that you can define an empty area that the user can “fill” by dragging snippets into it. - -.. raw:: html - -
- -.. container:: row - - .. figure:: themes/styles.jpg - :figclass: col-sm-6 - - Styles - - Styles are defined using SCSS files (or you can use standard CSS files). You can define a style as **default** or **optional**. The default styles are always active in your theme, the optional styles can be enabled or disabled by the user. - - .. figure:: themes/functionalities.jpg - :figclass: col-sm-6 - - Functionalities - - Thanks to Odoo’s modularity, everything can be personalized even more. This means there are endless possibilities for your creativity. Adding functionalities is easy and it’s simple to provide the end user with customizable options. - - -Odoo's XML files, an overview ------------------------------ - -Any Odoo XML file starts with encoding specifications. -After that, you have to write your code inside a ```` tag. - -.. code-block:: xml - - - -   -   ## YOUR CODE HERE -   - - -Almost every element and option that you create has to be placed inside a ``