Suite à l'installation du nouveau design, le blog peut encore présenter quelques erreurs, ou bugs d'affichage. Merci de votre compréhension.

Modifier le pied de page sur Blogger

Aujourd'hui nous allons voir comment modifier la mise en page du pied de page, comment y ajouter des gadgets, et modifier son apparence.

Modifier le pied de page sur Blogger

C'est parti pour les explications ;)

Sommaire

  1. Modifier la mise en page du pied de page
  2. Ajouter des gadgets au pied de page
  3. Modifier l'apparence du pied de page
    1. Supprimer la bordure en pointillés du pied de page
    2. Modifier le fond et la bordure du pied de page
    3. Modifier l'apparence des gadgets du pied de page

Modifier la mise en page du pied de page

Pour modifier la mise en page du pied de page, allez dans Modèle à partir de votre tableau de bord, et cliquez sur Personnaliser :

Modifier le pied de page sur Blogger

Dans le menu à gauche cliquez sur Mise en Page. Dans la colonne de droite, sous Mise en page du pied de page, vous trouverez les 3 dispositions de mise en page proposées par Blogger : 1, 2 ou 3 colonnes. Sélectionnez celle que vous souhaitez :

Modifier le pied de page sur Blogger

Cliquez ensuite sur Appliquer au blog en haut à droite de l'écran.

Si vous voulez définir la taille du pied de page à 100% de la largeur de la page web, suivez mon petit tutoriel ;)

Ajouter des gadgets au pied de page

Maintenant que vous avez défini le nombre de colonnes de votre pied de page, vous pouvez y ajouter des gadgets. Allez dans Mise en page à partir du tableau de bord.

Votre pied de page est situé en bas de la page. Dans mon exemple j'ai appliqué la disposition 3 colonnes que l'on retrouve par 3 colonnes de gadgets et un bouton Ajouter un gadget au début de chaque colonne :

Modifier le pied de page sur Blogger

Pour ajouter un gadget cliquez simplement sur Ajouter un gadget et sélectionnez le gadget de votre choix.
Vous pouvez déplacer les gadgets comme pour la barre latérale, en les glissant d'une colonne à l'autre.

Modifier l'apparence du pied de page

Passons maintenant à la personnalisation du pied de page et de ses gadgets.

Cliquez sur Modèle à partir de votre tableau de bord et cliquez sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez sur Télécharger le modèle complet pour faire une sauvegarde de votre thème. Cette étape est très importante au cas où vous feriez une erreur !

Modifier le pied de page sur Blogger

Une fois la sauvegarde faite, cliquez sur Modifier le code HTML :

Modifier le pied de page sur Blogger

Cliquez sur le rectangle noir à gauche de <b:skin>...</b:skin> :

Modifier le pied de page sur Blogger

Si vous ne le trouvez pas c'est que cette partie est déjà ouverte, passez à la suite.

Cliquez n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps (ou Cmd et F sur Mac). Une fenêtre de recherche apparaît en haut à droite de la boîte de code.
Collez la ligne suivante dans la boîte de recherche :
.footer-outer {
Appuyez sur Entrer. Vous tomberez sur un code qui ressemble à :
.footer-outer {
  border-top: $(footer.bevel) dashed #bbbbbb;
}
Ajoutez le code suivant, juste après le signe } :
footer {
}
C'est à ce code que nous allons ajouter les codes CSS pour définir l'apparence du pied de page.

Supprimer la ligne en pointillés au-dessus du pied de page.

Premièrement, nous allons supprimer la ligne en pointillés qui se trouve au-dessus du pied de page. Pour cela, supprimez simplement la ligne de code qui commence par border-top :
border-top: $(footer.bevel) dashed #bbbbbb;
On obtient :
.footer-outer {
}
Visuellement ça donne :

Modifier le pied de page sur Blogger

Modifier le fond et la bordure du pied de page

Pour ajouter une couleur de fond au pied de page, ajouter la ligne suivante :
background-color: #E4F4EF;   /* Couleur de fond du pied de page */
Au code :
footer {
}
Comme ceci :
footer {
background-color: #E4F4EF;   /* Couleur de fond du pied de page */
}
Changez le code couleur (#E4E4EF) par celui que vous voulez utiliser.
Pour trouver le code d'une couleur vous pouvez utiliser le site code-couleur.com.

Pour ajouter une bordure au pied de page, ajoutez les lignes suivantes :
border-width: 1px;   /* Epaisseur de la bordure */
border-style: solid;   /* Style de la bordure */
border-color: #9BBAB6;   /* Couleur de la bordure */
Comme ceci :
footer {
background-color: #E4F4EF;   /* Couleur de fond du pied de page */
border-width: 1px;   /* Epaisseur de la bordure */
border-style: solid;   /* Style de la bordure */
border-color: #9BBAB6;   /* Couleur de la bordure */
}
Vous pouvez spécifier sur quel côté vous voulez faire apparaître la bordure en ajoutant juste après border :
-top : pour le haut
-bottom : pour le bas
-left : pour la gauche
-right : pour la droite

Comme ceci :
border-top-width: 1px;   /* Epaisseur de la bordure */
border-top-style: solid;   /* Style de la bordure */
border-top-color: #9BBAB6;   /* Couleur de la bordure */
Visuellement on obtient :

Modifier le pied de page sur Blogger

Modifier l'apparence des gadgets du pied de page.

Vous pouvez donner une apparence spécifique aux gadgets de votre pied de page pour qu'ils apparaissent de manière différente que les gadgets de votre barre latérale.
Pour cela, il suffit de rajouter footer avant le nom de votre code CSS.

Par exemple, si je veux changer l'apparence des titres des gadgets du pied de page, alors j'utilise le code CSS suivant :
footer .widget h2 {
}
Dans mon exemple mon code est le suivant :
footer .widget h2 {
text-align: center;   /* Alignement du texte */
border-bottom: 1px solid #ddd;   /* Bordure sous le titre */
padding-bottom: 10px;   /* Espace sous le titre avant la bordure */
margin-bottom: 20px;   /* Espace sous le titre après la bordure */
font-family: 'PT sans', sans-serif;   /* Police du titre */
text-transform: uppercase;   /* Lettres en majuscules | normal = apparence normal*/
letter-spacing: 2px;   /* Espace entre les lettres */
font-size: 14px;   /* Taille de la police du titre */
font-weight: 300;   /* Epaisseur de la police du titre */
color: #525253;   /* Couleur du titre */
}
Visuellement on obtient :

Modifier le pied de page sur Blogger

Pour modifier l'apparence globale des gadgets il faut utiliser le code suivant :
footer .widget {
}
Vous pouvez modifier le fond des gadgets en ajoutant le code :
background-color: #E4F4EF;
Ou alors ajouter une bordure avec le code :
border-width: 1px;
border-style: solid;
border-color: #9BBAB6;
Vous pouvez modifier la police avec les codes :
font-family: 'PT sans', sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 14px;
font-weight: 300;
color: #525253;
text-align: center;
Petite remarque : pour modifier la couleur des liens il faut rajouter un code spécifique aux liens :
footer .widget a {
color : #e4b94b;
}
Amusez-vous avec les différents codes pour obtenir ce qui vous plait. Vous savez maintenant comment modifier l'apparence de votre pied de page ! ;)

Modifier le pied de page sur Blogger

Si vous voulez définir la taille du pied de page à 100% de la largeur de la page web, suivez mon petit tutoriel ;)

