[IMP] website: general themes restructuration

task-4644985

Author: guillaume gallant (guga)

Diff for: content/applications/websites/website/web_design/themes.rst

@@ -1,81 +1,163 @@
-==============
-Website themes
-==============
+=============
+General theme
+=============
 
-Odoo offers numerous themes to shape your website's style, including its colors, fonts, and layouts.
-When setting up your site using the Odoo website configurator, you are prompted to select a theme
-that aligns with your desired aesthetic. If you wish to modify the theme options later, navigate to
-the website builder by clicking the :guilabel:`Edit` button and access the :guilabel:`Theme` tab.
-The following sections are available:
+Odoo offers various options to shape your website’s theme, including its
+:ref:`Colors <website/themes/colors>`, :ref:`Fonts <website/themes/fonts>`, and
+:ref:`Layouts <website/themes/page-layouts>`, ensuring alignment with your company's brand identity
+and aesthetics.
 
-- :guilabel:`Colors`: The website builder relies on palettes composed of five colors: two
-  :guilabel:`Main` colors and three :guilabel:`Light & Dark` colors.
+When setting up your website for the first time, you land on the theme selection page. Hover your
+mouse over the themes to see an extended preview of each page. Click on a page to apply the theme to
+your website. If you leave without selecting a theme, Odoo automatically assigns the
+:guilabel:`Default` theme  to your website. You can switch themes later as many times as you want.
 
-  You can also customize the :guilabel:`Color Presets` that have been defined automatically by the
-  website builder according to the five colors defined above. Click the arrow next to a color preset
-  to update it. Each color preset contains colors for your building block's :guilabel:`Background`,
-  :guilabel:`Text`, :guilabel:`Headings`, :guilabel:`Links`, :guilabel:`Primary Buttons`, and
-  :guilabel:`Secondary Buttons`.
+In the website builder, the :guilabel:`Theme` tab offers many customization options for your theme.
+Go to :menuselection:`Website --> Edit --> Theme`.
 
-  .. image:: themes/colors.png
-     :alt: select the colors of your website
-     :scale: 75%
+Once you have made the desired changes, click on :guilabel:`Save` to confirm and apply them to your
+website.
 
-  **To apply a color preset** to a building block of your site, select it, go to the
-  :guilabel:`Customize` tab, click the :guilabel:`Background` button, and select the preset.
+Themes
+======
 
-  .. note::
-     Changing a color preset automatically updates the colors of both the default preset and the
-     building blocks where the preset is used.
+In the :guilabel:`Website` section, click on :guilabel:`Switch Theme` to open the theme selector.
+Hover your mouse over the themes to see an extended preview of each page. Click on it to apply the
+theme to your website.
 
-- :guilabel:`Website`: From this section, you can :guilabel:`Switch Theme`,
-  :doc:`Add a Language <../configuration/translate>`, select the :guilabel:`Page Layout`, and
-  customize the :guilabel:`Background` by uploading your own image.
+.. _website/themes/colors:
 
-- :guilabel:`Paragraph`: Customize the formatting of your website's paragraph `<p>` elements.
+Colors
+======
 
-  .. tip::
-     The :guilabel:`Font Family` field contains fonts that are hosted and served by Google servers.
-     To add another font, click :guilabel:`Add a Google Font`, and, in the popup window, click
-     :guilabel:`fonts.google.com`.
+Odoo's website builder features two main types of colors : :guilabel:`Theme Colors` and
+:guilabel:`Status Colors`.
 
-     .. image:: themes/add-a-font.png
-        :alt: Select the font you like
-        :scale: 75%
+Theme Colors
+------------
 
-     Select a font you like, copy the address of the page, paste it in the :guilabel:`Google Font
-     address` field, then click :guilabel:`Save and Reload`. The new font applies to your entire
-     website.
+:guilabel:`Theme Colors` refers to the set of colors displayed across all pages of your website.
+These are made of five colors: three main colors and two light and dark colors.
 
-- :guilabel:`Headings`: Customize the formatting of your headings.
+To edit your website's colors, go to the :guilabel:`Colors` section in the website editor, then:
 
