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


Voici déjà le 2e numéro de Tuto Blog ! Une petite série d'articles, tutoriels, pour customiser et personnaliser son blog sous Blogger.

On continue dans les premiers pas et les basiques, après avoir enlevé la Navbar de blogger en haut de la page du blog, aujourd'hui je vous explique comment se débarrasser de la bordure d'image par défaut sous Blogger.



C'est assez rapide à faire en soi, il suffit simplement de supprimer un code CSS. Je vous explique :

Commencez par vous connecter sur Blogger pour arriver sur le tableau de bord.

Première étape avant de modifier quoique ce soit sur votre blog : Faire un sauvegarde en cas d'erreur comme expliqué dans le premier tuto.

Une fois la sauvegarde effectuée, on peut passer aux choses sérieuses ;)

Sur le tableau de bord cliquez sur Modèle dans le menu à gauche, puis sur Modifier le code HTML :


Dans la boîte de code qui est apparu repérez la ligne de code :
<b:skin>...</b:skin>
Et cliquez sur le triangle noir à sa gauche :


On va maintenant chercher le code CSS, c'est-à-dire le code qui définit le visuel de notre blog, qui correspond aux images du blog.

Pour ceci on va faire une recherche : cliquez n'importe où dans la boite de code, puis appuyez sur Ctrl et F en même temps. Une fenêtre de recherche apparaît en haut à droite de la boîte comme ceci :


Tapez post-body img dans la zone de recherche et appuyez sur Entrer.
Vous serrez redirigé vers le code correspondant :


Surlignez le code comme ci-dessous, et supprimez-la.

/!\ Attention à ne supprimer que ce qui est montré et rien de plus ni de moins /!\


Pour voir si tout à bien fonctionné prévisualisez votre blog en cliquant sur Prévisualiser le modèle en haut à droite.


Si les images n'ont plus de bordure alors ça à marché ! Mais ce n'est pas fini ! Il faut maintenant sauvegarder votre modèle en cliquant sur Enregistrer le modèle, sinon tout sera perdu et il faudra tout recommencer ;)

Et voilà le résultat :


J'espère que ce tuto vous à été utile :)

Quel tuto Blogger aimeriez-vous voir dans les prochains numéros ?

Autres articles

