Come nascondere bordi, ombre e cornici nelle immagini di Blogger anche nella versione mobile.

Come eliminare bordi, cornici, ombreggiature dalle immagini di Blogger sia da desktop sia da mobile inserendo nel modello degli appositi CSS.

In alcuni template di Blogger ci sono dei CSS che inseriscono automaticamente dei bordi, delle cornici e delle ombreggiature in tutte le immagini che vengono pubblicate nei post. Questo non succede solo per i template scaricati dal web ma anche per quelli ufficiali di Blogger personalizzati con il Designer Modelli. Se si sono introdotte delle personalizzazioni nel template è sempre pericoloso andare su Modello > Personalizza per accedere al Designer Modelli perché si potrebbero perdere delle modifiche fagticosamente introdotte. Se lo si fa con circospezione dopo aver salvato il template e se in Modello > Personalizza > Immagini 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 di solito inserite anche nella immagine del Profilo, nelle icone dell'Elenco di Blog e in tutte le miniature in genere.

Vediamo nel dettaglio come procedere per nascondere cornici e ombre sia nella versione desktop sia nella versione mobile. Bisognerà creare dei CSS che eliminino in modo prioritario tali elementi utilizzando il tag !important. Possiamo operare solo nella versione mobile o solo in quella desktop o in entrambe.

NASCONDERE BORDI E OMBREGGIUATURE NELLA VERSIONE DESKTOP

Dopo aver salvato ilk template si va su Modello > Modifica HTML, si cerca la sezione <b:skin> intorno alla 12-esima 20-esima riga e si clicca sulla freccetta nera posta sulla sinistra per visualizzare tutto il codice. Con Ctrl+F 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;
}

Si salva il modello e si controlla che nelle immagini siano scomparse le cornici.

NASCONDERE BORDI E OMBREGGIATURE NELLA VERSIONE MOBILE

Gli screenshot precedenti sono stati scattati con lo strumento Screenfly che mostra anche da desktop come si vede la versione mobile di un sito. In molti template il codice appena mostrato cancellerà ombre e cornici anche nella versione mobile. Se invece volessimo cancellare ombre e cornici solo nella versione mobile  dobbiamo incollare con le stesse modalità quest'altro codice

.mobile .post-body img, .mobile .post-body .tr-caption-container, .mobile .Profile img, .mobile .Image img,
.mobile .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;
}

Si salva il modello e si controlla che il risultato sia quello desiderato. Nel caso in cui si vogliano eliminare ombreggiature e bordi sia su desktop sia su mobile e il primo codice funzionasse solo per il desktop non dovremo fare altro che incollare entrambi i codici uno dietro l'altro. Concludo ricordando che se si volesse pubblicare una immagine con bordi e ombreggiature dopo aver inserito questi codici nel modello dovremo aggiungere il tag !important al codice corrispondente.