Aller au contenu principal

Comment personnaliser Regiondo Ticketshop ou Booking Widget avec "Custom CSS" ?

Kay Endörfer
  • Mise à jour

 

Remarque
Le widget Calendrier ne peut pas être personnalisé avec Regiondo CSS car il est chargé en tant que <div>.
Le fournisseur peut le personnaliser à l'intérieur de son code source personnel dans la balise <style>.
 

1. Personalisation via le Shop Editor

Regiondo Ticketshop ou Booking Widget est facilement personnalisable via le shop editor 

Vous pouvez aller un peu plus loin dans la personnalisation en changeant la couleur d'éléments spécifiques, en utilisant des polices différentes, en masquant des éléments ou en insérant des icônes. Ceci peut être atteint en utilisant le CSS personnalisé.

2. Personalisation via Custom CSS

 

Remarque
Des connaissances de base en CSS sont requises. Nous vous suggérons d'engager un expert si vous n'êtes pas à l'aise avec le guide suivant. Regiondo n'offre pas d'assistance technique pour la personnalisation CSS et ne peut garantir qu'un CSS personnalisé sera compatible avec toutes les améliorations futures des fonctionnalités et de l'apparence. Par conséquent, veillez à tester la compatibilité de votre CSS personnalisé avec les versions de Regiondo.


Nous pouvons, mais nous n'avons aucune obligation de supprimer le contenu que nous jugeons, à notre seule discrétion, illégal, offensant, menaçant, diffamatoire, obscène ou autrement répréhensible ou qui viole la propriété intellectuelle de l'une ou l'autre partie.
 
Rendez vous à Configurer votre boutique > Integrer votre Boutique > Code Css individuel
 
 
Sur cette page, vous pouvez voir :

choisir la langue - qui vous permet de sélectionner l'un de vos magasins, où les CSS personnalisés seront appliqués. La valeur par défaut "Global" signifie que le CSS sortira pour tous les magasins.

Code CSS - zone de texte, où vous pouvez fournir du code css pour écraser les règles regiondo css par défaut, écraser les paramètres css à partir de l'éditeur de boutique, ou pour apporter des modifications supplémentaires à des éléments spécifiques à l'intérieur de Regiondo iframe.
 
Remarque
Le champ Code CSS a un surligneur de syntaxe CSS intégré, ce qui peut être très utile pour identifier les problèmes ou erreurs possibles dans le code CSS. Les balises HTML ne sont pas autorisées, et seront supprimées avant la sortie à l'intérieur de Ticketshop/Widget. Si vous chargez des images ou du contenu supplémentaire, vous devez le faire via https://
 
Par exemple, si vous voulez remplacer la famille de polices primaires et ajuster la taille de police dans la billetterie et le widget globalement, sélectionnez "Global" dans la boîte de sélection, et incluez simplement votre police et spécifiez son nom de police comme indiqué ci-dessous :
 
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body,
button,
.product-shop,
.product-shop select {
    font-family:'Open Sans', Helvetica, Arial, sans-serif;
}
 
