Thème général¶
Odoo offre diverses options pour façonner le thème de votre site web, notamment ses couleurs, ses polices et sa mise en page.
Lors de la configuration initiale de votre site web, vous êtes invité à sélectionner un thème. Survolez les thèmes avec votre souris pour voir un aperçu étendu de chacun. Cliquez sur un thème pour le sélectionner.
Note
Si vous quittez sans sélectionner de thème, votre site web est créé avec le thème par défaut.
Vous pouvez changer de thème ultérieurement si nécessaire.
Dans le constructeur de site web, l’onglet Thème offre diverses options pour personnaliser le thème général de votre site web. Pour y accéder, cliquez sur Modifier et allez dans l’onglet Thème.
Une fois les modifications souhaitées effectuées, cliquez sur Enregistrer pour les confirmer et les appliquer à votre site web.
Thème¶
Dans la section Site Web, cliquez sur Changer de thème pour ouvrir le sélecteur de thème. Survolez les thèmes avec votre souris pour voir un aperçu étendu de chacun. Cliquez sur un thème pour l’appliquer à votre 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 désignent l’ensemble des couleurs affichées sur toutes les pages de votre site web. Elles se composent de cinq couleurs : trois couleurs principales et deux couleurs claires et foncées.
Pour modifier les couleurs de votre site web, allez dans la section Couleurs de l’éditeur de site web, puis :
Cliquez sur le point de couleur que vous souhaitez modifier, puis sélectionnez une couleur Unie ou cliquez sur Personnalisé pour choisir manuellement une teinte spécifique (ou ajouter son code #HEX ou RGBA).
Cliquez sur l’icône de palette de peinture et choisissez une palette de couleurs. Toutes les personnalisations de couleurs sont alors réinitialisées ; cliquez sur un point de couleur pour modifier une couleur spécifique.
Odoo crée automatiquement des Préréglages de couleurs pour votre palette choisie. Il s’agit de combinaisons de couleurs prédéfinies appliquées à différents éléments de votre site web pour fournir un design structuré et visuellement attrayant. Lorsque vous sélectionnez une palette de couleurs, ses préréglages définissent comment ces couleurs sont réparties entre les différents éléments d’un bloc de construction, tels que les boutons, les arrière-plans et le texte. Si vous souhaitez les modifier, cliquez sur Préréglages de couleurs et cliquez sur un préréglage pour le personnaliser davantage. Chaque préréglage de couleurs contient des couleurs pour l’arrière-plan de votre bloc de construction, le texte, les titres, les liens, les boutons principaux et les boutons secondaires.
Pour appliquer un préréglage de couleurs à un bloc de construction sur votre site, sélectionnez le bloc de construction, allez dans l’onglet Personnaliser, 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 couleurs met automatiquement à jour les couleurs du préréglage par défaut et des blocs de construction où le préréglage est utilisé.
Couleurs de statut¶
Les couleurs de statut servent à indiquer l’état de certaines actions (p. 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 de statut de votre site web, faites défiler jusqu’à la section Avancé et cliquez sur les points pour changer leur couleur.
Example
Mise en page¶
L’option Mise en page dans la section Site Web permet de modifier l’affichage global et l’espacement des blocs de construction et des éléments du site web sur les pages. Cliquez sur le menu déroulant et sélectionnez la mise en page souhaitée. Sous Mise en page, personnalisez votre Arrière-plan en choisissant une Image, en utilisant une image sélectionnée dans un Motif, ou en le laissant vide.
Polices¶
Odoo permet de personnaliser la famille et la taille de police pour des éléments spécifiques de votre site web, notamment les paragraphes, les titres, les boutons et les champs de saisie.
Famille de police : dans les sections Paragraphe, Titres et Bouton, sélectionnez une police dans le menu déroulant.
Taille de police : dans les sections Paragraphe, Titres, Bouton et Champs de saisie, utilisez le champ Taille de police pour définir une taille par défaut. Cliquez sur l’icône (flèche) pour développer la section et définir des tailles personnalisées (p. ex., en fonction du niveau de titre, de la taille du bouton, etc.).
De plus, chaque section spécifique à un élément offre des options de style supplémentaires, telles que Hauteur de ligne et Marges, pour une personnalisation plus poussée.
Polices personnalisées¶
Il est possible d’utiliser sur votre site web des polices qui ne sont pas proposées par défaut dans Odoo. Pour ajouter une police personnalisée, cliquez sur le menu déroulant lié au champ Famille de police et sélectionnez Ajouter une police personnalisée en bas du menu déroulant. Dans la fenêtre contextuelle :
Pour ajouter une police Google, cliquez sur Sélectionner une police Google et cliquez sur la police souhaitée dans la liste. Désactivez l’option 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 de votre site web plutôt que sur celui de Google.
Pour télécharger une police personnalisée depuis votre ordinateur, cliquez sur Choisir un fichier.
Une fois terminé, cliquez sur Enregistrer et recharger.
Styles de bouton¶
Pour personnaliser le style des boutons principaux et secondaires de votre site web, accédez à la section Bouton dans l’éditeur de site web et modifiez les options pertinentes :
Cliquez sur la flèche à côté des champs Style principal ou Style secondaire et sélectionnez l’un des styles disponibles pour chaque type de bouton : Remplissage, 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.
Ajuster le Padding pour modifier la taille de l’espacement (en pixels) autour des libellés des boutons.
Personnaliser le rayon de bordure des boutons à l’aide de l’option Round Corners.
Ajouter une animation lors du clic sur un bouton dans le menu déroulant On Click Effect.
Astuce
Vous pouvez définir des tailles personnalisées Small et Large pour le Padding, la Font Size et les Round Corners des boutons : cliquer sur l’icône (flèche) et utiliser les champs associés.
Style de lien¶
Dans la section Link, cliquer sur Link Style pour choisir l’apparence des liens sur votre site web. Sélectionner No Underline, Underline On Hover ou Always Underline dans le menu déroulant.