--- title: Modifier l'apparence de votre site web avec du CSS personnalisé description: "Personnalisez l’apparence de votre site Web Yapla avec du CSS : extraits de code prêts à l’emploi pour ajuster icônes, couleurs, bannières et logos." --- [Contenu à ignorer](https://support.yapla.com/fr-ca/modifier-lapparence-de-votre-site-web-avec-du-css-personnalisé#main-content) - [Français - Canada](https://support.yapla.com/fr-ca/modifier-lapparence-de-votre-site-web-avec-du-css-personnalis%C3%A9) - [Français - France](https://support.yapla.com/fr-fr/modifier-lapparence-de-votre-site-web-avec-du-css-personnalisé) Français - Canada Afficher le sous-menu pour les traductions [Plus d'assistance](https://support.yapla.com/fr-ca/kb-tickets/new?hsLang=fr-ca) [Portail client](https://support.yapla.com/tickets-view?hsLang=fr-ca) [![logo-centre-aide-yapla](https://support.yapla.com/hs-fs/hubfs/logo-centre-aide-yapla.png?width=880&height=119&name=logo-centre-aide-yapla.png)](https://support.yapla.com/fr-ca/?hsLang=fr-ca) - [Rendez-vous](https://www.yapla.com/fr-ca/rv-support?utm_term=plateforme) - [Académie Yapla](https://academie.yapla.com/) Ouvrir la navigation principale Fermer la navigation principale - [Rendez-vous](https://www.yapla.com/fr-ca/rv-support?utm_term=plateforme) - [Académie Yapla](https://academie.yapla.com/) - - [Français - Canada](https://support.yapla.com/fr-ca/modifier-lapparence-de-votre-site-web-avec-du-css-personnalis%C3%A9) - [Français - France](https://support.yapla.com/fr-fr/modifier-lapparence-de-votre-site-web-avec-du-css-personnalisé) Français - Canada Afficher le sous-menu pour les traductions - [Plus d'assistance](https://support.yapla.com/fr-ca/kb-tickets/new) - [Portail client](https://support.yapla.com/tickets-view) - [Nous contacter](https://support.yapla.com/fr-ca/kb-tickets/new) [Nous contacter](https://support.yapla.com/fr-ca/kb-tickets/new?hsLang=fr-ca) Comment pouvons-nous vous aider? - Aucune suggestion, car le champ de recherche est vide. 1. [Centre d'aide Yapla](https://support.yapla.com/fr-ca?hsLang=fr-ca) 2. [Créer mon site web](https://support.yapla.com/fr-ca/cr%C3%A9er-mon-site-web?hsLang=fr-ca) 3. [Personnalisation du site Web](https://support.yapla.com/fr-ca/cr%C3%A9er-mon-site-web?hsLang=fr-ca#personnalisation-du-site-web) # Modifier l'apparence de votre site web avec du CSS personnalisé Vous souhaitez personnaliser davantage l’apparence de votre site web Yapla ? Voici quelques extraits de code CSS que vous pouvez ajouter pour ajuster certains éléments visuels de votre site : taille des icônes, couleurs, bannières, logos, etc. ### Où ajouter le code CSS ? Rendez-vous dans le menu **"Sites web",** cliquez sur votre site puis rendez-vous sur**"Personnalisation" \> "Avancée"**, vous pourrez ainsi insérer selon vos besoins les extraits ci-dessous dans la zone **"CSS personnalisé"** ![](https://support.yapla.com/hs-fs/hubfs/Knowledge%20Base%20Import/43161723456275.png?width=2868&height=1376&name=43161723456275.png) ### Icônes et en-tête #### Agrandir les icônes des réseaux sociaux dans l'en-tête ``` ``` ``` .mod-social-links .icon-facebook, .mod-social-links .icon-instagram, .mod-social-links .icon-x-twitter { font-size: 26px; /* Ajustez la taille selon vos besoins */ } ``` --- ### Menu de navigation #### Modifier la couleur des liens du menu ``` ``` ``` .navbar-nav > li > a, .navbar-default .navbar-nav > li > a { color: black !important; /* Remplacez "black" par la couleur de votre choix */ } .navbar-nav > li > a:hover, .navbar-nav > li.active > a { color: black !important; } ``` 📌 **Astuce :** Utilisez les noms de couleur en anglais (`red`, `green`, etc.) ou un code hexadécimal (`#FF0000`, `#00FF00`, etc.). --- ### Fond du site #### Ajouter une image de fond au site web ``` ``` ``` body { background-image: url('chemin/vers/image.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center center; } ``` 📌 **Important :** Remplacez `'chemin/vers/image.jpg'` par l’URL exacte de votre image. --- #### Modifier la couleur de fond du site ``` ``` ``` body { background-color: #333333; /* Remplacez par la couleur souhaitée */ } ``` --- ### Affichage mobile #### Modifier la couleur des trois barres du menu (mobile) ``` ``` ``` .navbar-default .navbar-toggle .icon-bar { background-color: #FFFFFF; /* Modifiez ce code pour changer la couleur */ } ``` --- ### Bannière et logo #### Modifier la hauteur de la bannière ``` ``` ``` .mod-banner__img { height: 200px; /* Ajustez la hauteur selon vos besoins */ background-size: cover; } ``` #### Modifier la taille du logo dans l’en-tête ``` ``` ``` .mod-header-logo { max-width: 200px; /* Ajustez selon la taille souhaitée */ } ``` --- ### Pied de page #### Modifier la taille du numéro de téléphone ``` ``` ``` .footer-phone h3, .footer-phone p { font-size: 18px; /* Ajustez la taille selon vos besoins */ } ``` #### Modifier la taille de l’adresse e-mail ``` ``` ``` .footer-email h3, .footer-email a { font-size: 18px; } ``` #### Modifier la taille de l'adresse postale ``` ``` ``` .footer-address h3, .footer-address p { font-size: 18px; } ``` #### Changer la couleur du texte et des liens dans le pied de page ``` ``` ``` .line-footer p { color: white; /* Modifiez selon la couleur souhaitée */ } .line-footer a { color: white; /* Modifiez selon la couleur souhaitée */ } ``` --- ### Cacher des éléments spécifiques #### Cacher le bouton d’inscription aux ateliers d’un congrès ``` ``` ``` /* Remplacez l’ID de page pour ne cibler que la page concernée */ .pageid-89591 .workshops .registration-action { display: none !important; } ``` --- Rafraîchissez votre page une fois les modifications effectuées pour voir les changements. - [Débuter sur Yapla](https://support.yapla.com/fr-ca/d%C3%A9buter-sur-yapla?hsLang=fr-ca#main-content) - [Collection de ressources utiles pour découvrir Yapla](https://support.yapla.com/fr-ca/d%C3%A9buter-sur-yapla?hsLang=fr-ca#collection-de-ressources-utiles-pour-d%C3%A9couvrir-yapla) - [Pour se lancer](https://support.yapla.com/fr-ca/d%C3%A9buter-sur-yapla?hsLang=fr-ca#pour-se-lancer) - [Optimiser votre utilisation de Yapla](https://support.yapla.com/fr-ca/d%C3%A9buter-sur-yapla?hsLang=fr-ca#optimiser-votre-utilisation-de-yapla) - [À propos de Yapla](https://support.yapla.com/fr-ca/d%C3%A9buter-sur-yapla?hsLang=fr-ca#%C3%A0-propos-de-yapla) - [Configurer mon compte](https://support.yapla.com/fr-ca/configurer-mon-compte?hsLang=fr-ca#main-content) - [Premiers pas](https://support.yapla.com/fr-ca/configurer-mon-compte?hsLang=fr-ca#premiers-pas) - [Compte](https://support.yapla.com/fr-ca/configurer-mon-compte?hsLang=fr-ca#compte) - [Facturation](https://support.yapla.com/fr-ca/configurer-mon-compte?hsLang=fr-ca#facturation) - [Licences et utilisateurs](https://support.yapla.com/fr-ca/configurer-mon-compte?hsLang=fr-ca#licences-et-utilisateurs) - [Questions fréquentes](https://support.yapla.com/fr-ca/configurer-mon-compte?hsLang=fr-ca#questions-fr%C3%A9quentes) - [Comprendre les fonctions communes](https://support.yapla.com/fr-ca/comprendre-les-fonctions-communes?hsLang=fr-ca#main-content) - [Communications](https://support.yapla.com/fr-ca/comprendre-les-fonctions-communes?hsLang=fr-ca#communications) - [Formulaires](https://support.yapla.com/fr-ca/comprendre-les-fonctions-communes?hsLang=fr-ca#formulaires) - [Images et médias](https://support.yapla.com/fr-ca/comprendre-les-fonctions-communes?hsLang=fr-ca#images-et-m%C3%A9dias) - [Questions fréquentes](https://support.yapla.com/fr-ca/comprendre-les-fonctions-communes?hsLang=fr-ca#questions-fr%C3%A9quentes) - [Gérer mes paiements et mon authentification](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-paiements-et-mon-authentification?hsLang=fr-ca#main-content) - [Authentification](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-paiements-et-mon-authentification?hsLang=fr-ca#authentification) - [Modes de paiement](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-paiements-et-mon-authentification?hsLang=fr-ca#modes-de-paiement) - [Contribution volontaire et commission](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-paiements-et-mon-authentification?hsLang=fr-ca#contribution-volontaire-et-commission) - [Questions fréquentes](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-paiements-et-mon-authentification?hsLang=fr-ca#questions-fr%C3%A9quentes) - [Gérer mes membres](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-membres?hsLang=fr-ca#main-content) - [Premiers pas](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-membres?hsLang=fr-ca#premiers-pas) - [Importer les membres](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-membres?hsLang=fr-ca#importer-les-membres) - [Campagnes d'adhésions simplifiées](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-membres?hsLang=fr-ca#campagnes-dadh%C3%A9sions-simplifi%C3%A9es) - [Gestion des membres](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-membres?hsLang=fr-ca#gestion-des-membres) - [Fiche du membre](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-membres?hsLang=fr-ca#fiche-du-membre) - [Formulaire](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-membres?hsLang=fr-ca#formulaire) - [Communications](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-membres?hsLang=fr-ca#communications) - [Gestion des organisations ou familles](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-membres?hsLang=fr-ca#gestion-des-organisations-ou-familles) - [Gestion des adhésions](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-membres?hsLang=fr-ca#gestion-des-adh%C3%A9sions) - [Tarifs](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-membres?hsLang=fr-ca#tarifs) - [Organisation ou famille](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-membres?hsLang=fr-ca#organisation-ou-famille) - [Fonctions avancées](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-membres?hsLang=fr-ca#fonctions-avanc%C3%A9es) - [Formations continues](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-membres?hsLang=fr-ca#formations-continues) - [Questions fréquentes](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-membres?hsLang=fr-ca#questions-fr%C3%A9quentes) - [Organiser mes événements](https://support.yapla.com/fr-ca/organiser-mes-%C3%A9v%C3%A9nements?hsLang=fr-ca#main-content) - [Premiers pas](https://support.yapla.com/fr-ca/organiser-mes-%C3%A9v%C3%A9nements?hsLang=fr-ca#premiers-pas) - [Configuration](https://support.yapla.com/fr-ca/organiser-mes-%C3%A9v%C3%A9nements?hsLang=fr-ca#configuration) - [Formulaires](https://support.yapla.com/fr-ca/organiser-mes-%C3%A9v%C3%A9nements?hsLang=fr-ca#formulaires) - [Billets électroniques](https://support.yapla.com/fr-ca/organiser-mes-%C3%A9v%C3%A9nements?hsLang=fr-ca#billets-%C3%A9lectroniques) - [Paramètres avancés](https://support.yapla.com/fr-ca/organiser-mes-%C3%A9v%C3%A9nements?hsLang=fr-ca#param%C3%A8tres-avanc%C3%A9s) - [Communications](https://support.yapla.com/fr-ca/organiser-mes-%C3%A9v%C3%A9nements?hsLang=fr-ca#communications) - [Gestion des tarifs](https://support.yapla.com/fr-ca/organiser-mes-%C3%A9v%C3%A9nements?hsLang=fr-ca#gestion-des-tarifs) - [Gestion des inscriptions](https://support.yapla.com/fr-ca/organiser-mes-%C3%A9v%C3%A9nements?hsLang=fr-ca#gestion-des-inscriptions) - [Gestion des activités avec sessions](https://support.yapla.com/fr-ca/organiser-mes-%C3%A9v%C3%A9nements?hsLang=fr-ca#gestion-des-activit%C3%A9s-avec-sessions) - [Congrès](https://support.yapla.com/fr-ca/organiser-mes-%C3%A9v%C3%A9nements?hsLang=fr-ca#congr%C3%A8s) - [Questions fréquentes](https://support.yapla.com/fr-ca/organiser-mes-%C3%A9v%C3%A9nements?hsLang=fr-ca#questions-fr%C3%A9quentes) - [Recueillir des dons](https://support.yapla.com/fr-ca/recueillir-des-dons?hsLang=fr-ca#main-content) - [Premiers pas](https://support.yapla.com/fr-ca/recueillir-des-dons?hsLang=fr-ca#premiers-pas) - [Gestion des dons](https://support.yapla.com/fr-ca/recueillir-des-dons?hsLang=fr-ca#gestion-des-dons) - [Reçus fiscaux](https://support.yapla.com/fr-ca/recueillir-des-dons?hsLang=fr-ca#re%C3%A7us-fiscaux) - [Dons récurrents](https://support.yapla.com/fr-ca/recueillir-des-dons?hsLang=fr-ca#dons-r%C3%A9currents) - [Gestion des campagnes](https://support.yapla.com/fr-ca/recueillir-des-dons?hsLang=fr-ca#gestion-des-campagnes) - [Gestion des campagnes participatives](https://support.yapla.com/fr-ca/recueillir-des-dons?hsLang=fr-ca#gestion-des-campagnes-participatives) - [Gestion des donateurs](https://support.yapla.com/fr-ca/recueillir-des-dons?hsLang=fr-ca#gestion-des-donateurs) - [Questions fréquentes](https://support.yapla.com/fr-ca/recueillir-des-dons?hsLang=fr-ca#questions-fr%C3%A9quentes) - [Créer mon site web](https://support.yapla.com/fr-ca/cr%C3%A9er-mon-site-web?hsLang=fr-ca#main-content) - [Premiers pas](https://support.yapla.com/fr-ca/cr%C3%A9er-mon-site-web?hsLang=fr-ca#premiers-pas) - [Personnalisation du site Web](https://support.yapla.com/fr-ca/cr%C3%A9er-mon-site-web?hsLang=fr-ca#personnalisation-du-site-web) - [Pages](https://support.yapla.com/fr-ca/cr%C3%A9er-mon-site-web?hsLang=fr-ca#pages) - [Modules](https://support.yapla.com/fr-ca/cr%C3%A9er-mon-site-web?hsLang=fr-ca#modules) - [Gestion du contenus et des articles](https://support.yapla.com/fr-ca/cr%C3%A9er-mon-site-web?hsLang=fr-ca#gestion-du-contenus-et-des-articles) - [SEO et outils de performance](https://support.yapla.com/fr-ca/cr%C3%A9er-mon-site-web?hsLang=fr-ca#seo-et-outils-de-performance) - [Questions fréquentes](https://support.yapla.com/fr-ca/cr%C3%A9er-mon-site-web?hsLang=fr-ca#questions-fr%C3%A9quentes) - [Gérer ma comptabilité](https://support.yapla.com/fr-ca/g%C3%A9rer-ma-comptabilit%C3%A9?hsLang=fr-ca#main-content) - [Premiers pas](https://support.yapla.com/fr-ca/g%C3%A9rer-ma-comptabilit%C3%A9?hsLang=fr-ca#premiers-pas) - [Gestion des ventes et factures](https://support.yapla.com/fr-ca/g%C3%A9rer-ma-comptabilit%C3%A9?hsLang=fr-ca#gestion-des-ventes-et-factures) - [Gestion des dépenses](https://support.yapla.com/fr-ca/g%C3%A9rer-ma-comptabilit%C3%A9?hsLang=fr-ca#gestion-des-d%C3%A9penses) - [Journal général](https://support.yapla.com/fr-ca/g%C3%A9rer-ma-comptabilit%C3%A9?hsLang=fr-ca#journal-g%C3%A9n%C3%A9ral) - [Consolidation](https://support.yapla.com/fr-ca/g%C3%A9rer-ma-comptabilit%C3%A9?hsLang=fr-ca#consolidation) - [Rapports](https://support.yapla.com/fr-ca/g%C3%A9rer-ma-comptabilit%C3%A9?hsLang=fr-ca#rapports) - [Paramètres](https://support.yapla.com/fr-ca/g%C3%A9rer-ma-comptabilit%C3%A9?hsLang=fr-ca#param%C3%A8tres) - [Projets](https://support.yapla.com/fr-ca/g%C3%A9rer-ma-comptabilit%C3%A9?hsLang=fr-ca#projets) - [Taxes](https://support.yapla.com/fr-ca/g%C3%A9rer-ma-comptabilit%C3%A9?hsLang=fr-ca#taxes) - [Questions fréquentes](https://support.yapla.com/fr-ca/g%C3%A9rer-ma-comptabilit%C3%A9?hsLang=fr-ca#questions-fr%C3%A9quentes) - [Gérer mes contacts](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-contacts?hsLang=fr-ca#main-content) - [Gestion des contacts](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-contacts?hsLang=fr-ca#gestion-des-contacts) - [Déployer mes infolettres](https://support.yapla.com/fr-ca/d%C3%A9ployer-mes-infolettres?hsLang=fr-ca#main-content) - [Introduction à Yapla Infolettres](https://support.yapla.com/fr-ca/d%C3%A9ployer-mes-infolettres?hsLang=fr-ca#introduction-%C3%A0-yapla-infolettres) - [Configurer vos infolettres](https://support.yapla.com/fr-ca/d%C3%A9ployer-mes-infolettres?hsLang=fr-ca#configurer-vos-infolettres) - [Gestion des contacts](https://support.yapla.com/fr-ca/d%C3%A9ployer-mes-infolettres?hsLang=fr-ca#gestion-des-contacts) - [Suivi des performances](https://support.yapla.com/fr-ca/d%C3%A9ployer-mes-infolettres?hsLang=fr-ca#suivi-des-performances) - [Webinaires](https://support.yapla.com/fr-ca/d%C3%A9ployer-mes-infolettres?hsLang=fr-ca#webinaires) - [Gérer mes données](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-donn%C3%A9es?hsLang=fr-ca#main-content) - [Premiers pas](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-donn%C3%A9es?hsLang=fr-ca#premiers-pas) - [Configuration](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-donn%C3%A9es?hsLang=fr-ca#configuration) - [Gestion des objets](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-donn%C3%A9es?hsLang=fr-ca#gestion-des-objets) - [Rapports](https://support.yapla.com/fr-ca/g%C3%A9rer-mes-donn%C3%A9es?hsLang=fr-ca#rapports) - [Documentation pour les développeurs](https://support.yapla.com/fr-ca/documentation-pour-les-d%C3%A9veloppeurs?hsLang=fr-ca#main-content) - [Fonctions avancées](https://support.yapla.com/fr-ca/documentation-pour-les-d%C3%A9veloppeurs?hsLang=fr-ca#fonctions-avanc%C3%A9es) - [Gérer ma fédération](https://support.yapla.com/fr-ca/g%C3%A9rer-ma-f%C3%A9d%C3%A9ration?hsLang=fr-ca#main-content) - [Démarrage](https://support.yapla.com/fr-ca/g%C3%A9rer-ma-f%C3%A9d%C3%A9ration?hsLang=fr-ca#d%C3%A9marrage) - Nos offres - [Tarifs](https://www.yapla.com/fr-ca/offres) - [Services professionnels](https://www.yapla.com/fr-ca/services-professionnels) - [Banque d'heures de formation](https://info.yapla.ca/fr/services) - Ressources - [Centre d'aide](https://support.yapla.com/) - [Académie Yapla](https://academie.yapla.com/?utm_campaign=website&utm_medium=footer&utm_source=academie) - [Blogue](https://www.yapla.com/fr-ca/blogue) - [Témoignages](https://www.yapla.com/fr-ca/temoignages) - [Infolettre Yapla](https://www.yapla.com/fr-ca/infolettre-yapla) - Découvrir Yapla - [Démo et webinaires](https://www.yapla.com/fr-ca/webinaires) - [Conférence Yapla Impact](https://impact.yapla.com/fr/) - À propos - [Qui sommes-nous ?](https://www.yapla.com/fr-ca/a-propos) - [Yapla recrute](https://info.yapla.ca/fr/travailler-chez-yapla) - Contactez-nous - [Devenir partenaire](https://www.yapla.com/fr-ca/partenaire-integrateur) [![logo-yapla-fr](https://support.yapla.com/hubfs/logo-yapla-fr.svg "logo-yapla-fr")](https://www.yapla.com) Copyright © 2013-2026, Yapla [Conditions générales d'utilisation](https://www.yapla.com/fr-ca/cgu) | [Données personnelles](https://www.yapla.com/fr-ca/donnees-personnelles)