Togliere o personalizzare il bordo dalle immagini nei post su Blogger


imageScrivo questo post per rispondere ai tantissimi che mi chiedono come eliminare il bordo alle immagini nei post. Premesso che consiglio sempre di utilizzare Windows Live Writer per scrivere sul blog, che tra i tanti problemi che risolve c’è anche questo, il bordo applicato alle immagini deriva sempre da impostazioni predefinite dei vari template che non possono essere personalizzate se non mettendo mano al suo codice HTML.

Questione di pochi secondi comunque, e già che ci siamo vediamo anche come personalizzarlo invece di toglierlo.

Il bordo nelle immagini dei post

Il template Minima è il più largamente usato dagli utenti, sia perché è il primo della lista (anche sul mio primo blog usavo il Minima Black), sia perché grazie alla sua essenzialità si presta maggiormente a personalizzazioni (tant’è che in genere i vari template non predefiniti sono derivati dal Minima). Ecco come appaiono le immagini pubblicate utilizzando questo template:

image

Con una leggera linea a delimitarne i bordi. Altri template utilizzano decorazioni diverse.

Eliminare il bordo alle immagini

Nel caso del Minima, il codice che definisce il bordo delle immagini nei post è il seguente:

.post img {
  padding:4px;
  border:1px solid $bordercolor;
  }

Cercatene la prima riga in Layout->Modifica HTML (ricordo la funzione di ricerca dei browser che si attiva con CTRL+F) e modificatelo così:

.post img {
  padding:4px;
  border:0px solid $bordercolor;
  }

Cambiando quindi 1px in 0px. Con questa modifica abbiamo cambiato lo spessore della linea, mettendola a 0. Salvando il template ecco come appariranno le immagini:

image

Cioè senza bordo, o meglio con bordo invisibile.

Per completezza d’informazione, aggiungo che all’interno del codice che abbiamo trovato una riga definisce lo spazio lasciato tra le immagini e il testo:

.post img {
  padding:4px;
  border:1px solid $bordercolor;
  }

Aumentando o diminuendo quel 4px, aumenteremo o diminuiremo questo spazio.

Se non riuscite a trovare il codice da modificare nel vostro template, o non ha eliminato del tutto le decorazioni delle immagini, cercate questa riga:

]]></b:skin>

E subito prima incollate:

.post img { 
  border:none !important;
  }

E il gioco è fatto.

Modificare il bordo alle immagini

La proprietà border può essere cambiata per dare diversi aspetti al bordo alle immagini:

image

Quest’effetto l’ho ottenuto modificando il codice così:

.post img { 
  padding:4px;
  border:3px dashed #FF9900;
  }

La sintassi da usare per modificare la proprietà border l’ho trattata in questo articolo: si concentra su bordi di post ed altri elementi del template, ma quanto scritto per border è valido anche per le immagini nei post, basta seguire i vari esempi e applicarli al codice sopra.

Il ritratto che ho usato nell’esempio è il celebre Gli ambasciatori di Hans Holbein.

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

21 commenti:

Vinnie ha detto...

Tenebrae,

è possibile assegnare una misura fissa alle immagini utilizzando questo script della visualizzazione sintetica e automatica dei post? Magari prendendo solo la porzione riguardante l' immagine?

E' possibile mettendo mano all' HTML, fare in modo che il testo di tutti gli articoli pubblicati sia Giustificato?

Micaela ha detto...

ciao Tenebrae e grazie per avermi risposto. In pratica avevo provato ad esportare ed importare il blog creando un nuovo indirizzo. Al momento il problema non c'era, la mattina successiva si è presentato anche li. In sostanza ho modificato sia l'indirizzo e mail che la password di accesso e adesso sembra non avere più problemi! l'unica operazione che avevo fatto il giorno prima è stata di registrare il mio blog su networked blogs, credo che sia stato quello ad aver creato il problema. Grazie ancora

ñ¡¢ø£ëtå ha detto...

Grazie ..ho già eliminato il bordo dalle immagini! Addirittura cercavo di togliere anche le righe tra i widget nelle colonne ...cosi per deduzione ho risolto.

Però c'è un altro problema con i titoli degli elementi sul blog... non si visualizzano. Scrivo il titolo del elemento aggiunto ma non si vede niente. Ho modello Minima con tre colonne e non ho cercato mai di cambiare i titoli o cose varie.
Cosa si può fare?

grazie !

Nicoleta
Agenda di Nico

Acquolina ha detto...

Caspita...perfetto!
Grazie!
Francesca

Den ha detto...

Esiste un modo per ottenere l'effetto ombreggiatura senza WLW?

resiani-valresia ha detto...

come sempre ..sempre grande..continua così.. ti seguo sempre per migliorare i miei blog..:p

stella ha detto...

Scusa, aiutami.
Da stamattina non riesco ad andare su modifica post dal blog "stella".
Gli altri due blog tutto ok! Mi si segnala questo errore bX-mcgjci

Milla ha detto...

Grazie Orazio,chiaro come al solito! a presto

lella ha detto...

