Codes CSS les plus demandés

Vous pouvez utiliser l'outil CSS pour modifier vos pages web et personnaliser l'apparence de plusieurs aspects de votre événement virtuel ou hybride. Veuillez noter que le CSS est un langage de style largement utilisé pour la personnalisation des sites web et qu'il doit donc être utilisé par les développeurs. Dans cette FAQ, nous vous montrerons comment utiliser les codes CSS les plus fréquemment demandés, ce qui vous donnera un aperçu de la façon dont vous pouvez personnaliser votre événement à un autre niveau !

Avant de vous lancer, veuillez consulter cet article pour savoir quelles pages web vous pouvez modifier et comment le faire.

Personnaliser le Virtual Lobby

Comment puis-je personnaliser l'image de fond du Virtual Lobby ?

Vous pouvez modifier l'image d'arrière-plan principale de votre Virtual Lobby. Consultez cet article pour savoir comment.

Lorsque vous utilisez le modèle Classique, l'arrière-plan doit couvrir la totalité de l'écran. Lorsque vous utilisez le modèle Neo, l'arrière-plan ne couvrira que le côté droit de l'écran. Cliquez ici pour en savoir plus sur les mises en page du Virtual Lobby.

Dans le modèle Neo, pour remplir le côté gauche de la page et la bannière de droite que l'étape précédente n'a pas couverts, veuillez utiliser les codes ci-dessous :

Lorsque vous sélectionnez le mode de modèle Neo Sombre, assurez-vous que le code CSS commence par body.neo-layout.dark.
  1. Côté gauche de la page :

body.neo-layout #liveContent .lobby .container-box .scrollable-container-box {

width: calc(60vw - 72px);

background-color: #002242 !important;

padding: 8px 36px;

padding-right: 22px;

box-sizing: border-box;

border-right: 1px solid #DADDDE;

min-height: calc(100vh - 62px);

}

  1. Bannière de gauche en haut de la page :

body.neo-layout #barTop .leftBar {

background-color: #002242 !important;

border-right: 1px solid transparent!important;

  1. Bannière droite en haut de la page :

body.neo-layout #barTop .rightBar {

background-color: #002242 !important;

}

example de CSS dans le Virtual Lobby
Vous devez remplacer #002242 par tout autre code hexadécimal afin de pouvoir saisir la couleur que vous souhaitez pour l'arrière-plan de votre Virtual Lobby.

Comment puis-je changer les couleurs des en-têtes dans le Virtual Lobby ?

  • Pour modifier les couleurs dans lesquelles les activités, les sponsors, les Networking et les salles de groupe seront affichées dans le lobby, utilisez le code ci-dessous :

#liveWrapper #liveContent .lobby-header h1 span {color: #FF4500 !important;}

Le code hexagonal #FF4500 peut être remplacé par tout autre code hexagonal que vous souhaitez.

Le code ci-dessus fonctionne pour les deux mises en page : Classique et Neo.
  • Pour modifier la couleur dans laquelle s'affiche l'en-tête de la carte de bienvenue dans le Virtual Lobby, utilisez le code ci-dessous :

body.neo-layout #liveContent .lobby .container-box .scrollable-container-box #welcome .welcome-title {width: calc(1400px 1200px);    color: #FFB247 !important;}

L'en-tête de bienvenue n'est présent que si vous utilisez la mise en page Neo.

Changer la couleur de la police sur le chat des activités

  • Utilisez le code suivant :

#liveContent .chat-container .chat-unpinned .chat-body .chat {

color: #e5a85e !important;

}

Masquer l'onglet Virtual Lobby

Certains organisateurs d'événements ne souhaitent pas que les participants aient accès au Virtual Lobby avant le début de l'événement. Si c'est le cas, vous pouvez masquer l'onglet Virtual Lobby jusqu'à ce que l'événement commence, en appuyant sur Réglages > Onglets > Virtual Lobby (en haut à gauche) > et décochez la colonne Visible relative au Virtual Lobby et appuyez sur Fin pour enregistrer les modifications.

Après avoir fait cela, l'icône du Virtual lobby devrait disparaître du menu du lobby, mais sous Mon compte, le bouton Ouvrir lobby sera toujours affiché.