-- :guilabel:`Button`: Customize the :guilabel:`Primary Style` and :guilabel:`Secondary Style`
-  buttons.
+- Click on the color dot you want to change, then select a :guilabel:`Solid` color or click on
+  :guilabel:`Custom` to pick a specific color tone manually (or add its #HEX or RGBA code).
+- Click on the paint palette icon and choose a color palette. As a result, all color customizations
+  are reset; click a color dot to change a specific color.
 
-  .. image:: themes/buttons.png
-     :alt: Two types of buttons in Odoo
+Odoo automatically creates :guilabel:`Color Presets` for your chosen palette. These are predefined
+color combinations applied to different elements of your website to provide a structured and
+visually appealing design. When you select a color palette, its presets define how those colors are
+distributed across different elements from a building block such as buttons, backgrounds, and text.
+If you want to modify them, click on :guilabel:`Color Presets` and click on a preset to customize it
+further. Each color preset contains colors for your building block’s background, text, headings,
+links, primary buttons, and secondary buttons.
 
-- :guilabel:`Link`: To edit the style of the hyperlinks available on your website.
+.. image:: themes/color-presets.png
+   :scale: 80%
+   :alt: Color presets
 
-- :guilabel:`Input Fields`: Customize fields where you can enter data, e.g., a search bar or a form.
+To apply a color preset to a building block on your site, select the building block, go to the
+:guilabel:`Customize` tab, click the color dot located next to :guilabel:`Background`, and choose a
+:guilabel:`Theme`.
 
-- :guilabel:`Advanced`: You can hide the header bar of your website using the
-  :guilabel:`Show Header` button, inject :ref:`head and body code <analytics/google-tag-manager>`,
-  enter your :guilabel:`Google Map Custom Key`, change the colors of the :guilabel:`Success`,
-  :guilabel:`Info`, :guilabel:`Warning`, and :guilabel:`Error` pop up messages by clicking the
-  related :guilabel:`Status Colors` buttons, and customize the :guilabel:`Grays` elements of your
-  site.
+.. note::
+   Changing a color preset automatically updates the colors of both the default preset and the
+   building blocks where the preset is used.
 
-  .. example::
-     - The :guilabel:`Status Color` of the :guilabel:`Success` messages is set to green.
+Status Colors
+-------------
 
-       .. image:: themes/advanced.png
-          :alt: Status colors success message set to green.
+:guilabel:`Status Colors` are the colors used to indicate the status of certain actions. They're
+used through pop-up messages that appear to provide feedback to the user in your website's
+front and back end. To customize your website :guilabel:`Status Colors`, in the :guilabel:`Advanced`
+section, click on the dots to change their color.
 
-       .. image:: themes/success.png
-          :alt: Success message is green
+.. example::
+   .. image:: themes/advanced.png
+      :scale: 100%
+      :alt: Status color selection
 
-     - Customizing the gray elements of your site.
+   .. image:: themes/success.png
+      :alt: Success pop-up
 
-       .. image:: themes/grays.png
-          :alt: Customize the grays elements of your site
+.. _website/themes/page-layouts:
+
+Page layouts
+============
+
+Odoo offers multiple styles to display your pages content, such as blocks, pictures and more. In the
+:guilabel:`Website` section, click on :guilabel:`Page Layout` and select one in the dropdown menu.
+Under :guilabel:`Page Layout`, customize your :guilabel:`Background` by choosing an
+:guilabel:`Image`, creating a :guilabel:`Pattern` by selecting an image, or leaving it blank.
+
+.. _website/themes/fonts:
+
+Fonts
+=====
+
+Odoo allows you to customize the font family and size for specific elements on your website,
+including paragraphs, headings, buttons, and input fields.
+
+- :guilabel:`Font Family`: In the :guilabel:`Paragraph`, :guilabel:`Headings`, and
+  :guilabel:`Button` sections, select a font from the dropdown menu.
+
+- :guilabel:`Font Size`: In the :guilabel:`Paragraph`, :guilabel:`Headings`, :guilabel:`Button` and
+  :guilabel:`Input Fields` sections, use the :guilabel:`Font Size` field to set a default size.
+  Click the :icon:`fa-caret-right` (arrow) icon to expand the section and define custom sizes
+  (e.g., based on the heading level, button size, etc.).
+
+Additionally, each element-specific section offers extra styling options, such as
+:guilabel:`Line Height` and :guilabel:`Margins`, for further customization.
+
+Custom fonts
+------------
+
+In the :guilabel:`Paragraph` section, click on :guilabel:`Font Family`, then on
+:guilabel:`Add a Custom Font` at the bottom of the dropdown menu. In the pop-up window:
+
+- To add a Google font, click on :guilabel:`Select a Google Font` and click on a font that you like
+  from the list. Toggle off the :guilabel:`Serve font from Google servers` if your website is
+  operated from a location where regulations require compliance with laws such as, but not limited
+  to, the European Union's GDPR. This will ensure that the Google Font is stored on your website's
+  server instead of Google's.
+- To upload a custom font from your computer, click on :guilabel:`Choose File`.
+
+To complete the new font addition and make it available in the :guilabel:`Font family` menu, click
+on :guilabel:`Save and Reload`.
+
+Button style
+============
+
+To customize the style of your website's primary and secondary buttons, navigate to the
+:guilabel:`Button` section in the website editor and edit the relevant options:
+
+- Click the arrow next to the :guilabel:`Primary Style` or :guilabel:`Secondary Style` fields and
+  select one of the available styles for each type of button: :guilabel:`Fill`, :guilabel:`Outline`,
+  or :guilabel:`Flat`. When selecting :guilabel:`Outline`, the :guilabel:`Border Width` option
+  appears below, allowing you to adjust the width of the button's outline.
+- Modify the :ref:`fonts <website/themes/fonts>`
+- Adjust the :guilabel:`Padding` to change the size of the spacing (in pixels) around the buttons'
+  labels.
+- Customize the buttons' border radius using the :guilabel:`Round Corners` option.
+- Add an animation when a button is clicked in the :guilabel:`On Click Effect` dropdown menu.
+
+.. image:: themes/buttons.png
+      :alt: Primary and secondary buttons
+
+.. tip::
+   You can define custom :guilabel:`Small` and :guilabel:`Large` sizes for button's
+   :guilabel:`Padding`, :guilabel:`Font Size`, and :guilabel:`Round Corners` : click on the
+   :icon:`fa-caret-right` (arrow) icon and use the related fields.
+
+.. image:: themes/button-settings.png
+      :scale: 80%
+      :alt: Button padding, font size and round corners settings
+
+Link style
+==========
+
+In the :guilabel:`Link` section, click on :guilabel:`Link Style` to choose the appearance of links
+on your website. Select :guilabel:`No Underline`, :guilabel:`Underline On Hover`, or
+:guilabel:`Always Underline` in the dropdown menu.