Thème général¶
Odoo propose un éventail d”options de personnalisation de thème pour définir les couleurs et les polices du site Web, ainsi que l’apparence des paragraphes et titres, des boutons, des liens et des champs de saisie. Des paramètres avancés supplémentaires sont également disponibles.
Lors de la configuration d’un site Web pour la première fois, vous êtes invité à sélectionner un thème. Survolez les thèmes avec la souris pour voir un aperçu étendu de chacun d’entre eux. Cliquez sur un thème pour le sélectionner, ou cliquez sur le bouton Voir plus de thèmes pour afficher la liste complète des thèmes disponibles.
Note
Si vous quittez sans sélectionner de thème, le site Web est créé avec le thème par défaut.
Pour personnaliser le thème, ouvrez l’éditeur de site Web, accédez à l’onglet Thème et allez dans la section Site Web. Vous pouvez :
Cliquer sur Changer de thème pour ouvrir le sélecteur de thème. Survolez les thèmes avec la souris pour voir un aperçu étendu de chacun d’entre eux. Cliquez sur Utiliser ce thème pour l’appliquer au site Web.
Ajouter une langue pour le site Web.
Sélectionner la mise en page pour modifier l’affichage global et l’espacement des blocs de construction et des éléments du site Web sur les pages.
Personnaliser l”arrière-plan de la mise en page en :
Cliquer sur Sauvegarder pour appliquer les modifications au site Web.
Couleurs¶
L’éditeur de site web d’Odoo comprend deux types principaux de couleurs : les couleurs de thème et les couleurs de statut.
Couleurs du thème¶
Les couleurs de thème font référence à l’ensemble des couleurs affichées sur toutes les pages du site Web. Elles se composent de cinq couleurs : trois couleurs principales, utilisées principalement pour les boutons et les liens, et deux couleurs clair et foncé, utilisées principalement pour le texte et les titres.
Pour modifier les couleurs du site Web, accédez à la section Couleurs de l’onglet Thème. Ensuite :
Click the color you want to change, then select a predefined Solid color or click Custom to pick a specific color tone manually (or add its #HEX or RGBA code). Click (Reset) to remove the color selection.
Cliquez sur l’icône de la palette de peinture et choisissez une palette de couleurs. En conséquence, toutes les personnalisations de couleur sont réinitialisées.
Odoo crée automatiquement des préréglages de couleurs pour les couleurs ou la palette choisies. Ces combinaisons de couleurs prédéfinies sont appliquées à divers éléments du site Web pour créer une conception structurée et visuellement attrayante. Lors de la sélection d’une palette de couleurs, ses préréglages définissent la manière dont ces couleurs sont réparties sur différents éléments. Pour les modifier, cliquez sur Préréglages de couleurs, puis sélectionnez un préréglage pour ouvrir le menu déroulant de personnalisation. Chaque préréglage de couleurs contient des couleurs pour l”arrière-plan du bloc de construction, le texte, les titres, les liens, les boutons principaux et les boutons secondaires.
Astuce
Pour appliquer un préréglage de couleurs à un bloc de construction, sélectionnez le bloc de construction, allez dans l’onglet Style, cliquez sur le point de couleur situé à côté d”Arrière-plan et choisissez un thème.
Note
Modifier un préréglage de couleur met automatiquement à jour les couleurs du préréglage par défaut et des blocs de construction qui l’utilisent.
Couleurs de statut¶
Les couleurs d’état indiquent le statut de certaines actions (par ex., Succès, Avertissement, etc.). Elles sont utilisées dans les messages contextuels qui apparaissent pour fournir un retour aux utilisateurs et aux visiteurs du site web. Pour personnaliser les Couleurs d’état du site web, faites défiler jusqu’à la section Avancé et cliquez sur les points pour changer leur couleur.
Example
Les informations relatives à une action réussie sur le site web apparaissent en vert .
Polices¶
Odoo permet de personnaliser la famille de police et la taille de police des éléments du site web, y compris les paragraphes et titres, les boutons, et les champs de saisie.
Taille de police : Dans les sections Paragraphe, Titres, Bouton, et Champs de saisie, utiliser le champ Taille de police pour définir une taille par défaut. Cliquer sur l’icône (Afficher plus d’options) pour développer la section et définir des tailles personnalisées (par ex., selon le niveau de titre, la taille du bouton, etc.).
Famille de police : dans les sections Paragraphe, Titres et Bouton, sélectionnez une police dans le menu déroulant.
Note
Lorsque Polices système est sélectionné, Odoo utilise les polices natives déjà installées sur le système d’exploitation du visiteur. Par exemple, Android utilise Roboto comme police système par défaut.
Polices personnalisées¶
Pour ajouter une police personnalisée non disponible par défaut dans Odoo, cliquer sur le menu déroulant Famille de police et sélectionner Ajouter une police personnalisée en bas. Dans la fenêtre contextuelle Ajouter une police Google ou télécharger une police personnalisée :
Pour ajouter une police Google, ouvrir le menu déroulant Sélectionner une police Google et sélectionner la police souhaitée. Désactiver Servir la police depuis les serveurs Google si votre site web est exploité depuis un endroit où la réglementation exige le respect de lois telles que, sans s’y limiter, le RGPD de l’Union européenne. Cela garantira que la police Google est stockée sur le serveur du site web plutôt que sur les serveurs de Google.
Pour télécharger une Police personnalisée depuis votre ordinateur, cliquer sur Choisir un fichier.
Une fois terminé, cliquer sur Enregistrer et recharger.
Astuce
Un Aperçu de la police sélectionnée est affiché sur le côté droit de la fenêtre.
Styles¶
L’apparence des éléments du site web peut être personnalisée davantage. Par exemple, vous pouvez personnaliser les paragraphes et titres, les boutons, les liens, et les champs de saisie.
Paragraphes et titres¶
Les sections Paragraphe et Titres offrent des options de style supplémentaires pour ces éléments de texte. Vous pouvez :
Modifier les paramètres de police.
Ajuster la Hauteur de ligne pour définir l’espacement entre les lignes de texte.
Ajuster les Marges pour définir l’espacement autour des paragraphes et des titres.
Boutons¶
Pour personnaliser le style des boutons primaires et secondaires du site web, naviguer jusqu’à la section Bouton et modifier les options pertinentes :
Ouvrir le menu déroulant à côté des champs Style primaire ou Style secondaire pour changer le style de chaque type de bouton, tel que Remplir, Contour, ou Plat. Lors de la sélection de Contour, l’option Largeur de bordure apparaît en dessous, permettant d’ajuster la largeur du contour du bouton.
Modifier les paramètres de police.
Ajustez le Remplissage pour modifier l’espacement autour des labels des boutons.
Utilisez l’option Coins arrondis pour ajuster le rayon de bordure des boutons.
Ajouter une animation lors du clic sur un bouton dans le menu déroulant On Click Effect.
Astuce
Pour définir des tailles personnalisées Petit et Grand pour le Remplissage, la Taille de police et les Coins arrondis des boutons, cliquez sur l’icône (Basculer plus d’options), puis utilisez les champs associés.
Liens¶
Dans la section Lien, ouvrez le menu déroulant à côté de Style de lien pour choisir l’apparence des liens sur le site web. Vous pouvez choisir entre :
Pas de soulignement ;
Souligner au survol ; ou
Toujours souligner.
Champs de saisie¶
Pour personnaliser le style des champs de saisie du site web, accédez à la section Champs de saisie et modifiez les options pertinentes :
Ajustez le Remplissage pour modifier l’espacement autour des champs.
Modifier les paramètres de police.
Personnalisez la Largeur de bordure autour des champs.
Définissez un Rayon de bordure pour arrondir les coins des champs.
Choisissez une Couleur d’arrière-plan :ref:` <website/themes/colors>` pour remplir les champs.
Paramètres avancés¶
Des paramètres supplémentaires peuvent être configurés dans la section Avancé, tels que :doc:` <../structure/header_footer>`, l’utilisation de l”Injection de code pour la :ref:` <website/google_search_console/HTML-tag>`, et la configuration des :ref:` <website/themes/status-colors>` et des Gris.
Vous pouvez également configurer Google Maps pour afficher des cartes et activer les fonctionnalités de géolocalisation sur le site web, par exemple, sur la page Nous contacter et dans des extraits spécifiques. Pour configurer cette option :
Accédez à votre compte Google.
:ref:` <address_autocomplete/enable-api>` les API Maps Static, Maps JavaScript et Places.
Important
N’activez pas Places API (New), car elle n’est pas encore prise en charge par Odoo.
L’utilisation des API Google peut nécessiter un paiement à Google.
Créer une clé API et la copier.
Dans l’éditeur de site Web d’Odoo, aller dans l’onglet Thème, et dans la section Avancé, cliquer sur Clé personnalisée à côté de Google Map.
Coller la clé API générée dans le champ Clé API.
Cliquez sur Enregistrer.