Resultat:
 
 
Ici, nous utilisons la police "Open Sans" de Google Font Directory (https://fonts.google.com/), où vous pouvez trouver celle qui convient le mieux à la conception de votre site Web. Ou vous pouvez utiliser @font-face pour spécifier votre propre police. La police elle-même peut être hébergée sur votre site en la téléchargeant sur votre espace web ou peut être hébergée n'importe où ailleurs. L'URL doit être correcte dans le chemin d'accès du fichier de la déclaration @font-face :


@font-face {
    font-family:'Custom Font';
    src:url(https://www.your-website.com/fonts/Custom-Font.otf);
    font-weight:400;
}
body,
button,
.product-shop,
.product-shop select {
    font-family:'Custom Font', Helvetica, Arial, sans-serif;
}
 
Ou si vous visez la performance de vitesse de chargement de site Web, vous pouvez utiliser seulement la pile de polices par défaut. Ajout d'Helvetica ici en premier dans cette pile pour que les périphériques iOS puissent l'utiliser sur la police Arial, comme suit :
 
body,
button,
.product-shop,
.product-shop select {
    font-family:"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
En sélectionnant Global ou en passant à l'un de vos magasins, vous pouvez facilement spécifier des polices différentes pour chaque magasin.
 

3. Comment localiser les CSS que vous voulez changer ?

Pour localiser le CSS que vous souhaitez modifier, vous pouvez utiliser l'élément "Inspect/Inspect Element". Si vous avez un navigateur webkit tel que Chrome, Firefox, Safari ou Opera, Inspect Element est disponible à partir du menu contextuel et affichera un panneau dans votre navigateur affichant le balisage à gauche et les styles à droite. Notez que cet outil n'est disponible dans Safari que si vous activez les outils de développement. Les utilisateurs d'IE doivent avoir la version 11 ou supérieure.


 
L'inspecteur vous aidera à identifier le sélecteur ou le style original contenant les propriétés que vous voulez changer. Une fois que vous avez identifié le CSS que vous voulez modifier, copiez-le dans la zone CSS personnalisée et ajustez-le comme vous le souhaitez.

Par exemple, nous voulons cacher un élément dans le Widget de réservation. Faites un clic droit sur un élément, sélectionnez "Inspecter", localisez-le dans le code HTML de la page, et cherchez les sélecteurs existants pour cet élément (ou nous pouvons en créer de nouveaux) :
 
 
Copiez le sélecteur ".booking-content.tab-info" dans la zone CSS personnalisée, et réglez sa propriété d'affichage sur none :
 
.booking-content .tab-info { display:none; }
 
Resultat:
Ceci masquera l'élément "tab-info" dans les onglets Ticket et Cadeau du widget. Si nous voulons le cacher uniquement pour l'onglet Ticket, alors nous devons écraser sa propriété d'affichage pour l'onglet Cadeau, car ils ont tous les deux le même nom de classe :
 
.booking-content .tab-info { display:none; }
.booking-content .gift-container .tab-info { display:block; }
 
Une fois les modifications sauvegardées, avec la propriété d'affichage définie sur "block" pour.gift-container.tab-info, elle sera cachée uniquement pour l'onglet Ticket, et affichée sur l'onglet Cadeaux. C'est un exemple simple de la façon dont un widget peut être personnalisé en écrasant ses règles CSS précédentes.
 

4. Tester les changements :

Vous pouvez simplement éditer et prévisualiser des styles spécifiques dans la barre latérale Brower Inspector en cliquant sur la valeur de la propriété, en cliquant ou en double-cliquant sur l'espace vide à la fin de la dernière propriété pour en ajouter une nouvelle. Ceci aide également à saisir le bon sélecteur de style.

Une fois que vous enregistrez les changements sur la page CSS personnalisée, ils prendront effet immédiatement et seront répercutés sur votre billetterie et votre widget de réservation. Soyez prudent en changeant les règles CSS pour les balises globales, et évitez de tels cas lorsque du texte en couleur blanche peut apparaître sur fond blanc.
 

5. Exemples avancés

Voici des exemples avancés de "CSS personnalisés" pour démontrer comment nous pouvons changer l'apparence de Ticketshop/Widget.
 

5.1 Comment changer les couleurs de fond et de bordure du Widget de réservation ?

Copiez et collez cet extrait de code css dans le champ Text-area du code CSS personnalisé.:
 
.product-shop { background:#ddeeff !important; border:2px solid #336699 !important; }
 
Remarque
Comme vous pouvez le voir, nous avons utilisé !règle css importante ici, pour écraser la déclaration assignée en ligne sur l'élément .product-shop. La règle !importante est utilisée pour remplacer la CSS précédemment assignée, ou les déclarations en ligne définies dans l'attribut de style des balises HTML.
 
Resultat
 
Ces changements affecteront à la fois le Widget de réservation et le Ticketshop. Si vous voulez déclarer des classes uniquement pour le widget ou uniquement pour le Ticketshop, vous pouvez les séparer par éléments parent uniques, qui sont présents dans le Widget mais pas dans le code Ticketshop. Par exemple :
 
<!-- CSS Rules only for Booking Widget: -->
#widget-wrapper .product-shop { background:#ddeeff !important; border:2px solid #336699 !important; }

<!-- CSS Rules only for Ticket Shop: -->
#page-wrapper .product-shop { background:#ddeeff !important; border:2px solid #336699 !important; }

 

5.2 Comment changer les couleurs des onglets du Widget de réservation ?

 

.tabs .tab { background:#336699; }
.tabs .tab h2 { color:#fff; }
.tabs .tab.active { background:transparent; }
.tabs .tab.active h2 { color:#336699; }
 
Resultat:

 

5.3 Comment modifier les styles de boutons Ajouter au panier ?

.product-shop .add-to-cart .button {
    background:none; border:2px solid #336699; color:#336699;
}
.product-shop .add-to-cart .button:hover {
    background:#336699; color:#fff;
}
Si vous ajoutez du style à des éléments tels que des liens ou des boutons, n'oubliez pas d'ajouter des règles pour l'état :survol, lorsque l'utilisateur passe la souris sur les liens ou les boutons.

Resultat:

5.4 Comment ajouter une image de fond ?

 

#shell,
.whitelabel > body,
.wl-background-main,
.wl-background-around { background:none; }

html.whitelabel { background:#fff url(images/bg.jpg) no-repeat center top fixed; background-size:cover; }
 
Tout d'abord ici, nous effaçons tous les arrière-plans pour ne définir qu'un seul arrière-plan à la balise html. Après cela, nous ajoutons une règle où nous mettons l'url de l'image et la réglons pour qu'elle couvre toute la page centrée, alignée en haut et corrigée.

Pour augmenter la vitesse de chargement des pages, vous pouvez utiliser différentes images pour différentes résolutions, comme suit :
 
@media screen and (max-width:1024px) {
    html.whitelabel { background-image:url(images/bg-1024.jpg); }
}
@media screen and (max-width:640px) {
    html.whitelabel { background-image:url(images/bg-640.jpg); }
}

 

5.5 Comment changer les titres des étapes du Widget de réservation ?

.a-title-option:after { content:'Select an Option:'; }
.a-title-date:after { content:'Select a Date:'; }
.a-title-time:after { content:'Select a Time:'; }

.a-label.a-title-option:after { content:'Selected Option:'; }
.a-label.a-title-date:after { content:'Selected Date:'; }
.a-label.a-title-time:after { content:'Selected Time:'; }
Vous pouvez spécifier un texte différent pour le titre de l'étape qui n'est pas encore en cours, et pour le titre de l'étape après que l'utilisateur sélectionne les valeurs, comme indiqué ci-dessus.

 

5.6 Comment modifier les étapes du Widget de réservation "éditer" icône ?

.booking-content .a-edit:before { background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyUlEQVQ4T6XTMU5CQRCA4Y/GhsOgiRUJBbHWRhoOYUc4AS0NBafQitpY2csxOAA9meRNsjzh7UOn2c1m/39nsjMD/4xBT36ILd6xK5k+goADmjbgA35SUhMkPMIzVoj9U0q6BCWcQJ49YoL9NcElOLMe4xtrLC4JuuB7fMbLTUnHtuAmOFIqBTfDpeBPcCnY4A1nf4xfNbcbL0uIDrvDS3GhCpcZhCBi1qy94LbgFR9NJtF1X/lVXfOSJcwRgowDljjWhq02CzXeCYkkNxFv6LDiAAAAAElFTkSuQmCC) no-repeat 50% 50%; }
Ici, nous avons utilisé base64 pour l'image pour la charger en ligne. Ceci peut aider à réduire les requêtes http supplémentaires par page, mais il n'est pas recommandé de l'utiliser avec des images plus grandes, car les images de base64 ne sont pas mises en cache par le navigateur.

Resultat:
 

 

5.7 Comment changer les styles des dropdowns sélectionnés ?

select { padding:2px; color:#336699; background:#fff; border:1px solid #336699; }
Resultat:
 
 
Ceci sera appliqué globalement à tous les champs sélectionnés, y compris les champs d'extraction. Si vous voulez spécifier un tel style uniquement pour la réservation de widget, ou seulement pour les sections de caisse, vous pouvez utiliser des sélecteurs parents tels que ".product-shop select ", ".sc-content select ", etc.
 

5.8 Quel est le code pour modifier la phrase dans le widget de réservation qui demande au client de choisir une date et une activité?

 

.tab-info {
 visibility: hidden;
}

.tab-info:after {
Content: 'Enter text here';
visibility: visible;
display: block;
position: absolute;
top: 45px;
}

 

5.9 Comment changer la couleur de fond du message de notation/rating ou d’avis/commentaire?

Vous ne pouvez pas changer la couleur de fond du message de notation/avis dans le shop editor. Cependant, vous pouvez la changer dans le CSS personnalisé à l’aide un simple code. 


.form-box { 
            background-color: #002f53 !important; 
}
Vous pouvez copier le code et le coller dans le CSS personnalisé. Changez le code de couleur de fond. Vous devez enregistrer votre nouveau paramètre. 

 

6. Lectures recommandées ( en anglais )

Consultez les ressources suivantes pour obtenir de l'aide supplémentaire :

Articles associés