Si vous souhaitez également supprimer le bouton Ouvrir lobby, vous devrez le faire en modifiant le code source et en ajoutant le code suivant à la page des détails de l'événement.

  • Appuyez sur Evénement > Détails > Modifier > faites défiler vers le bas jusqu'à ce que vous voyiez le bouton bleu Code source > ajoutez le code suivant :

#headerVue .eventCover-info-virtual-lobby {

display: none;

}

Masquer le bouton de Dépannage

  • Sur la page Code source, ajoutez le code suivant:

.v2-barTop .barContent

.barDropdown.optionTroubleshoot{

display : none !important;

}

Dans le Virtual Lobby, le bouton de Dépannage sera masqué dans les deux dispositions : Neo et Classique. Ci-dessous vous trouverez un exemple sur le Neo:

Le bouton "Troubleshoot" est caché par le code CSS

Supprimer le bouton "lever la main" dans les activités

  • Dans la page Code source, ajoutez le code suivant :

#liveContent .videos .videos-controls .toolRaiseHands {

position: absolute;

z-index: 15;

padding: 7px;

display: none;

}

  • Voici à quoi devrait ressembler le code :

Cacher le courriel du conférencier dans le Virtual Lobby Neo

  • Dans la page Code source, ajoutez le code suivant :

#InEventDialog .speaker-modal [data-field="email"] {

display: none !important;

}

Cacher le courriel du conférencier dans le Virtual Lobby Classique

  • Si vous utilisez la mise en page classique, utilisez ce code à la place :

#liveWrapper .live-speakers .floating-info [data-field="email"] {

   display: none !important;

}

Modification d'autres caractéristiques des pages Web

  • Pour modifier d'autres caractéristiques des pages Web, allez sur la page Web, trouvez le ou les éléments particuliers que vous souhaitez modifier, faites un clic droit et appuyez sur Inspecter.
  • Dans cet exemple, nous allons modifier la taille de la police et la couleur du formulaire d'inscription.
  • Cliquez avec le bouton droit de la souris sur le texte du formulaire d'inscription et cliquez sur inspecter.
  • Vous verrez s'ouvrir l'onglet Styles, qui contient le code pour la police et la couleur de la police.
inspecter
Pour vous assurer que vous modifiez le bon élément de code, passez la souris sur le code, ce que vous essayez de modifier sera mis en évidence, ce qui signifie que vous devriez être en mesure de voir ce que vous êtes sur le point de configurer.

Par exemple, lorsque je passe le curseur sur le code .formcard, la police du formulaire est mise en évidence :

  • Copiez et collez le code dans le champ CSS personnalisé de la page de détails de l'événement.
  • Modifiez la taille de la police et les couleurs selon vos préférences.
L'utilisation de JavaScript pour la personnalisation CSS de la plateforme n'est pas autorisée. JavaScript est uniquement autorisé sur la plate-forme lors de la création de pages d'accueil, mais, notez que nous n'autorisons pas le JavaScript sur la racine du domaine.

Comment ajouter un fuseau horaire à l'agenda du site web ?

Dans ces exemples, nous ajouterons des informations sur le fuseau horaire à votre site web, ce qui aidera les participants du monde entier à suivre l'ordre du jour de votre événement. Sachez que les heures affichées dans le Virtual Lobby sont sensibles aux appareils et que les codes ci-dessous s'appliquent exclusivement à la visualisation de l'agenda de votre site web :

  1. Affichage du fuseau horaire sous la date de l'activité:
  • Allez sur la page Événement > Détails, cliquez sur le bouton Modifier, puis faites défiler la page vers le bas pour cliquer sur le bouton Code source.
  • Copiez et collez le code ci-dessous sur la page Code source.

#websiteContent .calendar .tabs:after {

content: "Eastern Time";

font-size: 15px;

}

  • C'est à cela que le code est censé ressembler dans la page du code source :
Notez que le texte entre /* */ ne fait pas partie du code, mais un marquage pour organiser vos codes de personnalisation.
le code sur la page du code source

  • Un exemple de la façon dont il sera affiché sur le site web est présenté ci-dessous : L'heure de l'Est
  1. Affichage de l'information sur le fuseau horaire juste à côté de l'heure de fin de l'activité :
  • Copiez et collez le code ci-dessous sur la page Code source.

