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é"

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.