sabato 9 febbraio 2013

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".


42 commenti:

  1. Ragazza mia, sei un mito!! Non mi aspettavo tanta celerità e precisione. Grazie mille!! Ti faccio sapere Ciao Moni

    RispondiElimina
  2. Ho fatto ed è tutto perfetto... Proprio come lo volevo io! Grazie mille e buona domenica Ciao Moni

    RispondiElimina
  3. No, davvero! Per questo post ho dovuto cercare in rete, sapevo che si poteva fare perché ricordavo di averlo letto da qualche parte. Ho cercato di semplificare al massimo e ho provato prima a vedere se i due trucchi funzionavano, tutto qua!

    RispondiElimina
  4. Ciao Lucia, il mio problema è un'altro: si tratta sempre di un alone, ma il mio è sopra l'header ed è di un'antiestetico celestino. Come posso eliminarlo? Ho provato a seguire le tue indicazioni sulla procedura dell'alone intorno al corpo centrale, ma non ci sono riuscita (non mi appaiono proprio quelle righe di codice da cancellare). Mi sapresti aiutare?
    Grazie mille
    Emanuela

    RispondiElimina
    Risposte
    1. Ho visto, credo sia un problema dello sfondo. Hai provato ad andare in Design/Modello/Personalizza e a vedere se nei colori di sfondo è impostato quel colore? Se sì sostituiscilo con l'opzione: trasparente. Fammi sapere.

      Elimina
    2. non capisco dove vedere se è impostato quel colore, puoi aiutarmi?

      Elimina
    3. Sono andata rivedere il tuo blog e non penso sia quello che ho detto, perché altrimenti il colore sarebbe continuo fin giù. Non è che magari hai caricato qualche immagine di sfondo e poi te ne sei dimenticata? perché quel color celestino non è continuo su tutta la pagina ma è solo nella parte sopra alla header. Non so che altro suggerirti, mi spiace.

      Elimina
  5. Ho provato eppure nell'html del mio blog sembra non esserci nè .post-body nè .post... Che fare?? Di html ne capisco un po', ho provato anche a cercarlo stringa per stringa ma sembra non esserci proprio, sono perplessa o.O Pensi di potermi aiutare? =(
    Baci,
    Ariel

    RispondiElimina
    Risposte
    1. Cara Ariel, invece di cliccare il tasto F3 prova con Ctrl+F. Sono sicura che in questo modo troverai quello che cerchi. E se ancora non ci riesci, fammi sapere e vedremo che altro si può fare. Intanto aggiorno questo post con questa soluzione.

      Elimina
    2. Ho provato proprio ora, ma il risultato è sempre quello, la barra di ricerca mi dice "Testo non trovato" :\ Non so proprio che fare...

      Elimina
    3. Il problema è che ultimamente la pagina del codice html di blogger è cambiata. Non c'è più, ad esempio, il pulsante Espandi modelli widget, e al suo posto ci sono altri pulsanti. Prova a cliccare sul pulsante "Vai al widget" e poi nel menu che appare cliccare su Blog1. Clicca sui triangolini neri che trovi in questa porzione di codice per espandere tutto il codice e cerca id='post' (questo deve starci per forza!). A questo punto riprova a cercare .post-body o .post col tasto F3 o con Ctrl+F. Se non lo trovi neanche così non so proprio che altro fare. Fammi sapere.

      Elimina
    4. Allora, ora sono riuscita a ritracciare le stringhe di html del post. Ora risulta come post.body (negli altri due modi non spuntava niente!). Domani mi guardo con calma il tutto, ma sembra un codice totalmente diverso da quello che mostri tu :\ Vorrei provare comunque, ma ho paura di incasinare tutto! *prende a testate la parete!*

      Elimina
    5. Guarda, tentare non nuoce. Per vedere se funziona puoi provare direttamente dal pulsante di anteprima che c'è ora nella pagina del codice e se non funziona ti basterà non salvare nulla e cliccare su indietro.

      Elimina
    6. Ciao cara, ti rispondo dopo millemila mesi! Purtroppo mesi fa rinunciai a mettere mano nel codice html e così mi sono dovuta sciroppare quei dannati bordini attorno alle immagini trasparenti :\ Ora però sto lavorando alla nuova grafica del blog e cambiando modello ho cominciato a vederci più chiaro. Ho trovato la dicitura .post-body ma non la dicitura ]]>. Ad ogni modo sono riuscita ad utilizzare il tuo codice semplicemente sostituendolo a quello che c'era già, invece di aggiungerlo soltanto! Ho pensato che magari poteva esserti utile per il futuro! Un bacione e grazie davvero!!
      Ariel

      Elimina
  6. premettendo che tu meriteresti una statua (graziegraziegraziegraziegrazie), sai come posso modificare la larghezza della colonna su cui figurano i post? ho applicato un template scaricato da internet ma non posso modificarlo come quello di prima ed essendo più stretto mi taglia le immagini più grandi. ti prego fai una delle tue magie :(

    RispondiElimina
    Risposte
    1. Ma davvero vuoi modificare la larghezza della colonna? Ho visto il tuo blog e la colonna è già abbastanza larga. O magari hai già trovato il modo di allargarla e quindi l'hai già fatto?

      Elimina
    2. lo so che è abbastanza larga però mi servirebbe un'altro mezzo centimetro perchè altrimenti se metto un'immagine un po' più grande mi taglia un pezzo (sul post che ho appena messo si nota la cosa in quelli di prima forse no)... ho provato un paio di modi ma non ci sono ancora riuscita :(

      Elimina
    3. Ho guardato il codice sorgente della tua pagina web. Fai questo tentativo ma prima salva il template onde evitare di fare qualche guaio irreparabile. Vai sul codice html del tuo template e cerca la riga n. 177 dove dovrebbe esserci scritto #Main-wrap, che sarebbe la colonna dei post. Più sotto, alla riga 180 trovi width:580px. Questa è la larghezza della tua colonna dei post. Aumenta quel valore, prova ad aumentare un po' alla volta, tipo 600 o 620, fino a quando la grandezza è quella giusta. Poi salva e dovrebbe andare. Se non va, fammi sapere. Anzi, fammi sapere in entrambi i casi.

      Elimina
    4. ce l'abbiamo fatta! :D ora il testo è vicinissimo alla colonna laterale, ma almeno non mi taglia le immagini! grazie infinite <3

      Elimina
    5. Magari diminuisci appena la larghezza e, un'altra cosa, usa il tasto "giustifica" per il testo dei post così risulterà un po' più ordinato.

      Elimina
  7. Ciao :) anche io ho questo problema del bordo alle immagini solo che nel mio blog non c'è nessuno di quei codici! Help :/

    RispondiElimina
  8. Ecco scusa mi correggo :) ho risolto! Però vorrei farti notare che questi codici non sono presenti in tutti i modelli blogger. Infatti solo cambiando modello sono riuscita a trovare questi codici! Baci :*

    RispondiElimina
  9. CIAO IO HO IL PROBLEMA SIMILE MA MI è DATO DALLA IMMAGINE DI INTESTAZIONE DELLA HOME PAGE CHE , PULRTOPPO NON MI RIMANE BEN CENTRATA, E A POCO SERVE INGRANDIRLA O RIMPICCIOLIRLA, SU QUALE CODICE SORGENTE HTML DEVO INTERVENIRE ???? ATTENDO TUE NOTIZIE GRAZIE MILLE

    RispondiElimina
  10. grazie mille per questo tutorial, mi è stato molto utile!

    RispondiElimina
  11. Grazie mille!!! Un tutorial utilissimo! :D grazie grazie grazie! :)

    RispondiElimina
  12. Ti ho trovata con google.
    Ho seguito le tue indicazioni e ho risolto il problema, grazie.

    RispondiElimina
  13. grazie mille! grazie a te ho eliminato quell'orribile bordo!

    RispondiElimina
  14. ç_ç oddio grazie, ti sarò sempre riconoscente! è una settimana che ci smanettavo su senza trovare una soluzione!

    RispondiElimina
  15. molto semplicemente
    G R A Z I E !!!

    :)

    RispondiElimina
  16. Ciao, io no riesco a togliere quel maledetto bordo... pur scrivendo il codice nella sezione giusta, rimane lì bello presente!!!
    Hai idee alternative? non so più che fare :(

    Grazie mille

    RispondiElimina
  17. Evviva ci sono riuscita! Non ho più i bordini! Grazie mille!

    RispondiElimina
  18. Ciao, io chiedo un aiuto! come si fa ad inserire un'immagine/ logo tra un post e l'altro?

    RispondiElimina
  19. Ciao! Ho eseguito alla lettera le tue indicazioni, non capisco come mai non riesca ad eliminare il margine attorno alle immagini help!! Prova a vedere qui se hai tempo! http://inartesy.blogspot.it/2015/09/fiocco-in-tela-con-cascata-di-pigne.html Grazie mille

    RispondiElimina
  20. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  21. Geniale. Gran bel post! Spiegato alla perfezione, pratico, e soprattutto utile. Grazie mille, ho risolto il mio problema! Maria

    RispondiElimina
  22. Grazie mille! Erano così brutte quelle ombre! ;-)

    RispondiElimina
  23. Non posso spiegare la gioia di riuscire finalmente a risolvere questo fastidioso problema...grazie di cuore!

    RispondiElimina