Configurations

Ajouter et utiliser des fontes - v14

Il est possible dans Odoo v14 de télécharger et d'utiliser d'autres polices de caractères (fontes) que celles présentes nativement dans l'outil.

En effet, pour cela, il faut

1.png

2.pngCapture d’écran du 2022-11-29 11-56-37.png

 

3.png

Dans l'url, vous pouvez voir l'identifiant de la font qui vient d'être créée. Il est très important de pouvoir s'en rappeler pour l'utiliser par la suite (en effet, c'est comme ça qu'elle sera nommée).
Dans l'exemple ci-dessous, l'ID = 1027Capture d’écran du 2022-11-29 11-56-37.png

Vous pouvez créer ainsi vos différentes fonts.

Pour les utiliser :

5.png

6.png

Exemple :

@font-face {
    font-family: "Albula Pro";
    //font-weight: bold;
    src: url(/web/content/1057);
}
body {
    font-family: "Albula Pro";
}

 

Le numéro 1057 est l'id de la pièce jointe dans odoo ("ir.attachment").

 

 

 

 

Personnaliser le look&feel du site web (couleurs, menu, ...)

En version 16, Odoo Community propose de nombreuses options de personnalisations (couleurs, fonte, taille de police), comme illustré ci-dessous (panel de droite).

Voir un exemple concret de customization ici 

image-1693314648929.png

Pour aller plus loin, l’application d’une feuille de style CSS est également possible (et pérenne en cas de mise à jour du site web en version 16).

Attention, il faut choisir "SCCS" et non pas "HTML" : tout changement fait au code HTML disparaitra à la prochaine mise à jour du code (effectué minimum une fois par mois chez Coop IT Easy).image-1693314683734.png

Customization du site web : un exemple

Odoo permet de créer un site web et un e-commerce avec de grandes possibilités de customizations. 

Voici un premier aperçu webshop, dans lequel on a mis beaucoup de fonctionalité de filtre et de tri. Notamment

image.png

Cela donne une interface très chargée. On va essayer de créer une interface plus minimaliste, en se basant sur le modèle suivant :

image.png

Pour modifier les fonctionalités de présentation du webshop (filtres, preview, etc), il faut cliquer sur Edit, puis sur Customize dans la barre latérale.

image.pngimage.png

Dans cette barre latérale nous avons plusieurs configurations :

image.png

Layout : Grille d'icône vs liste. Ici on va choisir la grille d'icône pour mettre en valeur les images

Size : on affiche 3 produits par ligne plutôt que 4, ici aussi pour mettre en valeur les images. On peut aussi définir la taille des images (Images size), et le Style de la grille. 

On n'affiche pas les descriptions des produits dans la vue grille (Prod. Desc.)

On n'affiche pas non plus de filtre par catégorie (Categories), ni par attributs (Attributes) pour épurer l'interface. 

Enfin, on peut choisir l'ordre de tri par défaut entre "Featured", par ordre alphabétique , par ordre d'arrivé ou par prix. 

 

Note : l'ordre "Featured correspond" à l'ordre des produits dans la vue liste 

image.png

 

 

On obtient alors une interface plus épurée, qui laisse la place aux images des produits. 

image.png

On va changer aussi les couleurs pour privilégier des couleurs neutres. On selectionne une palette en nuance de gris, que l'on modifie pour pas que la bannière du haut soit trop foncée.

Il y a de grandes possibilité de customizations du thème.

 

En plus des couleurs, on peut aussi customiser les fonts (taille et police), le padding, la taille des bordures, l'affichage des bouttons...

image.png

Et si on ajoute une bannière pour acceuillir les visiteurs, on obtient cette interface :

image.png

Voici un exemple de fiche produit. On peut y ajouter des descriptions, en format texte et même en format html (avec mise en page, images, etc.)

image.png

Voici ensuite le flux d'achat

image.png

image.png

image.png

image.png

Voici un exemple d'un webshop bien fait sur Odoo : https://www.coucoushop.be/shop