20 luglio 2012

Come eliminare ombre e bordi dalle immagini di Blogger.

In taluni modelli di Blogger sono presenti dei CSS che inseriscono automaticamente dei bordi e delle ombreggiature in tutte le immagini che vengono postate. Questo accade per i template scaricati in rete ma anche per quelli ufficiali personalizzati con il Designer Modelli di Blogger.

Anche se si va su Modello > Personalizza > Immagini e si sceglie #FFFFFF per il colore del bordo e dello sfondo si possono ugualmente visualizzare delle cornici intorno a tutte le immagini. Queste cornici vengono inserite anche nella immagine del Profilo, nelle icone dell'Elenco di Blog e in tutte le miniature in generale.

Vogliamo in sostanza eliminare bordi e ombreggiature in questo modo
togliere-ombreggiatura

Per prima cosa occorre vedere nel modello quale sia la classe che determina l'aspetto degli articoli. Negli ultimi modelli è .post-body ma in altri più vecchi può essere .post. Si va su Modello > Modifica HTML e cliccando su F3 si controlla quale dei due tag sia presente.

Nel primo caso si cerca la riga ]]></b:skin> e, subito sopra, si incolla questo codice

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
    padding: none !important;
    border: none !important;
    background: none !important;
    -moz-box-shadow: 0px 0px 0px transparent !important;
    -webkit-box-shadow: 0px 0px 0px transparent !important;
    box-shadow: 0px 0px 0px transparent !important;
}

Nel secondo caso si sostituisce post-body con post. Si salva il modello. I bordi e le ombreggiature spariranno da tutte le immagini di tutti gli articoli che sono stati pubblicati o che lo saranno.
Se si utilizza Windows Live Writer per confezionare il post, si possono selezionare le singole immagini, andare su Strumenti Immagine > Stili immagini e cliccare su Nessuno

strumenti-immagini-windows-live-writer

Le altre opzioni sono Eredita dal blog e Ombreggiatura. Scegliendo Nessuno per lo Stile della immagine, nella maggior parte dei modelli si impedisce l'inserimento di bordi e ombreggiature senza bisogno di modificare il template. L'opzione può anche essere salvata come Impostazione predefinita in modo da non avere più bisogno di configurarla per ogni immagine postata.



23 commenti :

  1. grazie per l'articolo , solo una cosa mi è capitato che con alcune foto messe con Windows Live Writer non va via l'ombreggiatura nonostante abbia scelto opzione nessuno, questo solo con 3 foto , come mai , le altre non ho avuto problemi!

    RispondiElimina
  2. Grazie finalmente se sono andati via sti bordi!! Grazie Ernesto!

    RispondiElimina
  3. Grazie sempre! Quando ho un problema passo sempre da qua sicura di trovare soluzioni^^

    RispondiElimina
  4. Ciao, purtroppo pur incollando il codice non va via, sto impazzendo, cercando una soluzione, ma le ombre non vogliono andarsene.. :( questo è il mio blog,
    http://latelierdeitemplates.blogspot.it/
    come potrete ben vedere, togliere le ombre dalla cornice per la grafica del mio blog, è fondamentale.. come posso fare?

    RispondiElimina
    Risposte
    1. @CherylKristine
      Sarà che io non ho un gran senso estetico e per contro una vista non ottimale ma non vedo ombre di nessun tipo.

      Elimina
  5. Questo Blog è una B-I-B-B-I-A!!!!!!!!!!!! grazie mille,le spegazioni molto chiare e al contempo concise permettono anche ad una "trulla" come me di muoversi senza problemi ;).Grazie ancora

    RispondiElimina
    Risposte
    1. @Silvia+-+-+-
      Non essere così severa con te stessa :)

      Elimina
  6. FANTASTICO!!! indicazioni perfette non riesco ancora a crederci di avercela fatta a eliminare quei bordi orribili! :D

    xx
    www.pretpenser.com

    RispondiElimina
  7. Risposte
    1. @ tilli
      Prima salva il modello, poi cerca questo codice
      .post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
      .BlogList .item-thumbnail img {
      padding: 2px;
      background: #ffffff;
      border: 1px solid #ead1dc;
      -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);
      }
      .post-body img, .post-body .tr-caption-container {
      padding: 5px;
      }
      .post-body .tr-caption-container {
      color: #cccccc;
      }

      e elimina le righe con il bordo e lo sfondo cioè
      background: #ffffff;
      border: 1px solid #ead1dc;
      -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);

      P.S. Il blog preso in esame è ilmondoditilli.blogspot.it

      Elimina
    2. Ciao Ernesto, questo codice poi non ha funzionato sul blog in questione, però ho trovato questo... te lo lascio magari può essere utile per altri. Ciao e grazie.
      Codice CSS:

      img{
      box-shadow: none !important;
      padding: 0px !important;
      border: 0px !important;
      }

      Elimina
  8. Grandissimo, oramai non mi sforzo più a scorrere tra le ricerche google quando esce il tuo blog! Sei il mio guru!

    RispondiElimina
  9. Grazie mille! Abbasso i bordi!Già che ci siamo...grazie per tutti gli altri consigli e aiuti che mi hai dato....

    RispondiElimina
  10. Yeee! Anche io ci sono riuscita, grazie mille :)

    RispondiElimina
  11. grazie Ernesto, prendendo spunto un pò di qua ed un pò di la ho sistemato le immagini delle pagine :)

    RispondiElimina
  12. grazie 1000!!! Sei stato utilissimo!!!
    :-D
    S.

    RispondiElimina
  13. Finalmente mi sono decisa anch'io! Grazie mille :)

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Clicca nel link qui sotto Iscriviti per email per ricevere le notifiche di nuovi commenti al post.