vendredi 11 janvier 2013

Modifier ou supprimer les bordure des images

Beaucoup de webmasters sont agacés par ces bordures d'images ou encadrements que rajoute Blogger systématiquement à chaque fois qu'on insère une image... Quand mettront-ils enfin un paramètre avancé dans "Modèles" permettant de modifier cela ? Et même encore mieux, dans l'éditeur de messages...

Ceci concerne le "modèle simple" de Blogger. Il n'est pas dit que ça fonctionnera automatiquement avec d'autres.

Dans "Modifier le code HTML" (faites d'abord une sauvegarde, on ne sait jamais...), rechercher  (touche F3)le code suivant:


background: $(image.background.color);
  border: 5px solid $(image.border.color);

Et modifiez le nombre en rouge de 0 à ce que vous voulez.

Attention, cependant, si vous passez de 5 à 0 pixels, l'agencement de vos images risque d'en souffrir surtout si elles sont côte-à-côte. Dans ce cas, il vaut mieux aller dans "Personnaliser > Avancé > Images" et pour la bordure, mettre la même couleur que votre arrière-plan par exemple #333333. Pour un de mes blogs j'ai mis cette valeur aussi à l'arrière-plan de mes images. Cette couleur correspond en fait à mon arrière-plan principal.

J'ai donc conservé ma dimension de bordure d'origine mais je l'ai camouflée en lui attribuant la même couleur que le fond. Ainsi, mes images côte-à-côte n'ont pas bougé.

Voici le blog sur lequel j'ai fait cette manip'. Comme il est en construction, ce n'est pas sûr que la configuration des images ne changera pas dans les prochaines semaines mais c'est peu probable: http://la-maison-de-leon.blogspot.fr/

Si vous avez des images GIF ou PNG avec des parties transparentes et qu'elles apparaissent avec un fond inattendu, le fait de mettre la même couleur à l'arrière-plan des images que celui de l'arrière-plan principal résoudra le problème.

10 commentaires:

  1. bonjour,

    j'i essayé de trouver le background dans les codes html..
    mais impossible.
    soit c'est moi qui suis malvoyante mais j'avoue avoir fait le tour plusieurs fois.
    Je me demandais également dans quelle partie on modifie les codes, parce que moi quand je clique sur modifier le code html, je tombe sur acceder au widget et la il y a html1/html2/ etc..
    est ce la qu'on change le code ou ailleurs??

    Merci..

    RépondreSupprimer
    Réponses
    1. Désolé Megi,
      je viens seulement de voir votre message :-( et on est le 9 mai! Et depuis, l'éditeur HTML de modèles de Blogger a bien changé!
      Pour faire une recherche, il faut faire Ctrl+F au clavier puis Entrée pour chercher les autres éventuelles occurrences. Ne pas utiliser F3 qui est bogué.
      Dans le nouvel éditeur, avant de faire une recherche, il faut d'abord faire Ctrl+a pour tout sélectionner, Ctrl+c pour copier et Ctrl+v pour (re)coller. Ainsi, tout le code sera développé et la recherche pourra se faire dans de bonnes conditions.
      Je viens de le faire sur un de mes blogs et pas de problème, j'ai trouvé la ligne de code recherchée...
      Il est possible que cette expression ne se trouve pas dans votre modèle, dans ce cas essayez de trouver quelque chose de ressemblant avec "image.background.color" par exemple (sans les guillemets). Mais attention! car vous allez en trouver plusieurs identiques. Il faudra y regarder à deux fois avant de faire la manip.
      "HTML1" et autres sont généralement des widgets que vous avez créé vous-même avec le widget HTML-Javascript.
      Pour modifier le code, je ne vois pas bien où est votre problème, il suffit de le modifier dans la fenêtre où se trouve le code... :-). Cependant, avec le nouvel éditeur, il arrive que le code ne s'affiche pas du premier coup. Il faut dans ce cas taper F5 pour tout rafraîchir et là, le code s'affiche.

      Supprimer
    2. Ooops! J'ai fait erreur, votre message n'est pas si vieux que cela... Donc, il s'agit bien du nouvel éditeur.
      Je précise aussi que chez moi, la recherche par F3 est buguée mais je suis sous Google Chrome et Linux. Il est possible que ça fonctionne sous Windows.

      Supprimer
  2. Bonjour, je viens de créer mon blog avec blogger et j'ai utilisé le modèle "Simple". Mais j'aimerais pouvoir retirer ces fameuses bordures grises qui encadrent les images que je veux publier. Je n'arrive pas à les enlever, dès que je change la couleur de bordure dans "Avancé" et que je la met en transparente, il y a toujours un cadre ombragé autour de mes images ... Savez comment y remédier ?
    Merci d'avance !

    RépondreSupprimer
  3. bonjour, je confirme, ça fait bien 2h que je cherche ce code et il n'existe pas. j'utilise l'option recherche et rien. Peu être que les codes ne sont plus les mêmes ?

    RépondreSupprimer
  4. Bonjour,

    J'aimerais aussi supprimer les bordures des photos de mes articles.
    Je suis allé dans modèle - modifier html et je n'ai pas trouvé votre code.
    Moi aussi je m'emmêle les pinceaux car il y a plusieurs catégories dans l'onglet "accéder au widget"
    Je ne sais pas dans quel widget il faut aller.

    Merci de votre aide

    Marine

    RépondreSupprimer
  5. Bonjour, en fait moi ce n'est pas l'encadrement des images mais celui des messages qui me gêne ! Blogger entour automatiquement chaque message de mon site d'une sorte de dégradé de gris (regardez à cette adresse par exemple : http://www.dessinsfantastiques.blogspot.com/search/label/Plantes ).
    Le problème, c'est que je voudrais que cet encadrement n'apparaisse pas pour certains messages (ceux tout en bas des pages et qui indiquent simplement le numéro des pages en fait, pour l'esthétique c'est mieux qu'ils se fondent totalement avec le background du site).
    Donc j'ai identifié le bout de code qui change ça, mais je ne sais pas comment faire pour qu'il ne soit pas attribué à certains messages... =/

    Voici le code :

    .date-outer {
    position: relative;
    margin: 30px 0 20px;
    padding: 0 15px;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -goog-ms-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -goog-ms-border-radius: 0;
    border-radius: 0;
    }

    Merci d'avance ! =)

    RépondreSupprimer
  6. Bonsoir,

    J'ai essayé votre astuce, en prenant compte de ce que vous avez noté sur votre dernier paragraphe mais comme Megi Xexo je ne trouve pas la ligne en question.

    Dans le code la partie "css" du thème contient ces lignes:




    C'est en changeant les valeurs "2px" et "5px" par "0px" que les cadres ont disparus chez moi.

    J'utilise également un modèle simple.

    RépondreSupprimer
  7. Pardon désolé, je me suis trompé de ligne, mon précédent message n'est pas bon, il s'agit des lignes:

    background: $(image.background.color);
    border: 1px solid $(image.border.color);

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

    Où j'ai remplacé pour les "px" par "0px" et maintenant ça fonctionne nickel, plus aucun contour ni ombre :)

    RépondreSupprimer
    Réponses
    1. Je cherche encore et impossible de trouver ce code ! J'utilise un code que je dois ajouter sur chaque photos de mes articles et c'est un peu embêtant :S

      Supprimer