À l'aide de l'éditeur de widgets, vous pouvez facilement définir et modifier la couleur du bouton, la police et le contenu visible. Mais pour pouvoir utiliser pleinement toutes les options de personnalisation, vous devez vous familiariser avec les CSS.
Note
Il existe de nombreux sites Web permettant de tester votre code CSS. L'un d'entre eux : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
1. Comment travailler avec les CSS
Chaque code CSS doit commencer par le terme <template id="product-catalog-widget-styles"> afin de savoir qu'il s'agit du widget Produit et Catalogue. De plus, ce terme est responsable de la connexion entre le code CSS et le code HTML.
<template id="product-catalog-widget-styles">
<style>
</style>
</template>Ensuite, en fonction de ce que l'on veut éditer exactement, il faut insérer un terme sous le premier <style>. Il est important qu'un point . soit placé devant et qu'une parenthèse courbe { derrière. À la ligne suivante, vous pouvez déterminer si, par exemple, la couleur doit être modifiée. En conséquence, le mot couleur est inséré et un deux points : derrière lui. Ensuite, on peut définir un code couleur hexadécimal ou la couleur en tant que mot (comme vert). Il est vraiment important d'ajouter un point-virgule ; après la couleur. Pour compléter cela, une parenthèse courbe } est à nouveau utilisée. Vous pouvez ensuite insérer d'autres codes CSS, sinon cela se termine par </style> et le code HTML existant de l'éditeur de widgets Regiondo. Le terme </template> est utilisé pour fermer la commande. C'est tout !
Important
<template id="product-catalog-widget-styles">
<style>
.regiondo-booking-header {
color: #008000;
}
</style>
Le premier terme signifie que vous travaillez avec le Widget Produit et Catalogue. Tout ce qui est en gras doit être saisi pour que le code fonctionne. Et tout ce qui est en italique signifie qu'il peut être modifié.
Note
Comment faire des supports courbes ? Essayez...
- Alt Gr et 7 pour {
- Alt Gr et 0 pour }
2. Exemple typique d'un ajustement CSS
Dans le code CSS ci-dessous, vous trouverez des options de personnalisation fréquemment demandées. Vous pouvez voir les effets du code sur les Widgets dans l'image ci-dessus. Une distinction est faite entre la vue catalogue et la vue produit. Afin de vous expliquer chaque option de personnalisation, nous allons parcourir le code CSS étape par étape ci-dessous.
<template id="product-catalog-widget-styles">
<style>
.regiondo-booking-header {
color: #0275A4;
}
.regiondo-product-header {
color: #0275A4;
}
.regiondo-catalog, .Re-c-MuiOutlinedInput-marginDense, .regiondo-list-product, .regiondo-product-details {
background-color: transparent;
}
.Re-c-MuiButton-label svg {
display: none;
}
.regiondo-widget{background-color: transparent;}
.regiondo-collapsible-header{
color: #0275A4;
}
.regiondo-list-product-header{
color: #0275A4;
}
</style>
</template>
<product-catalog-widget styles-template-id="product-catalog-widget-styles" customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>2.1 En-tête du produit "Réservation"
Ce code CSS modifie l'intitulé "Réservation" dans la vue Produit. Il modifie également la couleur de l'information sur les prix. Dans le code actuel, la couleur #0275A4 (bleu) a été utilisée. Elle peut être remplacée par n'importe quel code de couleur hexadécimal.
.regiondo-booking-header {
color: #0275A4;
}
2.2 En-tête dans le produit "Titre de l'offre"
Le terme regiondo-product-header dans le code CSS désigne l'en-tête au-dessus de l'image de l'offre dans la vue Produit. En échangeant le code couleur hexadécimal, la couleur peut être modifiée à volonté.
.regiondo-product-header {
color: #0275A4;
}
2.3 Contexte général du widget
En théorie, la couleur de l'arrière-plan peut également être modifiée, mais il doit toujours rester transparent. Pourquoi ? Les widgets s'adapteront de manière optimale au site Web si l'arrière-plan est transparent.
.regiondo-catalog, .Re-c-MuiOutlinedInput-marginDense, .regiondo-list-product, .regiondo-product-details {
background-color: transparent;
}2.4 Cacher le logo Regiondo dans la vue du catalogue
Ce code CSS vous permet de masquer le logo Regiondo dans la vue du catalogue.
.Re-c-MuiButton-label svg {
display:none ;
}
2.5 En-tête du produit "Description", "Plus d'informations", "Lieu"
Ce code CSS permet de modifier l'affichage du produit du widget. D'une part, vous pouvez ajuster la couleur d'arrière-plan du widget de réservation, mais il doit rester transparent dans le meilleur des cas. D'autre part, vous pouvez personnaliser la couleur de la police du contenu visible. Dans ce cas, ce serait : Description, Plus d'informations et Lieu.
Dans le code CSS suivant, vous pouvez changer la couleur avec n'importe quel code de couleur hexadécimal.
Exemple
Le code couleur hexadécimal #0275A4 (bleu) a été changé en #008000 (vert).
.regiondo-widget{background-color: transparent;}
.regiondo-collapsible-header{
color: #0275A4;
}
2.6 En-tête " Titre de l'offre "
Les en-têtes des offres dans la vue Catalogue peuvent également être personnalisés en termes de couleur. Il suffit de remplacer le code couleur hexagonal existant par la couleur souhaitée.
.regiondo-list-product-header{
color: #0275A4;
}Exemple
Le code couleur hexadécimal #0275A4 (bleu) a été changé en #008000 (vert).
2.7 Code HTML à partir de l'éditeur de widgets
Voici le code que vous pouvez obtenir dans votre éditeur de widgets.
</style>
</template>
<product-catalog-widget styles-template-id="product-catalog-widget-styles" customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>
Pour que la personnalisation CSS fonctionne, un extrait doit encore être inséré dans le code HTML à partir de l'éditeur de widgets.
La partie styles-template-id= "product-catalog-widget-styles" doit être ajoutée après la création du code HTML dans l'éditeur de widgets.
Exemple de code HTML à partir de l'éditeur de widgets :
<product-catalog-widget customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>
Ajouter un extrait après le <product-catalog-widget
Résultat :
<product-catalog-widgetstyles-template-id="product-catalog-widget-styles"customer-code="EN93" locale="en_US" category-filter="26909" disable-features="category-filter"></product-catalog-widget><script type="text/javascript" src="https://widgets.regiondo.net/catalog/v1/catalog-widget.min.js"></script>
3. Autres ajustements CSS possibles
3.1 Effet de couleur au survol des boutons dans l'affichage du catalogue
Si vous ajoutez ce code CSS, vous serez en mesure d'ajuster la couleur de l'effet de survol du bouton dans la vue du catalogue. Dans ce cas, la couleur de l'effet de survol est le vert, mais vous pouvez également décider de la couleur d'arrière-plan du bouton. Dans cet exemple, la couleur de fond est le bleu. Jetez un coup d'œil au GIF pour voir le résultat.
Note
Qu'est-ce qu'un effet de survol ? Il est également appelé effet de survol et apparaît lorsque l'utilisateur déplace la souris sur un élément, par exemple un bouton.
.regiondo-list-product-button:hover {
background-color: green;
color: blue
}
3.2 Offrir une image avec des coins arrondis
Si vous ajoutez ce code CSS, vous pourrez modifier les coins de l'image de l'offre. Ouvrir un simulateur HTMLajoutez le code ci-dessous et insérez le nombre que vous voulez. Les changements sont alors visibles dans le simulateur et vous savez exactement quel pourcentage vous convient.
.regiondo-list-product-image {
border-radius: 35% 35% 35% 35% / 35% 35% 35% 35%};
3.3 Remplacement des points forts par des images
Les simples points clés sont ennuyeux ! Remplacez les points clés mis en évidence dans la description du produit par votre logo et profitez au maximum des options de personnalisation. Il suffit de remplacer le lien rouge dans le code CSS ci-dessous par le lien qui mène à votre logo. Voilà, c'est fait !
.regiondo-product-highlights > li::before {
content: "";
position: absolute;
background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGJuXVE0Qvz70hWMErEJRjw_u_Jo6zunyhnXcD64cTwSQ6IblBY-bcD43P5MDVNIsYjlY&usqp=CAU") center no-repeat;
background-size: contain;
width: 25px;
height: 25px;
margin-left: -35px;
margin-top: -5px;
}