[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>
This commit is contained in:
parent
33cfa48bc7
commit
a9ba3516d6
@ -23,6 +23,7 @@ convert visitors into leads or revenues.
|
||||
.. toctree::
|
||||
:titlesonly:
|
||||
|
||||
website/web_design
|
||||
website/pages
|
||||
website/configuration
|
||||
website/reporting
|
||||
|
@ -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
|
||||
==================
|
||||
|
||||
|
10
content/applications/websites/website/web_design.rst
Normal file
10
content/applications/websites/website/web_design.rst
Normal file
@ -0,0 +1,10 @@
|
||||
:nosearch:
|
||||
|
||||
==========
|
||||
Web design
|
||||
==========
|
||||
|
||||
.. toctree::
|
||||
:titlesonly:
|
||||
|
||||
web_design/themes
|
81
content/applications/websites/website/web_design/themes.rst
Normal file
81
content/applications/websites/website/web_design/themes.rst
Normal file
@ -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
|
Binary file not shown.
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
After Width: | Height: | Size: 4.7 KiB |
Loading…
Reference in New Issue
Block a user