Come eliminare il bordino intorno alle immagini e le ombreggiature ai lati del corpo centrale del blog

Monica del blog Cosa bolle in pentola? mi scrive per cercare di risolvere 2 problemi del suo blog.

Il primo riguarda il bordo delle immagini: anche se lo impostiamo su trasparente resta sembra un fastidioso bordino grigio.

Il secondo problema riguarda quelle orribili ombreggiature che appaiono ai bordi del corpo centrale dei post e della sidebar quando si imposta su trasparente o bianco sia lo sfondo esterno che quello interno. 

Entrambi i problemi si possono risolvere solo agendo sul codice HTML.

1. Andiamo in Design/Modello e clicchiamo su Modifica HTML. Clicchiamo nell'area del codice e digitiamo Ctr+F si aprirà un campo di testo in alto a destra che ci servirà per trovare il punto in cui modificare il codice. In questo campo scriviamo .post-body e diamo invio.

Se nel codice apparirà post-body, evidenziato, andiamo allo step 2, altrimenti proviamo a scrivere nella stringa di testo solamente .post. In pratica bisogna capire quale dei due tag è contenuto nel nostro modello HTML.

2. Adesso sempre tramite il campo di testo, cerchiamo ]]></b:skin> e andiamo a copiare e incollare  subito sopra questa riga  tutto il seguente 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;
}

Oppure, se nel nostro modello il tag contenuto fosse .post, facciamo tutto come descritto allo step 2 ma copiamo e incolliamo questo codice invece del primo:

.post img, .post .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;
}

A questo punto andiamo a vedere l'anteprima e il bordino grigio intorno alle foto dovrebbe essere sparito. Salviamo ed è fatta. 

Per quanto riguarda invece il secondo problema posto da Monica, dobbiamo sempre andare in Design/Modelli e cliccare su Modifica HTML. Clicchiamo poi il tasto F3 della tastiera e nella stringa di testo che apparirà scriviamo .content-outer { 

Individuata la riga dove è presente il tag .content-outer {  cancelliamo le seguenti righe di codice che troveremo subito sotto di esso:

-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);

 Guardate l'anteprima, le due ombreggiature dovrebbero essere sparite. A quel punto Salvate e il problema è risolto! 

N.B. Prima di effettuare qualunque operazione ricordatevi sempre di salvare per sicurezza il vostro modello HTML dallo strumento Backup/Ripristino e poi cliccando su "Scarica il modello completo".