Personnalisation de votre widget

Eversports Manager vous offre la possibilité de personnaliser l'affichage de votre widget. Pour le personnaliser davantage, vous pouvez utiliser des codes CSS. Le CSS est un langage informatique utilisé pour personnaliser le style et le format des éléments d'un site web.

Pour plus d'informations, vous pouvez regarder ce webinaire (pdf de la présentation ici):

Où puis-je personnaliser mon widget?

Vous pouvez personnaliser l'affichage de votre widget dans le menu Paramètres > Widget > Choisir design.

• Vous pouvez modifier les couleurs de la police et des boutons.

• Si vous souhaitez modifier les couleurs de vos activités dans le planning, vous pouvez le faire dans Activités > Groupes d'activités.

• Vous pouvez saisir ici des codes CSS pour améliorer le style de votre widget.

Exemples de codes CSS

Ci-dessous, vous trouverez des exemples de codes à copier/coller dans votre Manager.

IMPORTANT:

• Lorsque vous verrez un # suivi de 6 chiffres et lettres, cela correspond à un code couleur. Vous pourrez donc modifier le # pour mettre le code couleur que vous souhaitez.

• Il doit toujours avoir deux "curly brackets" dans le code: { }

• Si vous copier/coller beaucoup de codes CSS, vous risquez d'être perdu quand vous voudrez faire des modifications. Pour cela, vous pouvez ajouter une "note" avant le code, encadrée de: /* note */ (nous en avons déjà ajouté pour les codes ci-dessous).

Exemple:

/*couleur titre widget*/

#widget h1 {color: #000000;}

Pour trouver le code couleur, vous pouvez utiliser le champ ci-dessus avec les couleurs (que vous retrouvez dans le Manager (Paramètres > onglet Widget) :

Pour vous aider à trouver des couleurs selon des mots, vous pouvez aller sur le site Picular.

Les exemples ci-dessous sont divisés en 2 parties:

1) ACTIVITES

2) PRODUITS (onglet Prix)

• Modifier la couleur de fond de la page:

• Modifier la couleur de police des titres et des boutons de menu:

• Modifier la police des titres et du planning:

/* police titres et planning */
.widget-font-arial {font-family: insérer la police ici;}

• Modifier la couleur du titre du widget:

/* couleur titre du widget */
#widget h1 {color: #000000;}

Modifier la couleur du texte sur le planning :

/* couleur texte planning */
.class-calendar-block .calendar li {list-style: none; color: #000000;}

• Modifier la couleur des jours du planning, lorsque la souris passe sur un cours:

/* couleur jours planning */
.class-calendar-block .calendar__day:hover .calendar__day-header {color:#000000;}

• Modifier la couleur du titre des cours:

/* couleur titre cours */
.h2, h2 {color: #d6aeb1}

• Modifier la couleur du titre des stages / ateliers / retraites / évènements etc.

/* couleur titre stages */
#widget #multi-session-list-container h3 {color: #d6aeb1}

• Modifier la couleur des descriptions des cours:

/* couleur description cours */
.class-calendar-block .session-popup__description {color: #d6aeb1;}

• Supprimer toute la bar de menu:

/* supprimer bar de menu */
#widget .navbar-nav li a {
    padding: 10px;
    display: none;}

• Supprimer un onglet de menu en haut

Prix:

/* supprimer onglet Prix */
a#header-link-shop {display:none;}

Atelier:

/* supprimer onglet Atelier */
a#header-link-workshop {display:none;}

Cartes cadeaux:

/* supprimer onglet Cartes cadeaux */
a#header-link-voucher {display:none;}

Cours:

/* supprimer onglet Cours */
a#header-link-class {display:none;}

Stage:

/* supprimer onglet Stage */
a#header-link-course {display:none;}

Entraînement:

/* supprimer onglet Entraînement */
a#header-link-training {display:none;}

Evènement:

/* supprimer onglet Evènement */
a#header-link-event {display:none;}

Retraite:

/* supprimer onglet Retraite */
a#header-link-retreat {display:none;}

Formation:

/* supprimer onglet Formation */
a#header-link-education {display:none;}

Camp:

/* supprimer onglet Formation */
a#header-link-camp {display:none;}

• Supprimer tout l'en-tête:

/* supprimer tout l'en tête */
body#widget.default-background.widget-font-arial div#wrapper header#header div.container div.row {display:none;}

• Supprimer les filtres:

/* supprimer filtres */
div.btn-group.bootstrap-select.form-control.inline-input.show-tick {display: none}

• Modifier les couleurs des filtres:

/* modifier couleur filtre */
.bootstrap-select .dropdown-toggle {
border: 1px solid #ccc;
background: #FFFAF4!important;}

Modifier la couleur du filtre déroulant:

/* modifier couleur filtre déroulant */
.dropdown-menu {background-color: #d6aeb1}

• Modifier la couleur du filtre date:

/* modifier couleur filtre date */
.class-calendar-block .navigation__date-selection {background: #FFFAF4}

• Modifier les angles de rond à rectangulaire:

/* modifier angles */
.class-calendar-block .calendar__slot {border-radius:0px;}

• Ajouter une image en fond de page

/* image de fond */
#wrapper {background-color:transparent;background-image:url(http://www..../jpg)!important;background-repeat: no-repeat;background-attachment: fixed;background-size:cover;}

• Modifier la couleur de fond des produits (services: carnets et abonnements à paiement unique):

/* couleur de fond des services */
.block-area .block {background: #d6aeb1}

• Modifier la couleur de fond des abonnements à paiements récurrents:

/* couleur de fond des abonnements */
 .membership-color{background-color: #2d9cdb;}

• Modifier les couleurs des bordures de tous les carnets:

/* couleur bordures des carnets */
.block-card-border {border-color: #e135e8;}

• Vous pouvez faire la modification pour tous les types de produits. Il vous suffit de copier le code CSS ci-dessus et de substituer ".time-card-border" par le code correspondant au type de produit:

.time-card-border (abonnement paiement unique)
.block-card-border (carnet)
.membership-border-color (abonnements paiements récurrents)
.abo-card-border
.season-card-border
.credit-card-border
.subscription-card-border

• Modifier la couleur du "tag" de tous les carnets:

/* couleur tag carnets */
.block-card-color {background-color: #2d9cdb;}

• Vous pouvez faire la modification pour tous les types de produits. Il vous suffit de copier le code CSS ci-dessus et de substituer ".time-card-border" par le code correspondant au type de produit:

.time-card-color (abonnement paiement unique)
.block-card-color (carnet)
.membership-color (abonnement paiement récurrent)
.abo-card-color
.seasonal-lesson-color
.credit-color
.subscription-color

• Modifier la couleur du bouton:

• Modifier la couleur de bordure du bouton:

/* couleur bordure bouton */
.btn-default {border-color: #2b4059;}

Nous espérons que ces exemples vous ont été utiles. Si vous ne trouvez pas un code, n'hésitez pas à nous contacter, nous pourrons essayer de vous aider :)