Modifier l'apparence de votre site web avec du CSS personnalisé

Envie d'aller plus loin que les couleurs et la police ? Les extraits de code CSS ci-dessous ajustent certains éléments visuels de votre site : taille des icônes, couleurs du menu, image de fond, bannière, logo, pied de page. Copiez celui qui vous convient, adaptez les valeurs et collez-le dans votre site.

Dans cet article

• Où ajouter le code CSS
• Icônes et en-tête
• Menu de navigation
• Fond du site
• Affichage mobile
• Bannière et logo
• Pied de page
• Cacher des éléments

Où ajouter le code CSS

1. Dans Sites web, ouvrez votre site, puis cliquez sur la tuile Personnalisation.
2. Ouvrez le sous-menu Avancée.
3. Collez l'extrait dans le champ CSS personnalisé, à la suite du code existant.
4. Cliquez sur Enregistrer, puis rechargez votre site pour voir le changement.

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;
}

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;
}

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

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;
}

Pour les autres options d'habillage (couleurs, police, classes CSS), consultez l'article Personnaliser l'apparence de votre site web.