142 commentaires:

  1. Mince! Encore un tuto bien expliqué, mais j'ai l'impression que les codes sont différents d'un blog à l'autres. Je n'ai pas les mêmes lignes que toi...
    Dommage car je cherche depuis longtemps comment enlever cette fichue bordure autour des images.
    Merci quand même!

    RépondreSupprimer
    Réponses
    1. De même que pour la Navbar, ton code est légèrement différent que le mien à cause du modèle de blog.
      J'ai cherché le code correspond à ton modèle :

      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {
      padding: 5px;

      background: #fff;

      -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
      -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
      -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
      box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
      }

      Pour ton modèle il suffit de supprimer cette partie :

      -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
      -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
      -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
      box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);

      Supprimer
    2. j ai recherche pour les deux manieres et aucune ligne ne correspond a ca...

      Supprimer
    3. j'ai oiblie d'ajouter: chocolate-design.blogspot.com

      Supprimer
    4. Loin d'être pro, je pense que ma tentative serait à préciser/expliquer par des experts du code mais pour ce modèle j'ai élagué un peu plus et surtout j'ai modifié le :

      padding: 5px;
      background: #fff;

      par :
      padding : none;
      background: tranparent;

      Et ça fonctionne.

      J'avais tenté d'abord, de reprendre le padding: $(image.border.small.size) (présent dans le tuto) mais ça ne fonctionne pas avec ce model. VOILA!

      Supprimer
  2. énorme merci pour ton aide, parce qu'alors c'est une horreur cette bande grise ^^'

    RépondreSupprimer
  3. Merci infiniment pour tes conseils hyper bien expliqués! J'ai enfin compris et surtout réussi... Merci merci merci
    <3

    RépondreSupprimer
    Réponses
    1. De rien ! Je suis contente d'avoir pu t'aider ! :)

      Supprimer
    2. Merciiiiiiiii tu m'as enlevé une putain d'épine du pieds. Je te kiffe.
      Tchuss.

      Supprimer
  4. Tu gère merci beaucoup beaucoup !

    RépondreSupprimer
  5. Mille merciiiiiiis !!!

    Marina.

    Lestendancesbymarina.blogspot.com

    RépondreSupprimer
  6. J'ai crée mon blog sous blogspot, il y a seulement quelques jours et je me noie dans le code HTML ! Je cherche des tutoriels qui me serviront de bouées dans tous les sens, et je n'y arrive pas du tout-du tout, bien que je suive tout ce qui y est écrit à la ligne, la lettre et au symbole prés. Etant tellement désespérée, je fais des manipulations sans grand espoir. Là, je voulais supprimer justement le contour des photos ... et Ô joie, Ô apothéose MON premier exploit sur Blogspot ! Et ce grace à ton tutoriel ! Je voulais donc te remercier ! Merci, merci, merci !

    RépondreSupprimer
  7. Merci pour ce super tutoriel!

    http://naiveties.blogspot.fr/

    RépondreSupprimer
  8. Merci merci! Ca fait des jours que je cherchais comment faire!! C'est tellement plus joli comme ça!!

    RépondreSupprimer
  9. Je sais que ça fait longtemps que cet article a été posté mais… J'ai créé mon blog il y a un peu plus d'un mois et jusqu'à aujourd'hui j'avais ce foutu soucis de bordure d'image. Ca faisait des semaines que je cherchais une solution et grâce à vous j'ai ENFIN pu l'enlever en suivant exactement les étapes indiquées. Je viens de le faire il y a tout juste une minute et magie! Le cadre a disparu!! Donc… Merci merci merci infiniment!

    RépondreSupprimer
  10. Hello ! merciii bcp pour ce tuto tu nous a sauver la vie !!!

    Love.

    frenchjoiedevivre.blogspot.com

    RépondreSupprimer
  11. Merci beaucoup pour l'astuce ! Ca m'a été bien utile !

    RépondreSupprimer
  12. Ah enfin grâce à toi j'ai pu enfin enlever la bordure et avoir de jolies images png transparent sans bordure !!!
    Merciiiii <3
    Laureabeauty.blogspot.fr

    RépondreSupprimer
  13. merci merci merci ! des jours que je cherche en vain car les explications n'etaient pas claires du tout ... perdue dans le charabia des codes css etc ... ton tuto est merveilleusement clair ! merci

    RépondreSupprimer
  14. Merci ! Ton tuto est super clair et grâce à toi j'ai pu enfin régler mon problème !

    RépondreSupprimer
  15. Merci, je cherche régulièrement une réponse à ce problème, enfin une qui marche encore ;)

    RépondreSupprimer
  16. Je te remercie mille fois pour ce tuto hyper clair & bien expliqué !

    http://loolashanti.blogspot.fr/ ♥

    RépondreSupprimer
  17. je n'ai qu'une chose à dire !! je t'aime, tu m'as sauvé .. toute une soirée de perdue à chercher la solution, et grâce à toi, en 1 minute, terminé !!

    Merci, merci, je t'ajoute à mes favoris.

    Lyly, du blog Bio & the Beauty
    http://bioandthebeauty.blogspot.fr

    RépondreSupprimer
  18. Merci sa ma bien aider bonne journée

    RépondreSupprimer
  19. Merci ! Merci !
    Une belle découverte, ton blog.

    RépondreSupprimer
  20. Je me suis embêtée toute la journée à essayer d'enlever cette bordure, mais une fois tombée sur ton blog et ce super tuto ça m'a pris 2 minutes! J'étais au bord du pétage de plombs, merci! :D

    RépondreSupprimer
  21. Merci pour le tuto supêr bien expliqué ! j'ai eu un petit souci au début pour repérer le code ... , pour moi j'ai trouvé ... , mais pour la suite c'était les même étape , encore merci !

    RépondreSupprimer
  22. Super !! Tu me sauves depuis le temps que j'essayais de supprimer ce cadre !!! =D

    RépondreSupprimer
  23. Alors MERCI mille fois, car vos explications était très simple et j'ai de suite tout compris. Merci

    RépondreSupprimer
  24. 1000 mercis pour ces explications absolument limpides avec images à l'appui !!!

    RépondreSupprimer
  25. Merci beaucoup pour cette explication simple et efficace !
    Bonne soirée

    RépondreSupprimer
  26. Merci beaucoup, très bien expliqué, j'ai tout compris et enfin pu enlever ces fichues bordures ;)

    RépondreSupprimer
  27. Merci ! depuis le temps que je cherchais comment faire !! Merci beaucoup ! :)

    RépondreSupprimer
  28. Nickel c'est une gentille bloggeuse qui ma donner ton blog et super ! Cette bordure me fesait faire des cauchemars !
    Moi j'aimerais savoir si tu pouvais faire un truc pour inserer des icones genre celle de Facebook sur la colone du coter et quand on clique dessus ca nous dirige vers la page du blog par exemple

    RépondreSupprimer
  29. Je te remercie énormément ! Le 1er Juillet ça fera une chose de moins qui gênera sur le design de mon nouveau bébé :)

    RépondreSupprimer
  30. Merci pour ces astuces très bien expliqués ! Pourrais-tu en faire une sur changer sa présentation/profil sur blogger ? ^^

    RépondreSupprimer
  31. Super article ! ça faisait un moment que je cherchais un tuto aussi bien expliqué ! merci beaucoup ça a marché !

    RépondreSupprimer
  32. franchement merci beaucoup pour ce tuto je débute sur blogger et tes explications sont top !! J'ai hâte que tout ça prenne forme :) encore merciiiiiii !!!

    RépondreSupprimer
  33. Merci énoooooormement pour ce tuto très bien expliqué ! Depuis le temps que je cherche comment faire :,)

    Ninon
    HYPEway.

    RépondreSupprimer
  34. Merci énormément, ce tuto m'a bien servi !

    RépondreSupprimer
  35. Merci pour tes explications ! Clair et net c'est un plaisir ^^

    RépondreSupprimer
  36. Tu viens tout juste de sauver le design visuel de mon blog !! MERCI !! :)

    RépondreSupprimer
  37. Superbe tuto ! mais j'aimerai que ça marche seulement pour les images que je désire sans la bordure de l'image, comment faire ?

    RépondreSupprimer
    Réponses
    1. Pour cela il faut ajouter une "classe" à ton image dans son code HTML.

      Quand tu écris ton article sous Blogger, il y a sur la gauche un bouton "Rédiger" et un bouton "HTML". Clique sur le bouton "HTML" et tu verras le code de ton article.
      Il faut ensuite retrouver le code de ton image qui se présente sous la forme :

      <img src="http://adresse.com/image.png">

      Ajoute une classe en lui donnant un nom spécifique et facile à retenir, par exemple : "nobordure", ce qui donne :

      <img class="nobordure" src="http://adresse.com/image.png">

      /!\ class s'écrit sans "e" et le nom de la classe est entre guillemets !

      Ensuite il faut ajouter un code CSS qui va s'imposer à toutes les images dont tu as ajouté la classe "nobordure" dans le code HTML.
      Pour cela, le plus simple est de cliquer sur le bouton "Modèle" dans le menu à gauche sur le tableau de bord.
      Ensuite, clique sur "Personnaliser", puis sur "Avancé" dans le menu à gauche de l'écran.
      Dans la liste d'options proposés, descends tout en bas et clique sur "Ajouter le fichier CSS".
      Dans la boîte de dialogue blanche qui apparaît, entre le code suivant :

      img.nobordure {
      border: none;
      }

      /!\ Attention à changer le nom de la classe que tu as choisi en fonction !
      Si tu as choisi le nom de classe "panda" par exemple, remplace la première ligne par :

      img.panda {

      /!\ Comme toujours attention aux espaces et aux points-virgules !

      Sauvegarde ensuite les modifications en cliquant sur "Appliquer au blog" en haut à droite de la page web.

      Et voilà ! Il suffit juste de rajouter la classe "nobordure" (ou "panda") dans le code HTML de chaque image dont tu souhaites enlever la bordure ;)

      Supprimer
  38. Oh merci beaucoup pour ce super tuto ça m'a beaucoup aidé ! Et en plus c'est super simple et vraiment bien expliqué ! :)

    RépondreSupprimer
  39. Vraiment merci ! C'est bien plus esthétique sans ce cadre :P

    RépondreSupprimer
  40. Merci, super simple et bien expliqué

    RépondreSupprimer
  41. Coucou, un grand merci pour ce tuto !! Très clair et utile :) Bravo

    RépondreSupprimer
  42. Super longtemps que j'essayais de trouver un moyen pour enlever ces foutus bordures et là, je tombe sur ton blog et ça marche parfaitement, merci lo/

    RépondreSupprimer
  43. Bonjour, à ce que je vois tout le monde réussi sauf moi j'ai essayé par tous les moyens impossible ... quelqu'un pourrais t-il m'aider svp ?!

    RépondreSupprimer
    Réponses
    1. Salut Dah'Nys, ton code est très différent.. Mais j'ai trouvé comment supprimer la bordure :)

      Va dans Modèle à partir de ton tableau de bord. Ensuite clique sur Personnaliser, puis Avancé dans la liste de liens à gauche de l'écran. Ensuite, tout en bas de la liste proposé, clique sur Ajouter le fichier CSS.
      Dans la boîte de code blanche à droite, ajoutes le code suivant :

      #content img {
      border: none;
      }

      Enregistre en cliquant sur Appliquer au blog en haut à droite de l'écran, et ça devrait régler le problème ;)

      Supprimer
    2. bonjour Cath, J'avais le meme problème et en copiant ton code ca a marché!!!! Merci

      Supprimer
  44. Merci bcp pour tous ces précieux conseils :) .

    RépondreSupprimer
  45. ENFIN!!!!!!! Merci infiniment pour ce tuto

    RépondreSupprimer
  46. AAAA!!! MERCI ! Enfin, j'ai réussi à enlever ces satanées bordures de mes photos. Merci merci merci !

    Une question (ça fait un moment que je m'arrache les cheveux là dessus aussi et je n'ai toujours pas trouvé l'info) : puis-je rendre mon blog adaptatif en terme de dimensions (largeur des colonnes et des images variables selon les différents écrans des lecteurs) ?

    RépondreSupprimer
    Réponses
    1. C'est tout à fait possible et je comprends que tu te sois arraché les cheveux ! Car sur Blogger c'est pas évident... ^^
      Je pense que ce qui t'intéresse c'est d'utiliser des largeurs en % et non plus en pixels. Si je décide que ma zone d'article prend toute la page en largeur, alors je lui donne une largeur de 100%. Si on réduit la fenêtre, la largeur s'adaptera automatiquement pour toujours faire 100% de la fenêtre.
      Du coup si tu changes le code :

      body {
      min-width: 1400px;
      }

      Pour :

      body {
      max-width: 100%;
      }

      Et le code :

      .content-outer, .content-fauxcolumn-outer, .region-inner {
      min-width: 1400px;
      max-width: 1400px;
      _width: 1400px;
      }

      Pour :

      .content-outer, .content-fauxcolumn-outer, .region-inner {
      max-width: 100%;
      }

      Et le code :

      .post-body img, .post-body .tr-caption-container {
      padding: 5px;
      }

      Par :

      .post-body img, .post-body .tr-caption-container {
      padding: 5px;
      max-width: 100%;
      }

      Et pour finir :

      #header-inner img {
      margin: auto;
      }

      Pour :

      #header-inner img {
      margin: auto;
      max-width: 100%;
      height: auto;
      }

      Ton blog devrait s'adapter à la largeur de la fenêtre, même ton logo ;)

      Supprimer
    2. Merci beaucoup pour ton aide !

      Le souci c'est que je n'ai pas exactement ce code sur mon blog. Mes compétences en HTML sont assez limitées mais je comprends à peu près ce que je lis (bien que ça remonte à assez loin pour moi tout ça), hors il me semble que mon dimensionnement est déjà en pourcentage. Si tu à un moment, regarde, et dis moi ce que tu en penses :

      -----

      body {
      font: $(body.font);
      color: $(body.text.color);
      background: $(body.background);
      padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
      $(body.background.override)
      }

      html body $(page.width.selector) {
      min-width: 0;
      max-width: 100%;
      width: $(page.width);
      }

      a:link {
      text-decoration:none;
      color: $(link.color);
      }

      a:visited {
      text-decoration:none;
      color: $(link.visited.color);
      }

      a:hover {
      text-decoration:underline;
      color: $(link.hover.color);
      }

      .body-fauxcolumn-outer .fauxcolumn-inner {
      background: transparent $(body.background.gradient.tile) repeat scroll top left;
      _background-image: none;
      }

      .body-fauxcolumn-outer .cap-top {
      position: absolute;
      z-index: 1;
      height: 400px;
      width: 100%;
      background: $(body.background);
      $(body.background.override)
      }

      .body-fauxcolumn-outer .cap-top .cap-left {
      width: 100%;
      background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
      _background-image: none;
      }

      .content-outer {
      -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
      -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
      -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
      box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

      margin-bottom: 1px;
      }

      .content-inner {
      padding: $(content.padding) $(content.padding.horizontal);
      }

      $(content.background.color.selector) {
      background-color: $(content.background.color);
      }
      -----

      Quoi qu'il en soit, merci encore d'avoir pris le temps de te pencher sur mon problème :)

      Th

      Supprimer
    3. Salut Thierry,

      Si tes codes contiennent des valeurs de ce type : $(content.background.color) ou $(page.width) au lieu d'une valeur en pixels, ou un code couleur, ce n'est pas grave. De mon côté je vois la valeur en pixels ou le code couleur, mais le code reste le même, ce qui est important c'est la toute première ligne avec le "{".

      J'ai regardé à nouveau ton blog de mon côté, tu trouveras les codes à changer aux lignes suivantes :

      Ligne 496 :

      body {
      min-width: 1400px;
      }

      Ligne 499 :

      .content-outer, .content-fauxcolumn-outer, .region-inner {
      min-width: 1400px;
      max-width: 1400px;
      _width: 1400px;
      }

      Ligne 330 :

      .post-body img, .post-body .tr-caption-container {
      padding: 5px;
      }

      Ligne 491 :

      #header-inner img {
      margin: auto;
      }

      Bonne soirée :)

      Supprimer
  47. Bonjour,
    Je n'arrive pas à faire CTRL + F. Je n'ai aucune fenêtre qui s'ouvre. Pourrais-tu m'aider s'il te plaît?
    Merci d'avance, ton blog est super!

    RépondreSupprimer
    Réponses
    1. Bonjour Frédérique,

      Quand tu est sur la page Modifier le code HTML. Appuie sur le bouton Ctrl de ton clavier (ou la touche command cmd ou ⌘ sur Mac). Tout en gardant cette touche enfoncée, appuie sur la touche F du clavier. Une petite boîte devrait apparaître dans le coin en haut à droite de la fenêtre. Ce n'est pas une nouvelle fenêtre qui s'ouvre, elle est à l'intérieur de la fenêtre en cours.

      Bonne soirée :)

      Supprimer
  48. AAaaaah je ne sais comment te remercier, tu me sauves la vie (façon de parler hein) mais j'étais en train de m'arracher tous les cheveux ! Ahahah

    Merci merci,

    bonne journée,

    Claire
    Http://www.plume2geekette.com

    RépondreSupprimer
  49. Hey, Merci beaucoup pour cette aide !! Première fois que je touche à mon code HTML :)

    RépondreSupprimer
  50. Merci pour tes tutos, je me demande comment tu trouves tous ces trucs :)
    Est-ce que par hasard tu sais s'il est possible de faire en sorte que chaque article soit représenté par une photo, et que donc sur la page d'accueil il n'y ait que des photos avec les titres d'articles, comme ça on clique sur la photo et on est redirigé vers l'article. C'est pas très clair, j'espère que tu comprendras et pourras m'aider. J'ai essayé avec les affichages dynamiques mais ce n'est pas ce que je recherche.
    D'avance, merci !

    RépondreSupprimer
    Réponses
    1. Salut Thaïs !

      Oui c'est une bonne idée, je vais voir ce que je peux faire ! ;)

      Supprimer
  51. Merciiiii pour ton tuto, je viens enfin de trouver une réponse à ce que je cherchais à faire ;-)

    RépondreSupprimer
  52. Hellooo! J'ai un petit problème... Quand je tape "post-body img" on me dit qu'il y a aucun résultats... Et quand je fait les options avancées et que je tape
    #content img {
    border: none;
    }
    ça ne marche pas non plus...

    RépondreSupprimer
    Réponses
    1. Salut Alice,
      Si tu ne trouves pas le code ".post-body img" alors tu peux le rajouter après la ligne :

      /* Content
      ----------------------------------------------- */

      Je te conseil d'ajouter le code suivant :

      .post-body img {
      border: none !important;
      box-shadow: none !important;
      }

      !important permet dans certains cas de forcer le navigateur à appliquer ce que tu veux. Dans ton cas il faut l'ajouter au code pour que ça fonctionne ;)

      Supprimer
    2. Tuto qui m'interesse grandement mais aucunes solutions proposées ne semble fonctionner pour moi :(
      je ne trouve pas :
      /* Content
      ----------------------------------------------- */
      mais :


      j'ai donc essayé de copier coller le code que tu proposes après tout de meme mais ça ne fonctionne pas :(

      Supprimer
  53. Je viens de decouvrir ton blog et j'adore.
    Les conseils marchent en plus!!!!
    Merci :)

    RépondreSupprimer
  54. Un grand merci pour ce tuto, il m'a été très utile ! Je ne savais plus quoi faire de ces satanés bordures blanches qui gâchent les photos justement sans bordure... :')

    RépondreSupprimer
  55. Ca marche comme sur les roulettes !!!
    Adieu les bordures trop laides
    Je crois que je vais me faire tous les tutos
    MERCI

    RépondreSupprimer
  56. Bonjour et tout d'abord merci pour tes tutos qui sont un vrai régale pour moi novice en html.
    Grâce à toi mon blog prends l'apparence que je désire.
    Mais voilà j'ai essayer les 3 méthodes que tu sites pour retirer les bordures et impossible elles sont toujours là.
    Cela fais très moche d'avoir des bordures sur ces photos quand on a un fond de couleur.
    Si cela est possible d'avoir de l'aide je t'en remercie beaucoup par avance.

    www.solovelyfamily.com

    RépondreSupprimer
    Réponses
    1. Bonjour Joella,

      Retrouves le code comme expliqué dans le tutoriel avec "post-body img".
      Une fois que tu as retrouvé le code, supprime la ligne suivante :

      background: $(image.background.color);

      Elle se trouve juste au-dessus du code que tu as supprimé comme montré sur les images.
      Ça devrait régler le problème :)

      Supprimer
  57. Personnellement ça ne fonctionne pas de mon côté :/

    RépondreSupprimer
    Réponses
    1. As-tu bien supprimé les lignes surlignés comme sur l'image ?
      Supprime également la ligne suivante du même code pour enlever la bordure grise autour des images :
      background: $(image.background.color);

      Supprimer
    2. Ah là ça fonctionne, il manquait une ligne surligné sur votre capture :) merci beaucoup

      Supprimer
  58. Bonjour Catherine
    Je cherche à réaliser ce nouveau tuto et je n'y parviens pas car mon html est différent du tien, j'ai bien lu tout les commentaires mais je n'y arrive toujours pas, pourrais tu y jeter un œil stp merci beaucoup

    RépondreSupprimer
    Réponses
    1. Bonjour Amélie,
      Ton code est différent à cause de ton thème mais ce n'est pas grave, le code que tu dois chercher est le suivant :

      .post-body img {

      Il n'y a qu'une seule version de ce code dans ton thème.
      Supprime toutes les lignes qui se trouvent Entre la ligne :

      padding: $(image.border.small.size);

      Et le signe }

      Attention à ne pas supprimer la ligne qui commence par padding, ni le signe } !

      Et voilà ;)

      Supprimer
  59. Waouhhhhhhh ça marche, tu sais quoi Cath ? Et bien je t'adore ! Merci beaucoup pour toutes tes précisions. Je v de ce pas m'attaquer à ton nouveau tuto ;-)

    RépondreSupprimer
  60. Hello,

    tu va dire que je t'embête avec mes soucis, mais je viens de changer mon thème et j'ai des contours aux images, mais quand je cherche post-body img il ne me trouve rien du tout aurais tu une idée de comment je peux les enlever ?

    D'avance merci :)

    RépondreSupprimer
    Réponses
    1. Le problème vient de ton thème.
      Cherches le code commençant par :

      .entry-content img {

      Et supprimes les lignes qui commencent par :

      -moz-box-shadow:
      -webkit-box-shadow:
      box-shadow:

      Et voilà ! ;)

      Supprimer
    2. Et j'aime beaucoup ton nouveau thème, surtout la barre de navigation ! :)

      Supprimer
    3. Super ça fonctionne , un tout tout grand merci

      Oh merci c'est gentil :) , ça fait longtemps que j'en cherchais un qui me plaisait et c'est chose faite :)

      Supprimer
  61. Merci beaucoup pour ce tuto, mon blog est beaucoup plus jolie sans les bordures! c:

    RépondreSupprimer
  62. Ton blog est une perle! Ca a marché! Merci beaucoup!

    RépondreSupprimer
  63. Bonjour Catherine!
    Tout d'abord ton nouveau design est juste extra! Vraiment bravo! Ensuite j'aurais voulu savoir si tu pouvais me dire ou je dois déplacer les codes html du titre et de la date des articles pour qu'ils apparaissent en dessous des photos?
    Merci d'avance de ta réponse!

    RépondreSupprimer
    Réponses
    1. Merci ! :)
      Oulà, c'est vraiment compliqué car il faut pas mal de modifications du code HTML des articles... Il n'y a pas de réponse simple à ta question :/
      Par contre je peux le faire pour toi si tu veux absolument déplacer la date et le titre sous la première photo des articles. Envoie-moi un message avec le formulaire de contact sur la page Design ;)

      Supprimer
  64. Ok très bien ! :) je vais remplir le formulaire de contact alors! Merci beaucoup pour ta réponse ! :)

    RépondreSupprimer
  65. Merci beaucoup pour ce tuto ! Il m'a été très utile et tes explications sont très claires ! Merci encore :D ♥

    RépondreSupprimer
  66. Parfait ! Merci beaucoup

    www.louiseetclo.blogspot.fr

    RépondreSupprimer
  67. Merci. Super ce tuto ça marche bien et c'est très facile à réaliser!

    RépondreSupprimer
  68. C'est très bien expliqué et facile à réaliser, comme toujours avec tes tuto... mais cette fois-ci ca ne fonctionne pas :(

    RépondreSupprimer
  69. Alors je refais la manipulation pour la 4eme fois d'affiler et cette fois ca marche! Je n cherche pas a comprendre :) MERCI MERCI MERCI!!!!
    Maintenant en avant pour la barre de navigation :D

    RépondreSupprimer
  70. Tu es magique ! j'ai finalement réussis après quelques minutes de recherche et grâce à tes explications claires ! MERCIIIIIIII

    RépondreSupprimer
  71. Coucou, mes photos dépassent de mes articles ce qui est très moches! Comment puis-je faire pour régler mes photos aux marges de mon articles stp???

    RépondreSupprimer
    Réponses
    1. Pour limiter la largeur des photos pour éviter qu'elles ne dépassent de la zone d'article rajoute le code CSS suivant :

      img {
      max-width: 100%;
      height: auto;
      }

      Dans ton code HTML avant la ligne :

      /* Content

      Ensuite tu peux jeter un œil à cet article qui explique comment ajuster les images à la zone des articles : http://ladybirdr.blogspot.fr/2015/06/5-astuces-pour-un-joli-blog.html

      Supprimer
  72. MERCI MERCI MERCI !!!

    RépondreSupprimer
  73. 3ème commentaire que je te laisse...la lourde!
    Pourrais tu me dire ce que je dois supprimer sur mon blog? Car j'ai l'impression que "box-shadow" par exemple est écrit 18 fois dans mon code. Et la solution que tu as proposé ne correspond pas à mon code malheureusement !

    Bonne soirée :)

    http://www.mesmots-rient.com

    RépondreSupprimer
    Réponses
    1. Bonjour Lorenne,
      C'est à cause de ton thème ^^
      Mais en regardant tes articles je ne vois pas de bordure à tes images :/

      Supprimer
  74. Bonjour,
    Déjà merci pour ce tuto simple et clair, c'est la première que j'arrive ENFIN à rentrer dans le code HTML et à y trouver quelque chose (l'ancienne version était bien plus simple)...
    Mais je n'arrive pas à éliminer la bordure de mon image d'arrière-plan....Elle est en mosaîque, c'est une image qui se répète, et à chaque répétition horizontale, il y a une bordure blanche. Comment faire ?
    Merci d'avance.

    RépondreSupprimer
    Réponses
    1. Bonjour,
      La bordure vient de ton image. Il faut rogner les bords de ton image dans un éditeur de photo pour supprimer cette bordure ;)

      Supprimer
  75. coucou, j ai aussi ce fichu problème de bordure et malgré que ton tutto est super bien expliqué, j ai l impression que c 'est pas les même code.
    Pourrais tu regarder a ce qu'il faut faire, pour mon cas ?
    Merci d 'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour Sylvia,
      En regardant ton blog, tes images n'ont plus de bordure.
      Si tu veux aligner tes images au texte de tes articles, j'explique comment faire ici : http://ladybirdr.blogspot.fr/2015/06/5-astuces-pour-un-joli-blog.html

      Supprimer
  76. Coucou,
    moi j'ai un autre soucis, c'est que j'ai une ombre sur le fond du blog et j'aimerai pouvoir l'enlever mais je n'y arrive pas, comment faire stp ? ;)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Retrouve le code CSS qui commence par :

      .content-outer {

      Remplace la valeur de toutes les lignes commençant par :

      -moz-box-shadow:
      -webkit-box-shadow:
      -goog-ms-box-shadow:
      box-shadow:

      par none, comme ceci :

      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      -goog-ms-box-shadow: none;
      box-shadow: none;

      Supprimer
    2. Merci merci merci!!! je viens de t'envoyer un email pour te demander ça entre autre, je viens enfin de comprendre! (pour enlever cette fichue ombre sur des images sélectionnées)

      Supprimer
  77. Bonjour!
    Très utile ce tutoriel!
    Mais je n'arrive pas cependant à supprimer la ligne de points (ronds) gris, autour d'"Acceuil. Tu saurais comment faire?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Tu peux suivre mon tutoriel sur la modification de ces liens de navigation : http://ladybirdr.blogspot.com/2015/03/modifier-le-fond-et-lapparence-des.html

      Tu peux trouver tous mes tutoriels sur la page d'index Tutoriels, accessible dans mon menu ;)

      Supprimer
  78. Hey, je suis pleins de tes tutos pour créer mon blog et je te remercie vraiment car c'est une aide géniale ! Tout est super bien expliqué et surtout je vois que tu prends bien le temps de répondre aux gens qui n'y arrivent pas, c'est top. Bisous !

    RépondreSupprimer
  79. Bonjour, tout d'abord merci infiniment pour tes tutos qui m'ont aidé à avoir un blog digne de ce nom ^^
    J'ai une question: Lorsque je clique sur n'importe qu'elle image de mon blog, une modal s'affiche et fait apparaître l'image en plus gros. Je souhaiterais enlever ça. Comment je fais ? ^^ Merci d'avance ! :p

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Il suffit d'aller dans Paramètres > Publications et commentaires. Sous Articles, à la ligne "Exposer des images en mode lightbox" sélectionne Non.
      Enregistre en cliquant sur le bouton orange en haut à droite de la page et voilà ;)

      Supprimer
  80. MERCI ! c'est remarquablement bien fait, expliqué et quel plaisir de parvenir a reprendre un peu la main !

    RépondreSupprimer
  81. Merci pour le tutoriel génial

    RépondreSupprimer
  82. Bonjour,

    J'aimerais beaucoup retirer cette bordure de mes photos mais impossible.
    Je n'ai pas le même code que vous notez dans les explications du coup je ne sais pas comment m'y prendre, pouvez vous m'aider ?

    RépondreSupprimer
    Réponses
    1. Bonjour Elodie,
      Ton code qui contient les lignes pour la bordure des images commence par :

      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img

      Cherche cette ligne et tu trouveras les codes à modifier ;)

      Supprimer
  83. Bonjour,
    Cet article date un peu mais j'espère avoir une réponse car je ne trouve la solution nulle part ^^
    Je cherche à retirer la bordure de certaines images dans certains articles, je cherche donc à modifier le code HTLM de l'article mais je ne le comprend pas. J'ai fait quelques essais mais rien à faire, je n'y arrive pas.
    Sais-tu comment faire?

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Quand tu ajoutes ton image à ton article, clique sur le bouton HTML en haut à gauche de la page. Le code de ton image ressemblera à ceci :

      <div class="separator" style="clear: both; text-align: center;">
      <a href="https://lienblogspot.com/ton-image.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="https://lienblogspot.com/ton-image.jpg" width="320"></a></div>

      Le code que tu souhaites supprimer pour supprimer les bordures est :

      style="margin-left: 1em; margin-right: 1em;"

      Une fois ce morceau de code supprimé, clique sur le bouton Rédiger en haut à gauche de la page pour retourner dans le mode de rédaction de l'article. Et voilà ;)

      Supprimer
  84. Merci beaucoup pour ce tuto qui m'a bien aidée!
    Bisous!

    RépondreSupprimer
  85. Super simple, merci beaucoup pour ce tuto ! C'est vraiment plus joli sans la bande blanche je trouve.

    RépondreSupprimer
  86. Bonjour j'ai essayé à plusieurs reprise en vain pouvez vous m'aiguiller?
    J'ai réaliser également toutes les techniques que vous aviez donné dans les commentaires mais rien n'y fait!
    Merci d'avance :)

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Je vois que tu n'as plus de bordure autour de tes images. Par contre, tu as une marge autour des images qui créé un espace et les décale par rapport au texte.
      Tu peux supprimer cet espace en ajoutant le code CSS suivant :

      .post-body img {
      padding: 0 !important;
      }

      Avant la ligne suivante de ton thème :

      ]]></b:skin>

      Supprimer
  87. Merci beaucoup pour ce tuto super utile ! J'ai dû également effacer la ligne de code suivante pour que cela fonctionne (background: $(image.background.color);)

    RépondreSupprimer
  88. Bonjour, encore merci pour tout tes tutoriels !
    Cependant je n'arrive pas à enlever cette horrible bordure qui se situe entre mon menu et mon image d'en tête :(
    Peux-tu m'aider ? langagedefrancaise.fr
    Merci d'avance

    RépondreSupprimer
    Réponses
    1. Bonjour,
      Cela vient du fond de ton blog qui est gris.
      Tu peux rectifier ce problème en jouant sur les marges de ton en-tête. Retrouve ce code :

      header {
      background-color: #ffffff; /* Couleur de fond de l'en-tête */
      margin-top: -5px; /* Espace au-dessus de l'en-tête */
      }

      Remplace la ligne :

      margin-top: -5px; /* Espace au-dessus de l'en-tête */

      Par :

      margin-top: -35px; /* Espace au-dessus de l'en-tête */
      padding-top: 25px; /* Espace entre le bord de l'en-tête et son contenu */

      Et voilà ;)

      Supprimer

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

Je modère les commentaires 1 fois par semaine, mais je ne vous oublie pas ! :)

Newsletter

Tu veux recevoirinfos exclusives, news et ressourcesdans ta boîte mail ?
Lady Bird RedDesign et contenu par Catherine Surr
Mentions légales . Un blog créé sur Blogger