Autres articles

98 commentaires:

  1. Bonjour,
    Merci pour ce tutoriel.
    Pour avoir le pied de page sur toute la largeur de mon blog j'ai ajouté ce code, je voulais savoir si c'était bon !

    .footer-outer {
    background-color: #96cafa; /* Couleur de fond du pied de page */
    border-width: 1px; /* Epaisseur de la bordure */
    border-style: solid; /* Style de la bordure */
    border-color: #96cafa; /* Couleur de la bordure */
    right: 0;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 999;
    }

    J'ai utilisé le code que tu m'avais donné pour la barre de navigation en haut pour qu'elle soit sur toute la largeur du blog et ça a fonctionné ... mais je voulais voir si ça fonctionnait pour le bas. ça a l'air de fonctionner mais je préfère vérifier avec toi.

    RépondreSupprimer
    Réponses
    1. Bonjour Olivia, malheureusement ça ne fonctionne pas. Ton pied de page vas faire 100 % de la largeur du contenant de ton blog mais pas de la page entière. De mon ordi je vois bien des espaces blancs autour de ton pied de page.

      Pour que le pied de page prenne toute la largeur de la page il faut déplacer le code HTML du pied de page en dehors du contenant de ton blog. Je pense faire un tutoriel qui explique comment faire car j'ai pas mal de demandes.

      Supprimer
    2. Salut,
      Merci j'ai supprimé le code et j'attends ton tutoriel avec impatience.
      Pour avoir le pied de ta page sur toute la largeur du blog, et vers le bas (car en bas du fond, il y a un espace blanc).
      Merci en tout cas pour ta réponse rapide.

      Bises

      Supprimer
  2. Bonjour,

    Merci beaucoup pour toutes ces explications, je me lance dans la création d'un blog et ça m'aide beaucoup ;) Est-ce que ça serait possible d'avoir un tuto pour je m'explique : j'aimerais que la partie en haut de mon blog, soit ce qui est autour de la bannière soit blanche, que le fond des articles soit blanc et que tout le reste soit un fond de couleur, un peu comme à la manière de votre blog ;) J'ai beau cherché j'ai du mal à trouver ce genre de tuto ! Merci d'avance ;)

    RépondreSupprimer
    Réponses
    1. Je note sur ma liste de tutoriels ;)

      Supprimer
  3. Hello, merci beaucoup pour cet article, maintenant j'ai un tout nouveau pied de page ! ^^ Par contre, je rencontre un petit souci : j'ai bien copié le code qui permettait de modifier l'apparence des widgets mais quand j'insère un widget "pages" ou "listes", les liens n'apparaissent pas, la police étant de la même couleur que le fond. Pourtant en modifiant le code, j'ai bien fais attention à modifier la couleur de la police en blanc...

    RépondreSupprimer
    Réponses
    1. Bonjour Sophie, il y a un code spécifique pour les liens.
      Ajoutes le code suivant :

      footer .widget a {
      color: #ffffff;
      }

      ;)

      Supprimer
  4. bonjour! ton blog m'aide beaucoup dis donc! je voulais te demander comment faire pour réaliser une bannière comme la tienne ou alors centrer son nom de blog? je ne trouve pas !

    RépondreSupprimer
    Réponses
    1. Bonjour Hannah,
      Pour centrer le nom de ton blog, tu peux ajouter le code CSS suivant :

      #header-inner {
      text-align: center;
      }

      Si tu utilises une image ajoutes ce code:

      #Header1_headerimg {
      margin: 0 auto;
      }

      Supprimer
  5. Hello Catherine !
    Merci beaucoup pour ce tutoriel hyper efficace que je cherchais à faire depuis bien longtemps :-)
    Je te donne une idée pour un prochain tuto :p : pourquoi ne pas nous expliquer comment tu as fait pour installer des images sur toute la longueur de ton pied de page ? Haha, c'est vraiment très sympa visuellement...
    A bientôt

    RépondreSupprimer
    Réponses
    1. ça m'intéresserait aussi! :)

      Supprimer
    2. Personnellement je l'ai fais en utilisant son tutoriel pour mettre un widget instagram(snapwidget) , en choisissant widget type : scrolling; Thumbnail size: 350 et Widget Width 1500.
      C'est pas aussi beau que celui de Catherine mais ça marche :P

      Supprimer
  6. J'ai beau appliquer ton tuto à la lettre mon pied de page n'a pas bougé d'un millimètre.... Dégoutée
    Sinon très beau blog Bravo <3

    RépondreSupprimer
    Réponses
    1. Bonjour, si tu veux tu peux m'envoyer le lien vers ton blog pour que je puisses voir d'où vient le problème ;)

      Supprimer
    2. Oui merci ça serait vraiment gentil, c'est: www.flawlessyouth.blogspot.com ^^

      Supprimer
    3. Il y a plusieurs erreurs dans ton code HTML. Il manque des signes } pour fermer des codes CSS. Du coup, tout le code qui se trouve après ces erreurs ne sont pas prises en compte. C'est pour ça que les changements que tu avais apporté à ton pied de page n'ont pas été pris en compte. Cherches le code suivant :

      #blog-pager a {

      Juste avant cette ligne rajoutes le signe } comme ceci :

      }
      #blog-pager a {

      Maintenant cherches le code suivant :

      #blog-pager a:hover {

      Et rajoutes le signe } juste au-dessus comme ceci :

      }
      #blog-pager a:hover {

      A chaque fois que tu ajoutes des codes CSS vérifies qu'il y a bien tous les signes { } : et ; et ça devrait fonctionner ;)

      Supprimer
  7. Coucou, ton tuto m'a été très utile merci beaucoup:)
    J'ai juste rencontré un petit problème, comment fais-je pour dissimulé les barres blanches qui séparent mon pied de page en trois parties distinctes ? Je pense que ça à un lien avec la mise en page mais je ne suis pas sûre...

    Maë - http://blackhairblackdress.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour Maë,

      Vas dans Modèle > Modifier le code HTML. Juste avant la ligne :

      /* Content

      Colles ce code CSS :

      td.columns-cell {
      border: none !important;
      }

      Supprimer
    2. Merci pour ta réponse! :)

      Supprimer
  8. Bonjour!
    Merci pour tout tes tuto très utile! Mais j'ai un problème avec celui ci je trouve pas du tout: ".footer-outer {" même quand je fait une recherche il ne le trouve pas, est-ce normal?

    RépondreSupprimer
  9. Au temps pour moi, je n'avais pas ouvert "b:skin"! Désolé du dérangement et encore merci pour tout tes tutos, ton blog est formidable!
    Bisous,
    Elisa

    RépondreSupprimer
  10. Bonjour !
    Merci pour ce tutoriel et pour tous les autres, ils sont très utiles, intéressants et compréhensibles :)
    J'ai donc suivi ce tutoriel mais je ne comprend pas comment changer le fond de mon footer (avec l'attribution) sans changer celui des gadgets du footer... Je ne sais pas si je me fais comprendre mais en gros comme dans ta dernière image du tuto par exemple tu as le footer attribution en fond gris et le reste blanc.
    Sandra

    RépondreSupprimer
    Réponses
    1. Bonjour, cela n'est pas possible par défaut.
      Pour cela il faut changer le code HTML de ton blog pour déplacer l'attribution sous ton pied de page.

      Supprimer
  11. Bonjour,
    J'ai un soucis avec le code CSS complet qui modifie également la présentation de ma sidebar, j'ai essayé plusieurs fois et c'est pareil! Est-ce normal?

    RépondreSupprimer
    Réponses
    1. Bonjour Mélanie,
      Non ce n'est pas normal, quels codes as-tu essayé de modifier ?

      Supprimer
    2. J'ai utilisé le code CSS que tu donnes dans cet article pour essayer de personnaliser mon pieds de page mais quand je l'utilise cela modifie aussi ma sidebar. C'était surtout pour la police et les couleurs.

      Supprimer
    3. Bonjour Mélanie,
      Peux-tu me donner les codes CSS exacts que tu as utilisé ?

      Supprimer
    4. Bonjour,
      En réessayant, j'ai réussi à utiliser le code CSS que tu donnes dans cet article. Je me demande si ce n'était un problème avec Blogger qui m'empêchais d'utiliser correctement ton tutoriel.
      Le code que j'ai utilisé est le suivant:
      footer .widget h2 {
      text-align: center; /* Alignement du texte */
      border-bottom: 1px solid #ddd; /* Bordure sous le titre */
      padding-bottom: 10px; /* Espace sous le titre avant la bordure */
      margin-bottom: 20px; /* Espace sous le titre après la bordure */
      font-family: 'PT sans', sans-serif; /* Police du titre */
      text-transform: uppercase; /* Lettres en majuscules | normal = apparence normal*/
      letter-spacing: 2px; /* Espace entre les lettres */
      font-size: 14px; /* Taille de la police du titre */
      font-weight: 300; /* Epaisseur de la police du titre */
      color: #525253; /* Couleur du titre */
      }

      En tout cas merci pour tout tes conseils :)

      Supprimer
  12. Bonjour,
    Merci beaucoup pour ton tuto.
    J'espère que la question n'a pas été posé. Comment fais-tu pour modifier seulement un gadget en pied de page (en l'occurence le plus en bas)?

    Merci beaucoup ton travail~

    RépondreSupprimer
    Réponses
    1. Bonjour Adélie,
      Cela dépend du gadget. Sur ton blog tu as 3 zones de gadgets dont un qui contient tes statistiques. Ensuite tu as le gadget attribution. Lequel souhaites-tu modifier ?

      Supprimer
    2. Bonjour (désolé du retard)
      Celui en dessous de ces 3 zones de gadget pour par exemple ajouter un bouton pour remonter en haut du blog.

      Supprimer
    3. Pour cela il faut trouver le nom de ton gadget.
      Commence par créer ton gadget.
      Ensuite clique sur Modifier sur le gadget créé. En haut de la page tu trouveras une barre d'URL. Tout au bout à droite, à la fin de l'URL tu trouveras le nom de ton gadget. Si c'est un gadget HTML il se nommera HTML1, HTML2, etc., en fonction du nombre de gadgets HTML que tu as installé sur ton blog.
      Ensuite tu peux appliquer des codes CSS seulement à ce gadget en ajoutant le nom de ton gadget après un signe # au début des codes CSS, comme ceci :

      #HTML1 {
      }

      Le code ci-dessus est pour l'ensemble du gadget.

      Pour modifier les liens, rajoute a avant le signe { comme ceci :

      #HTML1 a {
      }

      Supprimer
  13. Bonsoir !

    Tout d'abord merci pour tous ces tutos, ils m'ont été bien utiles ! :D
    Ensuite, j'aimerais savoir comment customiser la barre latérale des widgets ?
    Merci d'avance ! :)

    x Ghexia
    http://ghexia-blogue.blogspot.fr/

    RépondreSupprimer
  14. Bonjour Catherine,

    Même si ce tuto date un peu... je me lance pour te poser une question dessus :
    comment fixer le pied de page pour que celui-ci reste en bas (à l'inverse de ton tuto sur la barre de navigation fixée en haut du blog) ?

    Encore merci et bravo pour ce que tu fais... C'est tout simplement génial !

    Pierre

    RépondreSupprimer
    Réponses
    1. Bonjour Pierre,
      En te basant sur le code pour fixer le menu en haut du blog, il suffit de l'appliquer au pie de page en modifiant la ligne :

      top: 0;

      par :

      bottom: 0;

      Ce qui donne :

      footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      left: 0;
      z-index: 9999;
      }

      Supprimer
  15. Bonjour Catherine,

    Merci pour ce super tuto, j'ai commencé à modifier mon pied de page pour qu'il soit plus sympa quand tu me feras l'affichage en miniature.

    Mais j'aimerais savoir s'il est possible de :

    - Modifier la hauteur du pied de page ?
    - Séparer la ligne "attribution" pour changer sa police, couleur etc ???

    Et j'ai une ligne de défilement qui apparaît sur mon écran depuis que j'ai touché au pieds de page, ça me le fait que sur mon blog, je ne sais pas trop le nom c'est comme celle que l'on a à droite de l'écran pour monter/descendre.

    Et c'est tout je crois.

    J'y ai mis quelques "gadgets" pour voir ce que ça donne, je pense que je referais des modifs, mais ça c'est autre chose ;)

    Encore merci à toi.
    A bientôt
    Jessica

    RépondreSupprimer
    Réponses
    1. Bonjour Jessica,
      La barre de défilement en bas de ta page apparaît car le pied de page est légèrement plus large que ta page. Pour régler ce petit soucis ajoute cette ligne :

      box-sizing: border-box;

      Avant le signe } de ce code :

      footer {
      width: 100%;
      }

      Comme ceci :

      footer {
      width: 100%;
      box-sizing: border-box;
      }

      Sans toucher au code HTML de ton blog on ne peut pas "séparer" le gadget Attribution du pied de page. Tu peux changer la couleur de fond et de son contenu mais elle ne fera pas 100% de la largeur de la page, car elle est à l'intérieur du contenant du pied de page (à qui on a définit une largeur maximale).

      Pour modifier le contenu du gadget d'attribution utilise ces codes CSS :

      /* Apparence du gadget d'attribution */
      #Attribution1 {
      }

      /* Liens du gadget d'attribution */
      #Attribution1 a {
      }

      /* Liens du gadget d'attribution au survol de la souris */
      #Attribution1 a:hover {
      }

      Supprimer
    2. Bonjour Catherine,

      Tout d'abord je te souhaite une bonne et heureuse année 2016, hâte de "bosser" avec toi ;)

      Merci pour cette réponse, j'ai réussi à régler le 1er probleme.

      Pour changer le design de "attribution", si je comprend bien , si je modifie le contenu du gadget, le tour sera toujours noir (dans mon cas) ?!
      Comment toucher au code html sinon ?! J'aimerai qu'il soit vraiment à part.

      Merci d'avance.
      A très vite.

      Jessica

      Supprimer
    3. Bonjour Jessica,
      Oui c'est exactement ça.

      Pour déplacer cette partie cherche cette ligne :

      <b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>

      Clique sur le nombre à gauche de cette ligne pour "fermer" cette partie. Tu devrais obtenir :

      <b:section class='foot' id='footer-3' name='Footer' showaddelement='no'>...</b:section>

      Surligne ce code. Coupe-le et colle-le juste après la ligne :

      </footer>

      Supprimer
    4. Coucou Catherine,

      Super ça a marché, merciiiiii <3

      Supprimer
  16. Bonjour! :)

    Super tuto, c'est beaucoup mieux personnalisé de la sorte, merci!
    Par contre, j'ai le modèle simple. Et donc, sur mes gadgets "listes de liens" et "pages", j'ai des points tout moches... Comment les enlever?
    Je voudrais savoir aussi s'il est possible de personnaliser le widget d'attribution "fourni par Blogger" (le texte, le background, la couleur..) Ou à défaut, l'enlever?
    Et comment faire pour mettre pleins de petites images en bas du footer, comme sur ton blog?
    Désolée pour toutes ces petites questions. ^^'

    Encore une fois, merci beaucoup pour tes tutos! J'espère en voir pleins d'autres! :)

    RépondreSupprimer
    Réponses
    1. Pour supprimer les points des listes de lien de ton pied de page utilise le code CSs suivant :

      footer .widget ul {
      list-style: none; /* Supprime les points des listes de liens du pied de page */
      }

      Le code CSS pour modifier l'apparence du gadget Attribution est :

      /* Apparence du gadget Attribution */
      #Attribution1 {
      }

      Tu peux le cacher en ajoutant la ligne :

      display: none;

      Comme ceci :

      #Attribution1 {
      display: none;
      }

      Pour les images en bas du pied de page il faut ajouter une zone de gadget en dehors du pied de page. Le mien se trouve au-dessus. Je pense faire un tutoriel pour expliquer comment faire car il faut rajouter du code HTML ;)

      Supprimer
  17. Hello !

    J'espère que je ne vais pas trop d'embêter avec ma question !

    J'ai voulu modifier mon pied de page et y mettre des icones de réseaux sociaux (un peu comme toi en fait). J'ai donc ajouté des codes HTML et CSS dans mon widget mais il ne rendent pas du tout comme prévu. J'ai l'impression qu'il y a un conflit quelque part mais je ne vois pas où... Peux-tu jeter un coup d'oeil ?

    J'ai fait les codes comme ça (je ne peux pas coller la totalité de mon code):

    #social-footer h2 {
    text-align: center;
    font-family: 'pacifico', cursive;
    font-size: 28px;
    color: #000000
    pading: 0;
    }

    #social-footer ul {
    display: inline-block !important;
    list-style: none;
    float: center;
    }

    #social-footer li {
    Text-align: center;
    display: inline-block !important;
    float: center;
    List-style: none;
    Padding: 0;
    }

    #social-footer a {
    text-decoration: none;
    color: #ffffff;
    background-color: #ffffff;
    }

    #social-footer .icones .fa {
    width: 15px; /* Largeur du bouton */
    height: 15px; /* Hauteur du bouton */
    color: #000000; /* Couleur des icônes */
    }

    #social-footer .icones .fa:hoover {
    color: #ea9999;
    background-color: #ffffff;
    width: 17px; /* Largeur du bouton */
    height: 17px; /* Hauteur du bouton */
    }


    Je te laisse l'adresse de mon blog : www.goodmorningpretty.com
    Merci d'avance si tu peux jeter un coup d'oeil :)
    Bises

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Quel est le problème avec les boutons ?
      Si c'est pour modifier la taille des icônes il faut remplacer width et height dans tes codes par font-size car c'est une police.
      Par exemple :

      #social-footer .icones .fa {
      width: 15px; /* Largeur du bouton */
      height: 15px; /* Hauteur du bouton */
      color: #000000; /* Couleur des icônes */
      }

      Devient :

      #social-footer .icones .fa {
      font-size: 24px; /* Taille des icônes */
      color: #000000; /* Couleur des icônes */
      }

      Supprimer
    2. Bonjour Catherine,

      Merci beaucoup ! Effectivement ça marche maintenant ! :)

      Mais du coup, comment faire pour les centrer et modifier l'apparence au survol ? J'ai essayé comme ça mais il doit y avoir une erreur quelque part..

      #social-footer ul {
      display: inline-block !important;
      list-style: none;
      float: center;
      }

      #social-footer li {
      Text-align: center;
      display: inline-block !important;
      float: center;
      List-style: none;
      Padding: 0;
      }

      #social-footer a {
      text-decoration: none;
      color: #ffffff;
      background-color: #ffffff;
      }

      #social-footer .icones .fa {
      font-size: 30px; /* Taille des icônes */
      color: #000000; /* Couleur des icônes */
      }

      #social-footer .icones .fa:hoover {
      color: #ea9999;
      background-color: #ffffff;
      width: 17px; /* Largeur du bouton */
      height: 17px; /* Hauteur du bouton */
      }

      Supprimer
    3. Tout d'abord, il faut aussi modifier la taille des icônes que tu as précisé dans le code au survol des liens :

      #social-footer .icones .fa:hoover {
      color: #ea9999;
      background-color: #ffffff;
      width: 17px; /* Largeur du bouton */
      height: 17px; /* Hauteur du bouton */
      }

      Supprime

      width: 17px; /* Largeur du bouton */
      height: 17px; /* Hauteur du bouton */

      Car ces lignes ne servent donc à rien.

      Ensuite il y a une faute de frappe dans ce code. Remplace la toute première ligne :

      #social-footer .icones .fa:hoover {

      Par :

      #social-footer .icones .fa:hover {

      Il y avait un "o" en trop dans le mot hover.
      Ajoute dans ce code CSS les éléments que tu souhaites modifier au survol des liens.

      Ensuite pour centrer tes liens. La ligne :

      float: center;

      N'existe pas. Remplace-la par :

      text-align: center;

      Dans ce code :

      #social-footer ul {
      display: inline-block !important;
      list-style: none;
      float: center;
      }

      Et supprime-la dans ce code :

      #social-footer li {
      Text-align: center;
      display: inline-block !important;
      float: center;
      List-style: none;
      Padding: 0;
      }

      De plus, ne met pas de majuscules dans le code. Remplace tes majuscules par des minuscules ;)

      Supprimer
    4. Re-coucou !

      Encore merci pour ta réponse !

      J'ai tout fait comme tu as dit. Pour le "hover", effectivement maintenant ça marche mais malgré le "text-align: center;" mes icones sont toujours à gauche, je n'arrive pas à savoir pourquoi :/

      #social-footer ul {
      display: inline-block !important;
      list-style: none;
      text-align: center;
      }

      #social-footer li {
      text-align: center;
      display: inline-block !important;
      list-style: none;
      padding: 6px;
      }

      Supprimer
    5. Bonjour,
      En regardant ton blog, les icônes sont bien centrés ;)

      Supprimer
  18. Hello ! Je n'arrive pas à enlever ma ligne en pointillé et ma barre rose clair sur ma barre de navigation. Je n'ai apparemment pas de ligne "border" que faire? Merci pour ton aide !

    RépondreSupprimer
    Réponses
    1. Bonjour Jupty,
      Tu as 2 bordures dans le code suivant :

      /* Fond et Bordure de la Barre de Navigation */
      .tabs-inner .widget ul {
      margin-top: 10px;
      margin-bottom: 10px;
      border-bottom: solid;
      border-bottom-color: #f494c5;
      border-bottom-width: 2px;
      border-top: dashed;
      border-top-color: #f9f9f9;
      border-top-width: 1px;
      text-align: center;
      }

      Supprime tous les codes commençant par border de ce code et voilà ;)

      Supprimer
  19. Bonjour Catherine,
    Je voudrais supprimer la ligne "Fourni par Blogger" dans mon pied de page. Pourrais-tu m'aider? Merci beaucoup!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      "Fourni par Blogger" est le gadget d'attribution. si tu l'enlèves tu devrait ajouter la mention sur une page de mentions légales.
      Le plus simple est de cacher ce gadget avec le code CSS suivant :

      #Attribution1 {
      display: none
      }

      Supprimer
  20. Et aussi "inscription à: Articles (Atom)"...

    RépondreSupprimer
    Réponses
    1. Pour cacher ces liens ajoute le code CSS suivant :

      .blog-feeds, .post-feeds {
      display: none
      }

      Avant la ligne suivante de ton code :

      ]]></b:skin>

      Supprimer
  21. Bonjour Catherine,
    J'aimerais faire un espace entre mon pied et page et le corps du blog, comment faire? merci :)
    http://Gwylind.blogpost.com

    RépondreSupprimer
  22. Merci énormément pour cet article qui m'a énormément aidé !

    RépondreSupprimer
  23. Coucou Catherine !
    J'espère que tu me pardonnes de te solliciter autant ces derniers temps.

    J'aimerais savoir comment enlever "Inscription à : Articles (Atom)" au pied de ma page sous mes articles ? C'est possible ?

    RépondreSupprimer
    Réponses
    1. Bonjour Marion,
      Ajoute le code CSS suivant :

      .post-feeds, .blog-feeds {
      display: none;
      }

      Avant la ligne suivante de ton code :

      ]]></b:skin>

      Supprimer
  24. Bonsoir Catherine (:

    Cela fait bien longtemps que j'ai appliqué tes tutoriels pour le footer (celui-ci + pour le mettre à 100% de la page) mais j'ai du faire des bêtises dans mes codes que je n'arrive pas à corriger seule et du coup si je mets un couleur de fond à mon footer, il ne fait pas la largeur complète de la page il se coupe avant. De plus, je n'arrive pas à régler sa hauteur. En gros mon footer est capricieux Ahaha.

    Ce serait super si tu pouvais m'aider à le rendre plus esthétique (:

    Merci d'avance,
    Rin

    PS : ton blog est vraiment génial, j'ai beau connaître les bases du HTML / CSS, je n'en serais jamais arrivée à mon résultat actuel sans toi ! Merci !!

    RépondreSupprimer
    Réponses
    1. Bonjour Rin,
      Sur quel blog rencontres-tu le problème ?

      Supprimer
  25. Bonjour, j'aime beaucoup vos tutos qui sont très bien expliqués pour une novice comme moi. Mais j'ai un soucis avec pas mal d'entre eux. Il y a beaucoup de codes que je ne trouve pas dans mes codes HTML du coup je peux rien modifier. :( Vu que j'ai déjà pas mal touché à mes codes pour ma présentation actuelle je me demande si ça ne vient pas de là. Par exemple pour ce tuto, quand je cherche .footer-outer { il me le trouve pas. Et c'est ainsi avec certains de vos tutos que j'ai pu essayer. Du coup j'ai abandonné à chaque fois de peur de faire une bêtise en essayant de chercher une solution. Pitié aidez-moi!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Si tu ne trouves pas les codes à modifier, rajoute-les avant la ligne :

      ]]></b:skin>

      Si tu as peur de faire un bêtise, réalise des sauvegardes de ton thème pendant la modification. Comme ça, si tu fais une erreur il te suffira de charger la sauvegarde et recommencer ;)

      Supprimer
  26. Merci beaucoup pour tout ces tutos votre blog est juste géniale!!! j'ai pu personnaliser mon blog par moi meme grace a votre aide et j'en suis super fière!!

    en attendant pour ce tuto tout fonctionne très bien, je rencontre juste un problème pour centrer mes images.

    mes textes sont centré mais mes images présent dans un de mes gadget "articles les plus consultés restent alignées à gauche.
    Je me doute qu'il existe un code pour les images, j'ai testé plusieurs trucs mais ça marche pas :-/

    Merci

    RépondreSupprimer
    Réponses
    1. Bonjour Anaïs,
      C'est normal que ces images restent alignés sur la gauche. Par défaut il y a un code qui aligne leur contenant sur la gauche, tu peux supprimer ceci avec le code CSS :

      .PopularPosts .item-thumbnail {
      float: none;
      }

      A ajouter avant :

      ]]></b:skin>

      Supprimer
  27. Bonjour Catherine !

    Je cherche désespérément à mettre le fond de mon footer en blanc et de le rendre un peu moins épais, mais quoi que j'essaie, rien n'y fait !
    Pourtant j'ai essayé d'appliquer des solutions que tu proposes dans l'article et aussi des tentatives un peu plus personnelles, mais je n'arrive vraiment à rien...
    Pourrais-tu m'aider ?

    Merci beaucoup pour tes articles, grâce à toi, j'apprends à la vitesse grand V à faire plein de trucs!

    Elsa.

    RépondreSupprimer
    Réponses
    1. Bonjour Elsa,
      Retrouve ton code CSS commençant par :

      .footer-inner {

      Tu trouveras dans ce code CSS une ligne commençant par :

      background:

      Remplace la valeur à cette ligne par #ffffff comme ceci :

      .footer-inner {
      background: #ffffff;
      }

      Ensuite, ajoute les lignes suivantes :

      padding-top: 0;
      padding-bottom: 0;

      avant le signe } de ce même code CSS :

      .footer-inner {
      background: #ffffff;
      padding-top: 0;
      padding-bottom: 0;
      }

      Pour finir, on va supprimer l'espace sous le gadget de ton pied de page en ajoutant le code CSS suivant :

      footer .widget {
      margin-bottom: 0;
      }

      Juste au-dessus de la ligne :

      /* Mobile

      Supprimer
    2. C'est bon ça fonctiooooonne !
      Merci beaucoup beaucoup beaucoup pour tout !

      Bonne soirée à toi,
      Elsa.

      Supprimer
  28. Bonjour,

    je parle de ce site: http://immortalitepossible.blogspot.fr/

    y a-t-il un autre moyen pour enlever les pointillés car ce que vous proposez ne marche pas ?

    RépondreSupprimer
  29. c'est bon merci j'ai trouvé ailleurs !

    RépondreSupprimer
  30. Coucou.
    Je vais finir par laisser un commentaire à tout les articles ^^ Depuis hier j'ai décidé d'attaquer mon pied de page ... et là franchement je ne comprends RIEN. Pourtant je trouve tout lez codes, je les changes comme tu nous l'explique mais il ne se passe rien du tout des le début du Tuto.


    Je trouve bien le code du début :


    .footer-outer {
    border-top: $(footer.bevel) dashed #bbbbbb;
    }

    footer {
    width: 100%;
    }

    Comme expliqué j'ai supprimé : border-top: $(footer.bevel) dashed #bbbbbb;
    Puis ensuite j'ai voulu mettre une couleur de font, donc j'ai fais comme dit en joutant ce code :

    footer {
    background-color: #E4F4EF; /* Couleur de fond du pied de page */
    }

    Mais rien ne se passe du tout ...
    je comprends pas...

    Merci beaucoup de ton aide.

    Bonne journée et surement à demain pour une nouvelle question mdr

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je pense que le problème vient de ton erreur dans le code CSS de ton menu. Je t'ai donné les codes en question dans ton autre commentaire. Si cela ne change rien, alors il faut vérifier tes codes CSS et ceux qui les précèdent. Vérifie qu'il ne manque pas un des signes suivants (ou qu'il n'y en ai pas un en trop) :

      { : ; } /* */

      Supprimer
  31. Bonjour Catherine,
    Premièrement, merci pour tes nombreux tutos qui nous aide tous beaucoup !
    Justement je suis en train de rafraîchir mon blog.
    Je reprends tout depuis zéro pour être sûre de ne pas faire de bêtises.
    Bref;
    j'ai refais mon pied de page, mais j'ai une question : est-il possible de modifier la hauteur ?
    Actuellement j'ai une bande de fond assez épaisse au-dessus de mes mentions légales, je voudrais pouvoir la réduire!
    Merci beaucoup et bonne soirée :)

    RépondreSupprimer
    Réponses
    1. Bonjour Mathilde,

      Tu peux utiliser les codes CSS suivants pour réduire l'espace au-dessus de ton gadget d'attribution :

      .footer-inner {
      padding-top: 0; /* Espace au-dessus du pied de page */
      padding-bottom: 0; /* Espace en-dessous du pied de page */
      }

      #Attribution1 {
      margin-top: 12px; /* Espace au-dessus du gadget d'attribution */
      }

      Colle ces codes CSS avant la ligne suivante de ton thème :

      ]]></b:skin>

      Supprimer
  32. Bonjour,
    J'adore tes articles, ils sont très bien expliqués et c'est génial quand on vient d'ouvrir un blog comme moi.
    Je viens de refaire mon pied de page, tout va pour le mieux, sauf que je n'arrive pas à sortir les gros points noirs devant les liens dans catégories. Une astuce s'il te plait?
    Merci beaucoup !!

    RépondreSupprimer
    Réponses
    1. Bonjour Pauline,
      Tu peux supprimer les points noirs avec un peu de code CSS. Tout d'abord il faut trouver le nom de ton gadget pour pouvoir le cibler.

      Prenons en exemple un gadget liste de lien nommé LinkList1. Pour cacher les points noir il faut cibler la liste de lien du gadget LinkList1 comme ceci :

      #LinkList1 ul {
      list-style: none;
      }

      Ajoute ce code CSS avant la ligne suivante de ton thème :

      ]]></b:skin>

      Supprimer
    2. Parfait, c'est génial !!
      Tu rends les choses presque hyper facile ;)
      Merci beaucoup

      Supprimer
  33. Bonjour :)

    Je suis en train d'essayer de rendre mon blog un peu plus joli et ton site est une vrai mine d'or! Merci beaucoup!

    Par contre, dès qu'il s'agit d'une modification à faire dans le HTML, je suis perdue. En effet, je ne trouve jamais les codes qu'il faut chercher au début des tutoriels en faisant ctrl+f. J'ai vu que dans la FAQ il y a écrit que les codes se trouvent uniquement dans les thèmes de base de blogger, mais j'ai essayé avec quasiment tous les thèmes mis à disposition par blogger, rien n'y fait...

    Je m'excuse si la question a déjà été posée, mais je commence vraiment à désespérer..

    Bonne journée et merci d'avance!

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Clique bien dans la boîte de code avant de faire Ctrl+F. Sinon un champ de recherche apparaît bien mais en haut de la page web. Or ce champ de recherche ne fonctionnera pas. Celui qui fonctionne apparaît en haut à droite de la boîte de code.
      De plus, attention à ne pas ajouter d'espace avant ou après les codes à chercher ;)

      Supprimer
  34. Bonjour Catherine,
    J'ai modifié mon pied d'article, et déplacé mon gadget attribution pour pouvoir le modifier. Seulement, mon gadget instagram ne va pas jusqu'au bout de la page à droite, et le gadget attribution pareil mais à gauche... J'ai essayé de bidouiller grâce aux infos trouvées dans les commentaires mais rien n'y fait.
    Deux autres petites questions (désolé !!!) mon gadget instragram ne mets pas mes photos dans l'ordre de publication... Je ne sais pas si tu peux m'aider sur ce point là.
    Et j'aimerais enlever le "." qu'il y a avant "fourni par blogger" mais impossible.
    Voici mon blog : https://wild--amanda.blogspot.fr/
    Désolé pour toutes ces questions!
    Merci beaucoup, ça doit te prendre un temps fou de nous répondre!

    RépondreSupprimer
    Réponses
    1. Bonjour Amanda,

      Tout d'abord il faut ajouter un code qui va rectifier un bug d'affichage. Colle ceci :

      *, div {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      }

      Avant la ligne suivante de ton code CSS :

      /* Apparence du menu déroulant */

      Pour ton gadget Instagram retrouve ce code CSS :

      #instafeed li{width:16%;display:inline-block;margin:0px!important;padding:0!important}

      Remplace 16% par 16.666667% Comme ceci :

      #instafeed li{width:16.666667%;display:inline-block;margin:0px!important;padding:0!important}

      Pour le pied de page ajoute ce code :

      #footer-3 {
      margin: 0 !important;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      Supprimer
  35. Encore un super tutoriel! Merci beaucoup!! Un seul petit souci pour ma part:
    j'ai plusieurs gadgets dans mon pied de page, et malgré pas mal d'expériences et bidouillages, je n'arrive pas à avoir la même police pour mes titres...
    Peux-tu m'aider?
    merci!
    mon blog: https://mamandejumelles.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je ne vois pas le code CSS pour modifier les titres dans le code de ton thème :/

      Supprimer
  36. bonjour,

    merci pour ta réponse.

    C'est pas ça?:

    footer .widget h2 {
    text-align: center; /* Alignement du texte */
    border-bottom: 0px solid #000000; /* Bordure sous le titre */
    padding-bottom: 8px; /* Espace sous le titre avant la bordure */
    padding-top: 8px; /* Espace au dessus du titre avant la bordure */
    margin-bottom: 10px; /* Espace sous le titre après la bordure */
    font-family: Arial; /* Police du titre */
    text-transform: uppercase; /* Lettres en majuscules | normal = apparence normal*/
    letter-spacing: 0.5px; /* Espace entre les lettres */
    font-size: 14px; /* Taille de la police du titre */
    font-weight: 400; /* Epaisseur de la police du titre */
    color: #000000; /* Couleur du titre */
    background-color: #F9E8C2;}

    Le problème c'est que j'ai plusieurs widgets dans mon pied de page, et les modifications ci-dessus n'ont pas l'air de s'appliquer à tous les widgets... Ce qui fait que j'ai un widget avec un titre en gras, et trois widgets dont le titre n'est pas en gras...

    merci
    http://mamandejumelles.blogspot.fr/

    RépondreSupprimer
    Réponses
    1. Dans ce cas, ajoute !important avant le signe ; des éléments qui ne s'appliquent pas.
      Comme ceci :

      footer .widget h2 {
      text-align: center; /* Alignement du texte */
      border-bottom: 0px solid #000000; /* Bordure sous le titre */
      padding-bottom: 8px; /* Espace sous le titre avant la bordure */
      padding-top: 8px; /* Espace au dessus du titre avant la bordure */
      margin-bottom: 10px !important; /* Espace sous le titre après la bordure */
      font-family: Arial !important; /* Police du titre */
      text-transform: uppercase; /* Lettres en majuscules | normal = apparence normal*/
      letter-spacing: 0.5px; /* Espace entre les lettres */
      font-size: 14px !important; /* Taille de la police du titre */
      font-weight: 400 !important; /* Epaisseur de la police du titre */
      color: #000000 !important; /* Couleur du titre */
      background-color: #F9E8C2;
      }

      Supprimer
  37. J'ai ajouté !important, mais même comme ça il veut pas... il est têtu!!

    RépondreSupprimer
    Réponses
    1. As-tu réglé le problème ? Car en allant sur ton blog les titres ont bien la même apparence :)

      Supprimer
  38. Bonjour!
    Oui en effet, les titres de mon pied de page ont maintenant tous la même apparence.
    Je ne peux pas dire que j'ai résolu le problème, car je ne sais pas pourquoi ils s'affichaient différemment avant, et il me semble pas avoir fais de modifications... mystère...
    Ce qui m'embête c'est que j'aurai voulu qu'ils aient la même apparence que mes titres de la barre latérale...
    Je crois que je vais plutôt agir sur les titres de la barre latérale, parce que ceux là au moins j'arrive à les modifier. Tans pis, on fait comme on peut quand on est pas douée! lol
    Merci pour ton aide

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il doit peut-être y avoir une erreur dans tes codes CSS. Si c'est le cas, il faut vérifier tes codes CSS et ceux qui les précèdent. Vérifie qu'il ne manque pas un des signes suivants (ou qu'il n'y en ai pas un en trop) :

      { : ; } /* */

      Un simple oubli d'un signe ou un signe en trop, et tout ce qui suit l'erreur ne sera pas, ou mal, pris en compte.

      Supprimer
  39. Bonjour,

    Peut-on faire la meme chose avec le Header ?
    J'aimerais mettre une photo (type home page) qui fasse toute la largeur du blog et ensuite, en scrollant, on voit mon logo puis les menus ect ...
    J'ai essayé de mettre la photo en arrière plan, mais blogger me propose que de la mettre en mozaique pour faire toute la largeur.
    http://www.lisahoshi-photographie.com/
    Merci !

    RépondreSupprimer
    Réponses
    1. Bonjour,
      C'est tout à fait possible, j'ai fait un tutoriel ici.

      Supprimer
  40. Bonsoir Catherine, j'espère que tu vas bien. Est-il normal que mon pied de page n'apparaisse pas sur ma version mobile ? Si non, je crois que je rencontre un souci :/ Pourrais-tu m'aider s'il te plaît ? (encore...:p)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Par défaut les gadgets Blogger n'apparaissent pas sur mobile, il faut ajouter un petit code pour les activer sur mobile.
      Tout d'abord il faut trouver le nom de tes gadgets, j'explique comment faire ici.
      Retrouves ensuite tes gadgets dans le code de ton thème en faisant une recherche.
      Tu devrais trouver la première ligne d'un gadget comme ceci :

      <b:widget id='HTML3' locked='false' title='' type='HTML'>

      Avec le nom de ton gadget à la place de HTML3. Rajoutes ceci:

      mobile='yes'

      Juste après :

      <b:widget

      Comme ceci:

      <b:widget mobile='yes'

      Fait de même pour tes autres gadgets, sauvegardes, et voilà ;)

      Supprimer
    2. Oh zut je n'avais pas coché la case pour être informée des nouveaux commentaires ! Merci beaucoup c'est super !!!!

      Supprimer
  41. J'adore votre blog! bonjour et mes mercis pour tous vos autos! c'est un régal :)
    Je débute avec blogger depuis 1 mois ( c'est tout frais) je voulais changer le look de mon rooter que je trouve très impersonnel et moche mais voilà...impossible de changer les colonnes dans thème;mise en page , ça ne s'affiche pas ! j'ai le template SOHO.
    et en cherchant le footer dans le HTLM , j'ai ceci:
    .post-header, .post-footer {
    margin: 8px 0;
    }
    body.item-view .widget.Blog .post-header {
    margin: 0 0 16px;
    }
    body.item-view .widget.Blog .post-footer {
    margin: 50px 0 0;
    }
    .widget.FeaturedPost .post-footer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justifie;
    rien à voir avec votre description!
    je voulais un pied de page sur toute la longueur, encadré avec mon "logo" sur la gauche :(
    Que dois je faire ? Help!
    merci d'avance très bonne journée
    stephydeco.blospost.fr

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Les nouveaux thèmes Blogger ont une structure très différent des thèmes classiques. C'est donc pour cela que tu ne trouves pas les mêmes codes.
      Je ne pense pas que mes tutoriels soient compatibles avec ces thèmes :/

      Supprimer
  42. Hello ! J'ai un petit soucis, plusieurs en fait :

    - J'ai suivi tes conseils pour modifier seulement la ligne d'attribution, sauf que ça ne me fait pas vraiment un espace qui touche le bas du blog, ça me fait juste une ligne toute moche, comment changer ça ?

    - Un peu plus haut, j'ai une ligne en pointillé avec écrit "Accueil" au milieu, comment faire pour l'enlever ? :) (Je vais vérifier que tu n'ai pas un tutoriel dessus mais au cas où, est-ce que tu sais comment installer le bouton "remonter en haut" avec la flèche ?)

    - Comment enlever les mots " Inscription à : Articles (Atom)", je n'arrive pas à savoir d'où ça sort, je ne le trouve pas dans mon codage CSS...

    Merci d'avance pour tes réponses, j'ai d'autres questions mais il me semble avoir aperçu des tutos dessus alors je vais chercher avant de te demander ! ;)

    http://ldmailys.blogspot.com

    RépondreSupprimer
    Réponses
    1. Bonjour Maïlys,
      Je vois que tu as réglé certains problèmes ;)
      Pour l'espace sous la ligne d'attribution, tu peux le supprimer avec ce code :

      .region-inner.footer-inner {
      padding-bottom: 0;
      }

      Si tu souhaites également supprimer les espaces à gauche et à droite, alors rajoutes ces 2 lignes :

      padding-left: 0;
      padding-right: 0;

      Avant le signe } de ce même code CSS, comme ceci :

      .region-inner.footer-inner {
      padding-bottom: 0;
      padding-left: 0;
      padding-right: 0;
      }

      Si tu souhaites supprimer complètement les espaces de chaque côté de ton pied de page pour qu'il soit à 100% de largeur, alors ajoutes ce code CSS :

      .region-inner.footer-inner .section {
      margin: 0 !important;
      }

      Avant la ligne :

      ]]></b:skin>

      Supprimer

Le blog est officiellement en PAUSE. Je ne pourrai PAS répondre à vos commentaires. Pour plus d'infos.

Vérifiez que la réponse à votre problème ne se trouve pas déjà dans les commentaires ;)

Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger