Pour changer le fond d'écran du menu principal d'Odoo, la méthode la plus simple est d'utiliser Studio. Cependant, si vous avez une licence Standard, il n'est pas vraiment justifié de passer à une licence Personnalisée juste pour cette modification.
Heureusement, il existe une solution, bien que technique, qui permet d'effectuer ce changement tout en conservant la licence Standard, de la même manière que pour modifier la favicon dans le backend d'Odoo.
Pour cela, vous aurez besoin de trois éléments, dont deux à préparer sur votre ordinateur :
- Une image pour le fond d'écran.
- Un fichier CSS à ajuster.
- Modifier une vue dans Odoo.
L'image de fond d'écran
Veuillez sélectionner une image pour votre fond d'écran Odoo. En général, il s'agit du logo de votre entreprise, mais vous pouvez également choisir une autre image.
Il n'y a pas de restrictions strictes concernant le choix de l'image, mais il est conseillé d'avoir une largeur minimale de 600px pour garantir un affichage optimal.
Pour accéder à l'image via une URL, il est nécessaire qu'elle soit en ligne.
Il y a deux options : soit l'image est déjà hébergée sur votre site, soit elle se trouve sur votre ordinateur et devra être téléchargée sur Odoo.
L'image est déjà sur le site
Rendez-vous sur votre site, faites un clic droit sur l'image et choisissez "Copier le lien de l'image".
Il vous suffit de coller votre URL à l'étape suivante dans le fichier CSS.
L'image est sur votre ordinateur
Il existe encore deux options : si vous avez le module Site Web installé sur votre instance Odoo, vous pouvez créer ou modifier une page, y insérer cette image et suivre la procédure mentionnée ci-dessus "L'image est déjà sur le site".
Sinon, une autre solution consiste à utiliser les "Pièces jointes" d'Odoo pour générer une URL pour votre image. Voici les étapes à suivre pour y parvenir :
1. Passer en mode développeur
À partir de l'écran d'accueil :
- Allez dans l'application Paramètres
- Descendez tout en bas
- Cliquez sur Activer le mode développeur
- Revenez au menu principal
2. Ajouter une Pièce Jointe
Depuis le menu principal :
- Tapez "pièce jointe" sur votre clavier (une fois la première lettre saisie, une barre de recherche s'affichera, poursuivez votre saisie)
- Cliquez sur l'option "Paramètres / Technique / Structure de la base de données / Pièces jointes"
- Une liste de pièces jointes se présente. Je vous suggère de ne pas tenter de les altérer ou de les supprimer.
- Cliquez sur le bouton Nouveau.
- Ensuite, cliquez sur le bouton Charger votre fichier.
- Sélectionnez votre image de fond d'écran.
- Une fois le fichier sélectionné, le nom de celui-ci doit se mettre dans le nom de la pièce jointe.
- Veillez à cocher la case Est un document public, un peu plus bas.
- Cliquez sur l'icône de sauvegarde :
- Après la sauvegarde, assurez-vous de relever le numéro qui apparaît dans votre barre d'URL :
C'est l'identifiant unique de votre image dans Odoo. Dans notre exemple c'est donc 2386.
3. Constituer l'URL de l'image
Pour trouver l'URL de votre image, il faut utiliser les informations suivantes:
- [BASE_URL] : Votre url de base par exemple https://www.lcsx.tech
- [IMG_ID] : L'identifiant unique de votre image que vous avez relevé à l'étape précédente (par exemple 2386).
- [IMG_NOM] : Le nom de votre image, dans notre exemple : fonds ecran ODOO CGP.jpg
Puis vous venez remplacer dans l'url suivante afin d'obtenir votre URL finale :
[BASE_URL]/web/content/[IMG_ID]/[IMG_NOM]
Soit pour mon exemple, nous obtenons :
https://www.lcsx.tech/web/content/2386/fonds ecran ODOO CGP.jpg
Le fichier CSS à ajuster
Cliquez sur cette icône pour télécharger le fichier CSS : .
Puis ouvrer avec votre éditeur préféré ou le Bloc-notes.
.o_web_client.o_home_menu_background
{
background-color: #FFFFFF;
background-image: url("https://www.lcsx.tech/web/content/6883/logo.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
.o_caption, .o_menu_systray i, .oe_topbar_name {
color:white;
text-shadow: #0e647b 0px 0 4px;
}
}
Plusieurs choses:
- Remplacer l'url (https://www.lcsx.tech/web/content/6883/logo.png) par celle que vous avez copier ou fabriqué lors de l'étape précédente.
- Réglage de l'image, en théorie les réglages par défaut devraient être bon. Cependant vous pouvez améliorer le rendu si nécéssaire:
- background-position
- center : image centrée au milieu de l'écran
- top : image en haut
- bottom : image en bas
- left : image à gauche
- right image à droite
- Vous pouvez aussi composer par exemple bottom left placera l'image en bas à gauche.
- Selon si votre fond d'écran est clair ou foncé, modifiez les lignes 12 et 13 :
- Clair :
- color:black;
- text-shadow: #EEEEEE 0px 0 4px;
- Foncé :
- color:white;
- text-shadow: #555555 0px 0 4px;
- Vous pouvez aussi faire en sorte que la couleur d'arrière plan correspondent celle du fond d'écran en modifiant :
background-color: #FFFFFF;
Il vous faudra bien entendu la valeur hexadécimale de la couleur de votre arrière plan.
Après avoir complété le fichier CSS, il est important de l'ajouter aux pièces jointes également :
1. Passer en mode développeur
À partir de l'écran d'accueil :
- Allez dans l'application Paramètres
- Descendez tout en bas
- Cliquez sur Activer le mode développeur
- Revenez au menu principal
2. Ajouter une Pièce Jointe
Depuis le menu principal :
- Tapez "pièce jointe" sur votre clavier (une fois la première lettre saisie, une barre de recherche s'affichera, poursuivez votre saisie)
- Cliquez sur l'option "Paramètres / Technique / Structure de la base de données / Pièces jointes"
- Une liste de pièces jointes se présente. Je vous suggère de ne pas tenter de les altérer ou de les supprimer.
- Cliquez sur le bouton Nouveau.
- Ensuite, cliquez sur le bouton Charger votre fichier.
- Sélectionnez votre fichier CSS.
- Une fois le fichier sélectionné, le nom de celui-ci doit se mettre dans le nom de la pièce jointe.
- Veillez à cocher la case Est un document public, un peu plus bas.
- Cliquez sur l'icône de sauvegarde :
- Après la sauvegarde, assurez-vous de relever le numéro qui apparaît dans votre barre d'URL :
C'est l'identifiant unique de votre image dans Odoo. Dans notre exemple c'est donc 2319.
3. Constituer l'URL du fichier CSS
Pour trouver l'URL de votre fichier CSS, il faut utiliser les informations suivantes:
- [BASE_URL] : Votre url de base par exemple https://www.lcsx.tech
- [IMG_ID] : L'identifiant unique de votre image que vous avez relevé à l'étape précédente (par exemple 2319).
- [CSS_NOM] : Le nom de votre fichier CSS, dans notre exemple : custom-bg.css
Puis vous venez remplacer dans l'url suivante afin d'obtenir votre URL finale :
[BASE_URL]/web/content/[IMG_ID]/[IMG_NOM]
Soit pour mon exemple, nous obtenons :
https://www.lcsx.tech/web/content/2319/custom-bg.css
Modifier la vue Web Layout dans Odoo
Maintenant que notre image et le fichier CSS personnalisé sont prêts, il est temps de dire à Odoo d'utiliser ce fichier CSS pour substituer l'arrière-plan par défaut par le vôtre.
Pour cela, depuis le menu principal :
- Tapez "interface utilisateur" sur votre clavier (une fois la première lettre saisie, une barre de recherche s'affichera, poursuivez votre saisie)
- Cliquez sur l'option "Paramètres / Technique / Interface utilisateur / Vues"
- La liste de l'ensemble des vues d'Odoo s'affiche ici. Je vous suggère de ne pas tenter de les altérer ou de les supprimer.
- Dans la barre de recherche tapez : web layout
- Puis cliquer sur la vue Web Layout pour entrer dedans.
- Une fois dans la vue Web Layout, cliquez sur l'onglet Vues héritées.
- Cliquez sur Ajouter une ligne.
- Remplissez les champs suivants:
- Nom : Web Layout - Custom du fond d'écran
- Dans l'onglet Architecture, saisissez le code suivant en modifier l'URL du fichier CSS par celui que vous avez fabriqué plus haut:
<xpath expr="//head" position="inside">
<!-- Customisation du menu principal -->
<link type="text/css" rel="stylesheet" href="/web/content/2319/custom-bg.css"/>
</xpath>
Remplacez
/web/content/2319/custom-bg.css
par l'URL de votre fichier CSS.
- Enregistrez la vue.
- Revenez au menu principal
- Rafraichissez votre page pour voir les modifications.