Ciao carissimo come va?
Oltre che per salutarti son venuta per invitarti a vedere il mio nuovo template by Adele.
Non certo x farti rabbia ;)) ma xkè ho piacere ke tu lo veda :)
un forte abbraccio :X
Lella

Tenebrae ha detto...

@vinnie: nel senso, in modo tale che le immagini appaiono sempre delle dimensioni che imposti, anche nella visualizzazione completa del post?

alla seconda domanda rispondo di si, è possibile, se ti interessa questa cosa contattami in privato

@micaela: il servizio è affidabile, forse il problema è altrove, ma l'importante è che si sia risolto

@nicoletta: che cosa strana... credo di aver capito il problema, ma dovrei farci delle prove... se mi mandi il template in posta ci do un'occhiata

@den: dici automaticamente per tutte le foto? si, ma non è una cosa immediata, con i CSS si può ottenere un effetto accettabile, basta utilizzare come bordi delle immagini che ricalchino le ombre.. dovrei fare delle prove, potrebbe essere l'idea per un post apposta

@stella: hai fatto modifiche ultimamente ai template di quei blog? comunque a volte anche il tempo aiuta, magari il giorno dopo è tutto risolto :)

@lella: vengo subito a vedere :)

Vinnie ha detto...

Tenebrae,

si esatto, però solo all' immagine di apertura articolo e non anche a quelle dimostrative che seguono dentro lo stesso post. Come hai fatto tu anche in questo articolo, quella di apertura piccola, le altre a dimensione normale (o selezionabile dall' autore).

Grazie :)

stella ha detto...

Ho tolto quasi tutti i gadget e ho cambiato modello, ma non si sblocca nulla...
Non posso postare post già pronti...
Ti ringrazio.

Den ha detto...

@ Tenebrae: a me serve per un'immagine in particolare, quindi (se cambia qualcosa) mi basterebbe anche il codice da inserire nel singolo post... Grazie!

keira_91 ha detto...

guarda te..io invece ho il problema opposto..non
ho il bordo ma lo vorrei xD
però se cerco su questo blog..sicuramente troverò la risposta U.U

marco castagneris ha detto...

Ciao Tenebrae, grazie infinite per i tuoi articoli, sono stati la base per rivoluzionare il mio blog!!!
Detto questo avrei bisogno di un'informazione sui bordi... Oltre che averli tratteggiati, lineari, spessi, sottili etc, è anche possibile creare bordi sfumati a delle immagini?

esercizidistile ha detto...

Ciao,
volevo chiederti..è possibile allargare le immagini modificando il template? mi spiego meglio..ho visto che modificando WIDTH di OUTER WRAPPER, MAIN WRAPPER e SIDEBAR WRAPPER ottengo che il blog sia a tutta pagina, ma le immagini del post rimangono piccole. Mi chiedevo se devo modificarle volta per volta quando le carico o se posso impostare una grandezza predefinita sul template.
Grazie!

esercizidistile ha detto...

Ciao! volevo dirti che sempre grazie al tuo blog, fonte inesauribile di preziosi consigli :), credo di aver risolto! ho trovato il tuo post in cui parli di Windows Live Writer....! GRAZIE mille!

admin ha detto...

ciao volevo chiederti, le immaigni hanno uno sfono che crea un'ombra sul fondo del blog, èpossibile eliminare qest'ombretta?
grazie

方松腾 ha detto...

cheap jordans
michael kors outlet online,michael kors,kors outlet,michael kors outlet,michael kors handbags,michael kors outlet online sale,michael kors handbags clearance,michael kors purses,michaelkors.com,michael kors bags,michael kors shoes,michaelkors,cheap michael kors
mulberry handbags
tory burch outlet online
swarovski crystal
canada goose coats
toms outlet
michael kors factory sale
giuseppe zanotti sale
nba jerseys wholesale
fitflops shoes
hollister pas cher
longchamp outlet online
cheap mlb jerseys
swarovski outlet
swarovski outlet

dong dong23 ha detto...

ray ban wayfarer
michael kors
louis vuitton outlet
gucci outlet
air jordan pas cher
supra shoes
nike sb shoes
adidas outlet store
coach outlet
hollister clothing
kevin durant shoes 8
christian louboutin sale
michael kors outlet
designer handbags
toms shoes
coach outlet
oakley sunglasses
coach outlet
michael kors bags
coach outlet
nike air jordan
kobe 9
lebron james shoes
ray ban
louis vuitton handbags
ray ban sunglasses
fitflops sale clearance
coach outlet
nike roshe run
true religion outlet
cheap jordans
ray ban sunglasses
louis vuitton outlet stores
abercrombie
cheap nfl jerseys
rolex watches outlet
lebron james shoes 13
michael kors purses
michael kors outlet
ray bans
20165.4wengdongdong

raybanoutlet001 ha detto...

colts jerseys
michael kors handbags
nike roshe run
cowboys jerseys
49ers jersey
texans jerseys
cheap oakley sunglasses
jordan shoes
cheap nfl jerseys wholesale
armani exchange


Prima di lasciare un commento, leggete qui

Posta un commento