#websiteContent .time:after {

content: "écrivez votre fuseau horaire ici";

font-size: 16px;

}

"

  • Voici à quoi doit ressembler le code sur la page Code source :
  • Un exemple de la façon dont il sera affiché sur le site web est présenté ci-dessous (EST)

Comment supprimer le fuseau horaire et la date de l'événement dans le formulaire d'inscription/achat ?

La date et l'heure de l'événement ainsi que le fuseau horaire défini sur la page des détails de l'événement seront affichés sur le formulaire d'inscription et le formulaire d'achat (si les billets sont activés).

  • Si vous souhaitez supprimer ces informations de ces pages, vous pouvez saisir le code ci-dessous :

#formContent .eventCover .eventDate {

visibility: hidden !important;

}

#purchaseContent .eventCover .eventDate {

visibility: hidden !important;

}

  • Voici à quoi devrait ressembler le code sur la page Code source:

le code sur la page Source code

  • Et l'image ci-dessous montre les deux situations, à gauche le fuseau horaire étant affiché, et à droite le code CSS étant utilisé pour cacher le fuseau horaire:

capture d'écran avec le code CSS utilisé pour masquer le fuseau horaire

Ajout d'une image de fond à d'autres pages

Voici d'autres pages auxquelles vous pouvez ajouter une image d'arrière-plan.

Vous pouvez copier et coller le code ci-dessous dans le CSS mais n'oubliez pas d'insérer le lien de l'adresse de l'image.

Vous pouvez également modifier la taille de l'arrière-plan "px" pour l'adapter à votre image.

  1. Mon Compte

#myAccountWrapper #myAccountContent {

background-image: url("l'adresse du lien de l'image va ici");

background-size: 1400px 1200px;

}

  1. Mon Agenda

#myAgendaWrapper .v2-bgContent {

background-image: url("l'adresse du lien de l'image va ici");

background size: 1400px 1200px;

}

  1. Mes Billets

#ticketManagerWrapper .v2-bgContent {

background-image: url("l'adresse du lien de l'image va ici");

background-size: 1400px 1200px;

}

  1. Formulaires

#myFormsWrapper .v2-bgContent {

background-image: url("l'adresse du lien de l'image va ici");

background-size: 1400px 1200px;

}

  1. Mon appli

#appContent.v2-bgContent {

background-image: url("l'adresse du lien de l'image va ici");

background-size: 1400px 1200px;

}

  1. Formulaire d'inscription

#formVue .formContent {

background-image: url("l'adresse du lien de l'image va ici");

background-size: 1400px 1200px;

}

  1. Formulaire personnalisé

#customFormVue #customFormContent {

background-image: url("l'adresse du lien de l'image va ici");

background-size: 1400px 1200px;

}

Couleurs de fond et titres

Pour modifier les couleurs d'arrière-plan, vous pouvez suivre les codes ci-dessus pour chaque page. Cette fois, au lieu de background-image : et background-size, vous utiliserez background-color :

  • Pour ajouter une couleur, vous devez entrer un code hexadécimal qui ressemble à ceci : #FF0085
  • Par exemple, pour modifier l'arrière-plan du formulaire d'inscription après la racine du formulaire, ajoutez le code suivant :

#formVue .formContent {

background-color: #FF0085;

}

Comment puis-je masquer le bouton 'Allez à l'événement' ?

La page de contenu est la page sur laquelle vos participants atterriront une fois qu'ils auront terminé leur inscription via le formulaire d'inscription. Cliquez ici pour plus d'informations sur la page de contenu.

Pour masquer la page de contenu, copiez et collez le code ci-dessous dans le champ Code source :

#formContent section.form[role="alert"] .formCard .formEnd {

display: none !important;

}

À gauche, vous avez le comportement par défaut du formulaire d'inscription sans que le bouton 'Allez à l'événement !' soit masqué. A droite, la page de contenu et donc le bouton Allez à l'événement ! ont été cachés.


Comment ça a été?