[ADD] Website: website themes page creation

taskid-3685215

closes odoo/documentation#7791

X-original-commit: af5ac872e7
Signed-off-by: Audrey Vandromme (auva) <auva@odoo.com>
Signed-off-by: Donatienne Pirlot (dopi) <dopi@odoo.com>

content/applications/websites/website.rst

@@ -23,6 +23,7 @@ convert visitors into leads or revenues.
 .. toctree::
    :titlesonly:
 
+   website/web_design
    website/pages
    website/configuration
    website/reporting

content/applications/websites/website/reporting/analytics.rst

@@ -127,6 +127,8 @@ To follow your Odoo website's traffic with Google Analytics:
 .. seealso::
    `Google documentation on setting up Analytics for a website <https://support.google.com/analytics/answer/1008015?hl=en/>`_
 
+.. _website/analytics/gtm:
+
 Google Tag Manager
 ==================
 

content/applications/websites/website/web_design.rst

@@ -0,0 +1,10 @@
+:nosearch:
+
+==========
+Web design
+==========
+
+.. toctree::
+   :titlesonly:
+
+   web_design/themes

content/applications/websites/website/web_design/themes.rst

@@ -0,0 +1,81 @@
+==============
+Website themes
+==============
+
+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:
+
+- :guilabel:`Colors`: The website builder relies on palettes composed of five colors: two
+  :guilabel:`Main` colors and three :guilabel:`Light & Dark` colors.
+
+  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`.
+
+  .. image:: themes/colors.png
+     :alt: select the colors of your website
+     :scale: 75%
+
+  **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.
+
+  .. note::
+     Changing a color preset automatically updates the colors of both the default preset and the
+     building blocks where the preset is used.
+
+- :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.
+
+- :guilabel:`Paragraph`: Customize the formatting of your website's paragraph `<p>` elements.
+
+  .. 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`.
+
+     .. image:: themes/add-a-font.png
+        :alt: Select the font you like
+        :scale: 75%
+
+     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:`Headings`: Customize the formatting of your headings.
+
+- :guilabel:`Button`: Customize the :guilabel:`Primary Style` and :guilabel:`Secondary Style`
+  buttons.
+
+  .. image:: themes/buttons.png
+     :alt: Two types of buttons in Odoo
+
+- :guilabel:`Link`: To edit the style of the hyperlinks available on your website.
+
+- :guilabel:`Input Fields`: Customize fields where you can enter data, e.g., a search bar or a form.
+
+- :guilabel:`Advanced`: You can hide the header bar of your website using the
+  :guilabel:`Show Header` button, inject :ref:`head and body code <website/analytics/gtm>`, 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.
+
+  .. example::
+     - The :guilabel:`Status Color` of the :guilabel:`Success` messages is set to green.
+
+       .. image:: themes/advanced.png
+          :alt: Status colors success message set to green.
+
+       .. image:: themes/success.png
+          :alt: Success message is green
+
+     - Customizing the gray elements of your site.
+
+       .. image:: themes/grays.png
+          :alt: Customize the grays elements of your site