diff --git a/content/developer/tutorials/website_theme.rst b/content/developer/tutorials/website_theme.rst index f5de7ce57..8d9de077d 100644 --- a/content/developer/tutorials/website_theme.rst +++ b/content/developer/tutorials/website_theme.rst @@ -27,16 +27,16 @@ You will also need some knowledge in: :alt: Airproof homepage. :align: center -| In the :file:`README.md` of this `Airproof module +| In the :file:`README.md` of the `Airproof module `_, you can find - the various Airproof designs that you will replicate throughout the different exercises of this + the various Airproof designs that you will replicate throughout the different exercises in this tutorial. | You can also find all the code necessary for creating the Airproof website there. You should also - obtain this by the end of the tutorial. It is recommended to try to solve the exercices first + obtain this by the end of the tutorial. It is recommended to try solving the exercices first without looking at the solution! | **Don't go too fast!** -| Follow the exercises step by step and you will reach the final design at the end of the exercises. +| Follow the exercises step by step and you will reach the final design at the end of the tutorial. Read the documentation linked in the :doc:`How-to guide: Website theme <../howtos/website_themes>`. @@ -50,4 +50,4 @@ Ready? Let's get started! website_theme/03_customisation_part1 website_theme/04_customisation_part2 website_theme/05_dynamic_templates - website_theme/06_going_live \ No newline at end of file + website_theme/06_going_live diff --git a/content/developer/tutorials/website_theme/01_theming.rst b/content/developer/tutorials/website_theme/01_theming.rst index 98dc6096c..78970f75d 100644 --- a/content/developer/tutorials/website_theme/01_theming.rst +++ b/content/developer/tutorials/website_theme/01_theming.rst @@ -2,7 +2,7 @@ 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. .. _tutorials/website_theme/theming/setup: @@ -27,7 +27,7 @@ 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, … | Start with the basics : :file:`/data`, :file:`/img`, :file:`/scss`, :file:`/js` -| Don’t forget to add the :file:`__init__.py` and :file:`__manifest__.py` files +| 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: @@ -60,12 +60,12 @@ following elements: - Header & Footer : Use one of the default templates for the moment, we will create a custom header later. -| Restart your script to already see the application of your changes. +| Restart your script to immediately see the application of your changes. | Don't forget to add the path to your manifest in the script 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 -color palette contains your specified colors. +To ensure your changes are applied correctly, log in to your website and check that your +color palette includes your specified colors. .. tip:: You will need to override more variables to replicate the Airproof design. Remember to add them @@ -75,7 +75,7 @@ color palette contains your specified colors. The font families are from `Google fonts `_. .. seealso:: - Documentation on :ref:`theming/module/variables`. And see all the `primary variables + Documentation on :ref:`theming/module/variables`, as well as a list of all `primary variables <{GITHUB_PATH}/addons/website/static/src/scss/primary_variables.scss>`_ available. .. spoiler:: Solutions @@ -119,7 +119,7 @@ Based on the Airproof design, define the following elements: .. tip:: - You will need to override more variables to replicate the Airproof design. Remember to add them throughout the creation of your website. - - Make it a habit to regularly check locally whether your changes have been successfully applied + - Make it a habit to regularly check locally that your changes have been successfully applied and have not caused any errors. .. seealso:: diff --git a/content/developer/tutorials/website_theme/02_build_website.rst b/content/developer/tutorials/website_theme/02_build_website.rst index a31533b71..9ebc18e9e 100644 --- a/content/developer/tutorials/website_theme/02_build_website.rst +++ b/content/developer/tutorials/website_theme/02_build_website.rst @@ -69,10 +69,10 @@ Add a media If you want the client to be able to reuse certain pictures that you are going to add on the website, they must be added to the image library. -| To do the test, declare the drone image to add it in the library. You will find the +| To do the test, declare the drone image to add it to the library. You will find the `drone picture here `_. -| Go to the :guilabel:`website builder`, double click on the :guilabel:`logo`, you will see the +| Go to the :guilabel:`website builder`, double-click on the :guilabel:`logo`, and you will see the drone image in the library. .. seealso:: @@ -97,13 +97,15 @@ Add building blocks Now, let's get into the real work. Start adding content to the pages. In an Odoo website, we create the content of a page using building blocks. These can be compared to -snippets editable by the user using the Website Builder. The standard main container of any snippet +snippets editable by the user in the Website Builder. The standard main container for any snippet is a `section`. Based on the Airproof design, add the following elements to the homepage : - Create a section with the 3 boxes using the :guilabel:`Big boxes` building block. +.. TODO: cannot be edited? + - Ensure that it cannot be edited via the website builder. - Put an opacity filter on the background image of the 3 boxes. @@ -122,7 +124,7 @@ and the `icons here To determine the code needed to create your building blocks : - | Create a test page via the website builder. - | Drag & drop the building block that interests you and give it the right design. + | Drag & drop the building block that interests you and apply the right design. | Use the code generated via :guilabel:`Editor HTML/SCSS` in the menu. - You can also find the original building block code in Odoo : :file:`odoo/addons/website/views/snippets/**.xml`. diff --git a/content/developer/tutorials/website_theme/03_customisation_part1.rst b/content/developer/tutorials/website_theme/03_customisation_part1.rst index 9d41ff275..67aa4b4cd 100644 --- a/content/developer/tutorials/website_theme/03_customisation_part1.rst +++ b/content/developer/tutorials/website_theme/03_customisation_part1.rst @@ -14,7 +14,7 @@ In :file:`theme.scss`, reproduce the following design elements: - Add a **green underline** on active nav items. - Modify the **arrow** for collapsible nav items. -- Modify the **slider’s arrows** by adding a green background and changing their design. +- Modify the **slider's arrows** by adding a green background and changing their design. You will find the various `media here `_. @@ -25,7 +25,7 @@ You will find the various `media here .. image:: 03_customisation_part1/slider.png .. note:: - | It’s always preferable to include all your SCSS rules in `#wrapwrap`. This ID is applied to the + | It's always preferable to include all your SCSS rules in `#wrapwrap`. This ID is applied to the div that groups the :guilabel:`header`, :guilabel:`footer`, and :guilabel:`main` content of all your pages. | So you will be sure that your rules will only have an impact on the website parts. @@ -66,7 +66,7 @@ Use your JavaScript skills to implement this. Create a custom header ====================== -With variables, presets, and custom SCSS in place, it’s time to refine the layout and add key +With variables, presets, and custom SCSS in place, it's time to refine the layout and add key cross-page elements, starting with the header. Based on the Airproof design, create a custom header with the following elements: @@ -92,7 +92,7 @@ and `template illustration - As well as the SCSS related to the bubbles in the + Additionally, the SCSS related to the bubbles in the `s_airproof_carousel/000.scss `_ file. @@ -293,13 +293,13 @@ cover section on your homepage. .. _tutorials/website_theme/customisation_part1/custom_dynamic_template: -Create a template to add in dynamic snippets -============================================ +Create a new dynamic snippet template +===================================== -| Useful building blocks are the dynamic snippets. These allow you to fetch information from the - backend and display it on the website according to certain filters. +| Dynamic snippets are useful building blocks. These allow you to fetch information from the backend + and display it on the website according to certain filters. | There are already several layout templates for displaying dynamic snippets. However, none of the - existing templates fully match your client’s needs. + existing templates fully match your client's needs. Based on the Airproof design, create a custom template that you will apply to a product dynamic snippet on the homepage. @@ -315,7 +315,7 @@ snippet on the homepage. .. image:: 03_customisation_part1/custom-template.png -#. Then add a product dynamic snippet with the template you just created on the homepage. +#. Then, add a product dynamic snippet with the template you just created to the homepage. .. tip:: You can verify in the website builder that your template appears in the list of available @@ -333,6 +333,6 @@ snippet on the homepage. file and `caroussel.scss `_ file from our example module. - #. Apply to a product dynamic snippet on the homepage. You can find all the necessary - information in the `home.xml `_ + #. Apply the template to a product dynamic snippet on the homepage. You can find all the + necessary information in the `home.xml `_ file from our example module. diff --git a/content/developer/tutorials/website_theme/04_customisation_part2.rst b/content/developer/tutorials/website_theme/04_customisation_part2.rst index 061680f40..3fda3e83c 100644 --- a/content/developer/tutorials/website_theme/04_customisation_part2.rst +++ b/content/developer/tutorials/website_theme/04_customisation_part2.rst @@ -7,10 +7,10 @@ Chapter 4 - Customisation, Part II Create a custom background shape ================================ -Shapes are decorative elements that can be applied to backgrounds or images. These are SVG files +Shapes are decorative elements that can be applied to backgrounds or images. They are SVG files that can be animated and customized with different colors. -#. To better align with the website’s desired atmosphere, create a custom background shape that the +#. To better align with the website's desired atmosphere, create a custom background shape that the client can reuse on different blocks. Create your custom shape using the following setup : @@ -26,7 +26,7 @@ that can be animated and customized with different colors. | **Be careful,** there is a trick! | In your shape SVG file, you have to use the colors from the default Odoo palette. | Here, I want it to match my primary color 3 (`#CEF8A1`). Therefore, in the SVG file, you must - use color 3 from Odoo’s default palette (`#F6F6F6`). + use color 3 from Odoo's default palette (`#F6F6F6`). .. seealso:: Documentation on :ref:`custom background shapes `. @@ -44,7 +44,7 @@ that can be animated and customized with different colors. the homepage : - Ensure the shape is in the right position. - - Set its color to the theme’s light blue. + - Set its color to the theme's light blue. .. image:: 04_customisation_part2/shape-section.png @@ -172,7 +172,7 @@ contact form must be properly configured. To determine the correct code for your form : - | Create a test page via the website builder. - | Drag & drop the building block that interests you and give it the right design. + | Drag & drop the building block that interests you and apply the right design. | Use the code generated through :guilabel:`Editor HTML/SCSS`. - You can also find the original building block code in Odoo : `odoo/addons/website/views/snippets/s_website_form.xml @@ -185,7 +185,7 @@ contact form must be properly configured. - :ref:`website_themes/pages/theme_pages`, - :ref:`website_themes/navigation/menu`. - | And see documentation on :doc:`/developer/howtos/website_themes/forms`. + | Also, see documentation on :doc:`/developer/howtos/website_themes/forms`. .. spoiler:: Solutions diff --git a/content/developer/tutorials/website_theme/05_dynamic_templates.rst b/content/developer/tutorials/website_theme/05_dynamic_templates.rst index 121ea216e..dcc62a975 100644 --- a/content/developer/tutorials/website_theme/05_dynamic_templates.rst +++ b/content/developer/tutorials/website_theme/05_dynamic_templates.rst @@ -54,19 +54,20 @@ pages. Based on the Airproof design below, adapt a few elements including: +.. TODO: list spacing different than the one above? - Remove the search bar (if not done with the previous exercise). - Remove the quantity selector, Terms and Conditions, and share icons. - Update the :guilabel:`Add to cart` button icon. -- Insert a title above the product specifications. (This section appears only when the product has - one variant per attribute.) +- Insert a title above the product specifications (this section appears only when the product has + one variant per attribute). - Design the appropriate layout for the carousel. - Add a title and apply the previously created product template to the `Alternative products` - section. (Ensure alternative products are assigned on the product in the backend for this section - to appear.) + section (ensure alternative products are assigned on the product in the backend for this section + to appear). - | Implement a new drop zone below product details, visible on all products. | As a use case, add an `Text-Image` building block using the website builder (e.g.: See product page screenshot with “*Six reasons to buy…*”). - +.. TODO: add screenshot directly here instead? .. tip:: - Make your modifications using presets, XPath, and SCSS. Be sure to comment your code properly so you can find your way around. diff --git a/content/developer/tutorials/website_theme/06_going_live.rst b/content/developer/tutorials/website_theme/06_going_live.rst index 2ab5d6be5..dab6fd03d 100644 --- a/content/developer/tutorials/website_theme/06_going_live.rst +++ b/content/developer/tutorials/website_theme/06_going_live.rst @@ -14,19 +14,20 @@ is fully adapted to the Airproof design. Amazing! Now, the client wants the website translated into French. -The easiest way to do it is: +The easiest way to do this is: #. | Add French to the website in the settings. | Enable the language switcher in the header via presets. -#. | Translate the content of the homepage carousel through the backend. + .. TODO: why translate the carousel in the backend? +#. | Translate the content of the homepage carousel through the backend. | But for the menu, make the translations through the frontend. #. | Export the French :file:`.po` file for your Airproof module. | Place it in the :file:`/i18n` translations folder. -#. If you want you can make more translations directly by editing the :file:`.po` file. (using - Poedit software, your code editor, or another translation tool). +#. If you would like, you can add more translations directly by editing the :file:`.po` file. (using + Poedit, your code editor, or another translation tool). .. note:: - - Be careful when using Poedit it doesn’t handle tags with style well and it generates an + - Be careful when using Poedit, as it doesn't handle tags with styles well and generates an :file:`.mo` file. - To see the changes made directly via the :file:`.po` file, you will need to manually import the file. @@ -54,7 +55,7 @@ Before that, test the import process on a new database. - Ensure the `base_import_module` is installed on the database before the module installation. - Verify all required applications are installed. - Skip the theme installation steps and start from scratch. - - Manually import translations after module installation, as they won’t apply automatically. + - Manually import translations after module installation, as they won't apply automatically. .. seealso:: Documentation on how to :doc:`deploy a module <../../howtos/website_themes/going_live>` on an @@ -68,17 +69,18 @@ You've successfully navigated through every stage, from setting up your developm launching a fully customized Odoo website theme. Throughout this journey, you've mastered: +.. TODO: is it a good practice to add emojis in .rst file? -| ✅ **Theme module creation** – setting up the structure, declaring Odoo and Bootstrap variables. -| ✅ **Website building** – creating pages, adding media, and constructing dynamic building blocks. -| ✅ **Advanced customization** – implementing custom SCSS, JavaScript, headers, footers, and unique +| ✅ **Theme module creation** - setting up the structure, declaring Odoo and Bootstrap variables. +| ✅ **Website building** - creating pages, adding media, and constructing dynamic building blocks. +| ✅ **Advanced customization** - implementing custom SCSS, JavaScript, headers, footers, and unique design elements. -| ✅ **Visual enhancements** – designing background shapes, gradients, and animations for an +| ✅ **Visual enhancements** - designing background shapes, gradients, and animations for an engaging user experience. -| ✅ **eCcommerce optimization** – adapting shop and product templates for a seamless shopping +| ✅ **eCommerce optimization** - adapting shop and product templates for a seamless shopping experience. -| ✅ **Final preparations** – managing translations and ensuring a smooth module import. +| ✅ **Final preparations** - managing translations and ensuring a smooth module import. -| With these skills, you’re now to design and develop professional, fully customized website themes. - Well done! 🎉 -| We can’t wait to see the amazing themes you’ll create in the future. +| With these skills, you're now ready to design and develop professional, fully customized website + themes. Well done! 🎉 +| We can't wait to see the amazing themes you'll create in the future.