Visualizzazione post con etichetta bordi. Mostra tutti i post
Visualizzazione post con etichetta bordi. Mostra tutti i post

Pubblicato il 03/06/16 - aggiornato il  | 1 commento :

Aggiungere bordo arrotondato ai titoli dei widget di Blogger.

Ho appena ricevuto un commento in cui mi si chiede come contornare i titoli dei widget con un bordo arrotondato. Si tratta di una personalizzazione non semplicissima perché per una ragione che ancora non ho compreso la regola CSS dei titoli dei widget di Blogger è la stessa di quella della data.

Quindi se si utilizza il selettore del titolo dei gadget per aggiungere delle regole generali, verranno modificati non solo quest'ultimi ma anche la data, e questo spesso va contro le esigenze dell'amministratore del sito. Come soluzione si possono trovare gli ID dei singoli widget e applicare la regola in modo selettivo.



Pubblicato il 17/10/15 - aggiornato il  | Nessun commento :

Come arrotondare una immagine con Photoshop.

Volete pubblicare una immagine con i bordi arrotondati oppure volete estrarre da una foto solo la parte centrale e arrotondarla per renderla più originale? Se avete un programma di grafica non è particolarmente difficile fare questa operazione.

In questo post vedremo come si procede con Photoshop ma anche con il gratuito Gimp i vari passaggi sono più o meno gli stessi. Si parte naturalmente dalla interfaccia di Photoshop e si va su File > Apri per importare l'immagine da modificare. Per fare le cose con maggiore precisione possiamo anche operare sullo strumento di zoom nel caso in cui l'immagine fosse troppo piccola



Pubblicato il 01/09/15 - aggiornato il  | 8 commenti :

Come racchiudere in un bordo la sidebar, il footer, l'header o un widget di Blogger.

Nel precedente articolo abbiamo visto quello che è il codice da usare per modificare lo stile dei bordi e in questo vedremo come applicazione di quel codice un metodo per racchiudere o contornare con un bordo un qualsiasi elemento del nostro blog su Blogger.

Andando su Layout possiamo visualizzare le varie sezioni di cui si compone il nostro sito. Ciascuna sezione ha un suo corrispettivo selettore univoco che si trova facendole precedere dal simbolo del cancelletto ( # ). Si può quindi applicare il codice di un bordo a ciascuna sezione o anche a un singolo widget. I nomi delle sezioni sono visibili su Layout (navbar, header, crosscol, ecc)



Come personalizzare lo stile dei bordi in dimensioni, colori e forma con il CSS.

I bordi sono un elemento grafico presente in moltissime pagine web e per inserirli ci sono dei tag ben codificati. I bordi possono essere inseriti con un CSS inline a un singolo elemento per esempio un paragrafo con questa sintassi <p  style="border: groove #003366; 4px;">Questo paragrafo sarà contornato da un bordo</p> oppure a una immagine con un codice simile a questo

<img style="border: dotted #f00; 4px;" src="http://lorempixel.com/400/200"/>

I parametri colorati di rosso sono quelli che determinano lo stile del bordo. I codici dei colori ne determinano ovviamente il colore mentre 4px è lo spessore del bordo; dotted e groove sono gli stili e significano rispettivamente punteggiato e bordo a rilievo



Pubblicato il 08/10/14 - aggiornato il  | 4 commenti :

Mostrare le immagini con bordi e cornici animati.

Dopo aver illustrato come pubblicare le immagini su Blogger con delle cornici non solo utilizzando lo strumento del Designer Modelli ma anche operando con il codice direttamente nel template oppure solo in un singolo post adesso facciamo un passo ulteriore e vediamo come sia possibile inserire anche delle cornici animate.

Mi limiterò a prendere in considerazione solo la possibilità di postare l'immagine con bordi animati in un singolo articolo. Dobbiamo semplicemente creare una regola con i CSS per poi richiamare nell'HTML. Chi non abbia nessuna idea di quello sto dicendo può leggersi il mio ebook Guida all'HTML e al CSS che si può scaricare gratuitamente. 


Pubblicato il 17/05/14 - aggiornato il  | 9 commenti :

Inserire bordi o immagini tra i widget nella sidebar di Blogger.

In alcuni modelli personalizzati scaricati da internet nella sidebar o nelle sidebar spesso si visualizzano degli elementi di divisione tra i vari gadget. Si può trattare di semplici linee facenti parte di un bordo oppure anche di immagini ovviamente di dimensioni appropriate. Questa personalizzazione diciamo che è una evoluzione dell'altra che prevede la visualizzazione di widget con lo sfondo colorato.

Queste modifiche in realtà sono piuttosto semplici e possono essere utilizzate da tutti coloro cha abbiano un minimo di esperienza nella gestione del modello di Blogger. Prima di procedere con la lettura del post consiglio di consultare l'articolo in cui si tratta dello stile dei bordi visto che utilizzeremo proprio quei codici.



Pubblicato il 25/04/14 - aggiornato il  | 6 commenti :

Come inserire uno sfondo e un bordo nei contenuti dei post di Blogger.

In dei commenti ricevuti in questi giorni mi è sembrato di cogliere il desiderio di alcuni lettori di inserire uno sfondo e/o un bordo nei post di Blogger. Per poter sfruttare in pieno le possibilità offerte dall’HTML e dal CSS dobbiamo avere almeno una infarinatura di questi linguaggi di markup. Ricordo che si può scaricare gratuitamente il mio ebook dal titolo Guida all’HTML e al CSS e che si possono consultare i post sui codici dei colori e sullo stile dei bordi.

È possibile inserire bordi e sfondi in tutti gli articoli di Blogger oppure soltanto in alcuni di esssi. Nel primo caso si opera nel modello mentre nel secondo basta incollare un codice in Modalità HTML direttamente nel post.



Pubblicato il 16/08/13 - aggiornato il  | 1 commento :

Come inserire i bordi nel menù delle pagine statiche di Blogger.

Ho più volte scritto che la maggior parte delle idee sui temi degli articoli mi vengono leggendo i vostri commenti e quindi confrontandomi sulle personalizzazioni che richiedete e che ritengo possano essere interessanti non solo per un singolo lettore. Qualche volta mi sono cimentato nello scrivere anche degli "instant post" se ricevo una domanda che non mi consente per la sua complessità di rispondere nei commenti ma che mi dà l'input per l'argomento di un post.

È il caso di questo articolo nato  a seguito di chi mi ha chiesto come inserire due linee in alto e in basso al menù orizzontale delle pagine statiche di Blogger. Ricordo che tale menù viene a formarsi automaticamente dopo la pubblicazione delle Pagine e che si può scegliere di mostrare orizzontalmente in alto, verticalmente in una sidebar o decidere di non mostrare. Nell'articolo linkato mi ero occupato di come modificarne le dimensioni e di come centrarlo. Il menù delle pagine statiche può essere integrato anche con link esterni al blog. In sostanza vogliamo effettuare una modifica di questo tipo



Pubblicato il 29/03/13 - aggiornato il  | 2 commenti :

Come creare CSS per bordi arrotondati, gradienti e ombreggiature.

Nel precedente articolo abbiamo visto come creare dei fogli di stile per gradienti senza usare strumenti di grafica ma utilizzando l'estensione ColorZilla per Chrome e Firefox. I disegnatori web sono soliti creare, oltre che con le sfumature di colore, anche degli elementi con bordi arrotondati o con ombreggiature. Ci sono dei tool online che agevolano questo compito inserendo semplicemente i parametri per ottenere il codice già pronto e funzionante con tutti i browser più recenti. Un esempio è lo strumento Border Radius che genera il codice a partire dai raggi di curvatura dei vari angoli che possono anche essere tutti diversi.

CSS Matic è un tool più evoluto che ci consente di generare codici per gradienti, come ColorZilla, per bordi arrotondati (border radius), per texture e per ombreggiature (box shadow). Si clicca su uno dei quattro tool presenti in Homepage per iniziare


Pubblicato il 04/09/12 - aggiornato il  | 14 commenti :

Come nascondere sfondo e bordi in una immagine di Blogger.

Nei modelli di Blogger più recenti si possono personalizzare i colori dello sfondo e del bordo di tutte le immagini inserite nei post. Per configurare questi parametri, dopo aver salvato il template, si va su Modello > Personalizza > Avanzato > Immagini e si scelgono, utilizzando le apposite tavolozze, il Colore dello Sfondo, il Colore del Bordo e il Colore del Testo della Didascalia. Per rendere le modifiche effettive bisogna andare in alto a destra su Applica al blog.

Se non ci piacciono bordi e sfondi nelle foto possiamo selezionare il colore #FFFFFF per tutti e due i parametri. In alcuni modelli pur con queste impostazioni non si riesce a eliminare del tutto la cornice alle foto. Si può però aggiungere un CSS al modello per risolvere la questione in modo più radicale.



Pubblicato il 20/07/12 - aggiornato il  | 53 commenti :

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


Pubblicato il 25/05/12 - aggiornato il  | 6 commenti :

Come togliere il bordo alle immagini del blog.

In alcuni blog le immagini vengono postate automaticamente insieme a un bordo di dimensioni e colore spesso personalizzabili. Si può infatti andare su Modello > Personalizza > Avanzato > Immagini dove si può settare il colore dello sfondo delle immagini, il colore del bordo e quello della didascalia.

Bisogna ricordarsi di andare su Applica al blog in alto a destra per rendere effettive le modifiche. Questo vale per i modelli ufficiali di Blogger mentre per quelli scaricati da internet le cose sono più complicate. Per verificare lo stile con cui vengono pubblicate le immagini andate su Modello > Modifica HTML > Procedi e cercate con F3 .post-body img oppure .post img per i template più vecchi.

Il blocco di codice relativo sarà quello che determinerà l'aspetto delle immagini pubblicate. Ecco uno screenshot dei CSS presenti in un mio blog



Pubblicato il 15/04/11 - aggiornato il  | 3 commenti :

Come personalizzare l'aspetto dei link su Blogger tramite le pseudo-classi con selettori.

In tutti i modelli di Blogger c'è una classe che sovrintende all'aspetto dei link che si vedono nei post o nei widget. Più che di classe si dovrebbe parlare di pseudo-classe visto che non definisce un elemento ma un suo stato particolare. Per esempio la pseudo classe

a:link {color: #004488;}

inserisce la regola che i link non ancora visitati abbiano quel particolare colore. Un'altra pseudo classe sicuramente presente potrà essere così

a:visited {color: #800080;}

in cui la regola impone il colore del codice esadecimale per i link che sono già stati aperti. Ai meno esperti consiglio di leggere il post sui codici dei colori. L'altra pseudo classe utilizzata per i link è la seguente

a:hover {color: #FDBCB7;}



Pubblicato il 26/02/11 - aggiornato il  | 9 commenti :

Come separare i commenti nei blog su Blogger con bordi o immagini.

Dopo aver presentato la personalizzazione su come inserire i commenti dell'autore del blog in un rettangolo colorato ecco un altro trucco per rendere più vivace quell'area dei siti su piattaforma Blogger. L'obiettivo è quello di inserire un separatore tra commento e commento. Cominciamo con applicare un semplice bordo tra ognuno di essi. Andiamo su Design > Modifica HTML e cerchiamo la riga ]]></b:skin> quindi, immediatamente sopra, incolliamo questo codice

#comments-block .comment-footer {
border-bottom:3px double #940F04; /* Bordo dei commenti */
}

Le parti in rosso possono essere personalizzate e riguardano lo stile del bordo e il suo colore. I commenti saranno divisi tra loro da una linea orizzontale



Pubblicato il 09/01/11 - aggiornato il  | 6 commenti :

Come eliminare o ingrandire i bordi delle sidebar in Blogger.

Nei modelli di Blogger è quasi sempre presente una linea di divisione tra l'area del post (main-wrapper) e quella della sidebar (sidebar-wrapper) o delle sidebar, se ce ne sono più di una. Nei vecchi modelli si possono agevolmente modificare le impostazioni delle sidebar andando su Design > Modifica HTML e cercando il foglio di stile relativo alla sidebar. I fogli di stile (CSS) sono individuabili perché iniziano con un punto oppure con un cancelletto.

Se si ha una sola sidebar dovremo quindi cercare le righe .sidebar oppure #sidebar. Nel blocco di codice sotto di queste, ci dovrebbe essere il parametro border che si riferisce appunto alla linea di separazione. Ecco cosa si trova per esempio in questo modello



Pubblicato il 29/10/09 - aggiornato il  | 11 commenti :

Come eliminare il bordo dalle immagini se si utilizza l'editor avanzato di Blogger.

Questo articolo l'ho scritto con l'editor di Blogger invece che con Windows Live Writer in quanto è solo con la prima opzione che si presenta questa situazione che a qualcuno magari non piace. Se inserite un immagine ed il vostro blog ha come stile di default quello di inserimento dei bordi nelle immagini, tutte le vostre foto del blog le avranno.

Nel momento in cui passaste alla modalità HTML vi trovereste, per la foto inserita, di fronte ad un codice simile a questo
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAeN6gRzv_YKP5zyyNdfA4bx3dgBElj2p5UJKqOv5qFpx8j-ZPwVN1iLCmeKOr3Avr8ELVEVAfrruNNiREjAtnbsPrzcO9mF30dGoPRHVGi05RJuxko9PVjEW4Vp7usMhFKfhyphenhyphendrV3j8X/s1600-h/santarelli.jpg" imageanchor="1" linkindex="28" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAeN6gRzv_YKP5zyyNdfA4bx3dgBElj2p5UJKqOv5qFpx8j-ZPwVN1iLCmeKOr3Avr8ELVEVAfrruNNiREjAtnbsPrzcO9mF30dGoPRHVGi05RJuxko9PVjEW4Vp7usMhFKfhyphenhyphendrV3j8X/s320/santarelli.jpg" /></a>
</div>

 dove è presente l'attributo border="0" che però non significa affatto che il bordo non ci sia. Se lo vogliamo togliere dobbiamo effettuare una piccola modifica al codice dell'immagine andando in modalità HTML ed modificando il codice in questo modo
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAeN6gRzv_YKP5zyyNdfA4bx3dgBElj2p5UJKqOv5qFpx8j-ZPwVN1iLCmeKOr3Avr8ELVEVAfrruNNiREjAtnbsPrzcO9mF30dGoPRHVGi05RJuxko9PVjEW4Vp7usMhFKfhyphenhyphendrV3j8X/s1600-h/santarelli.jpg" imageanchor="1" linkindex="28" style="margin-left: 1em; margin-right: 1em;"><img style="border:none;" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCAeN6gRzv_YKP5zyyNdfA4bx3dgBElj2p5UJKqOv5qFpx8j-ZPwVN1iLCmeKOr3Avr8ELVEVAfrruNNiREjAtnbsPrzcO9mF30dGoPRHVGi05RJuxko9PVjEW4Vp7usMhFKfhyphenhyphendrV3j8X/s320/santarelli.jpg" /></a>
</div>

E' stata inserita la parte colorata in rosso style="border:none;".
Ripeto che questa personalizzazione vale solo se si usa la versione aggiornata dell'editor di Blogger e non un editor offline come WLW.

Le differenze tra le immagini non sarebbero visibili in questo post in quanto lo stile del blog presuppone immagini senza bordo



Pubblicato il 30/09/09 - aggiornato il  | Nessun commento :

Come aggiungere cornici, bordi e sfondi a tutte le immagini pubblicate in un blog su Blogger.

Nella maggior parte dei modelli non esiste uno stile particolarmente sofisticato che definisce il modo di pubblicazione delle immagini. In genere queste vengono viste esattamente come vengono postate con l'aggiunta al massimo di un bordo. Se si possiede un blog nel quale le foto hanno grande importanza e si vuole creare uno stile personalizzato si possono seguire le seguenti indicazioni

Si può cioè creare uno stile che consenta automaticamente di

  1. Aggiungere dei bordi alle immagini
  2. Aggiungere dello spazio tra bordo e immagine (padding)
  3. Inserire una cornice di sfondo tra bordo e immagine

E' chiaro che questa personalizzazione può essere interessante per blog con attitudine artistica e sarebbe assolutamente fuori luogo per un blog come questo che si occupa di informatica.

Per prima cosa andate a vedere se nel vostro blog è presente uno stile per la pubblicazione delle immagini. Recatevi su Layout > Modifica HTML e cercate una riga di questo tipo

.post img {

questo è l'inizio del foglio di stile che dà le istruzioni di pubblicazione. In un modello Sample Blog si trova per esempio questo blocco di codice

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

dove le due parentesi graffe rappresentano l'inizio e la fine dei parametri immessi. In altri template il blocco di codice relativo può essere anche sostanzialmente diverso. Da notare che, in questo caso, il colore del bordo è definito da $bordercolor; vuol dire che è presente come variabile e può essere cambiato nella sezione Caratteri e Colori. 4 pixel di padding significa che l'immagine disterà quel valore dal bordo in tutte e quattro le direzioni. 1 pixel di bordo è la sua dimensione mentre solid ne indica l'aspetto. Invece di solid potrebbe essere inserito double (doppia riga), dotted (punteggiato), dashed (tratteggiato), ridge (stile in rilievo).

Si possono inserire valori diversi e si può anche inserire un'immagine di background che si visualizzi nello spazio del padding cioè tra l'immagine e il suo bordo. L'immagine che si sceglie come sfondo deve essere necessariamente piccola e si riprodurrà automaticamente in tutte le direzioni. Ovviamente dovrà essere caricata in un hosting gratuito tipo Skydrive.

Gli esempi sono molto spesso più efficaci di qualunque trattazione teorica; quindi ho caricato questa immagine texture su Skydrive e ne ho acquisito l'URL.

Adesso ho modificato il codice dello stile delle immagini in questo modo

.post img {
  padding:15px;
  border:3px solid #003366;
  background: URL(URL_immagine)
  }

Se adesso si salva il template, qualsiasi immagine, anche quelle già pubblicate, avranno un aspetto simile a questa

immagine_cornice

Nel caso in cui in modello non esista la riga .post img {  si può sempre aggiungere il precedente blocco di codice cercando l'altra riga ]]></b:skin> e incollandolo immediatamente sopra.

Sono piuttosto scarso in quanto a gusto artistico e certo la maggior parte di voi saprà fare di meglio.



Pubblicato il 20/06/09 - aggiornato il  | 13 commenti :

Come racchiudere all’interno di un bordo e mettere un sottofondo colorato (background) ai nostri post su Blogger.

Questa è una personalizzazione piuttosto semplice che è indicata soprattutto per i blog che hanno un aspetto semplice e vogliono ravvivarlo un po’.

Andare su Layout > Modifica HTML e scaricare un modello completo per sicurezza. Cercare la seguente riga di codice cliccando su F3 o Ctrl+F

.post {

Troverete un codice di questo tipo

.post {
  padding-$startSide:20px;
  margin-bottom:20px;
  text-indent:12px;
  padding-$endSide:20px;
  line-height:22px;
}

Per aggiungere bordi e colore di sfondo basta aggiungere le seguenti righe colorate di rosso

.post {
border: 2px dashed #003366;
background:#FFFFFF;
  padding-$startSide:20px;
  margin-bottom:20px;
  text-indent:12px;
  padding-$endSide:20px;
  line-height:22px;
}

in cui le parti in blue possono essere personalizzate.

  1. 2 rappresenta il numero dei pixel del bordo
  2. dashed significa che il bordo è tratteggiato ma può essere sostituito da solid per una linea unita e dotted per una punteggiata
  3. I codici dei colori dopo il cancelletto possono essere scelti in funzione dei colori del nostro blog

Possiamo, nello stesso modo, personalizzare anche la data andando su

h2.date-header

troveremo un codice simile a questo

h2.date-header {
  border-bottom:none;
  font-size: 130%;
  text-align:$startSide;
  margin-top:20px;
  margin-bottom:14px;
  padding:1px;
  padding-$startSide:17px;
  color: $dateHeaderColor;
  font-weight: normal;
  font-family: Trebuchet MS, Verdana, Sans-serif;
}

 

che potremo modificare per esempio così

h2.date-header {
border: 2px dashed #003366;
background:#FFFFFF;
  border-bottom:none;
  font-size: 130%;
  text-align:$startSide;
  margin-top:20px;
  margin-bottom:14px;
  padding:1px;
  padding-$startSide:17px;
  color: $dateHeaderColor;
  font-weight: normal;
  font-family: Trebuchet MS, Verdana, Sans-serif;
}

con le stesse personalizzazioni precedenti. In questo caso anche la data sarà racchiusa in un bordo e avrà un colore di sottofondo. Salvate il modello e visualizzate il blog.



Pubblicato il 02/05/09 - aggiornato il  | Nessun commento :

Come mettere una cornice colorata e punteggiata ad una foto o immagine.

In una email mi è stato chiesto se fosse possibile inserire dei bordi ad una foto. Per mettere dei semplici bordi ho specificato che bastano le funzionalità di Windows Live Writer.

Con WLW bisogna selezionare la foto che si è inserita quindi andare su Margini Personalizzati>Bordi e scegliere quello che si vuole. In pratica si può scegliere tra 1 e 3 pixel.

image

Per fare delle cose un po’ più complesse dobbiamo invece operare sull’HTML.

Per prima cosa bisogna conoscere le dimensioni dell’immagine che si vuole incorniciare.

Niente di più facile visto che basta puntarci sopra il mouse che le visualizziamo senza problemi

dimensioni immagini

in questo caso sono 400x533 pixel come evidenziato nello screenshot.

Il passo successivo è di caricarla su un servizio gratuito di hosting come Skydrive. Se non sapete come fare seguite le indicazioni dell’articolo di cui al collegamento.

Per acquisirne l’indirizzo che la nostra immagine ha su Skydrive cliccarci sopra con il destro del mouse e scegliere Copia indirizzo immagine

url skydrive
Per inserirla nel blog dobbiamo andare in modalità HTML e copiare questo codice

<img style="border-bottom: purple 5pt dotted; border-left: black 5pt dotted; border-top: yellow 5pt dotted; border-right: red 5pt dotted" src="http://fr9sew.blu.livefilestore.com/y1pbRBi86oI-noddZbTfTaT4UOMm08o1LUy6_V7XCwuKXDUg0mEuSWJQYN5AEHhcE1K7ZAOukG-w3jTAC-pqUILIrOlHDoqoe4v/charlize_theron1_300_400.jpg" width="400" height="533" />

dove le personalizzazioni da fare sono

  • l’URL che è l’espressione lunghissima che comincia con http e finisce con jpg ed è quello dell’immagine copiato su Skydrive. Ovviamente mettete l’indirizzo della vostra immagine
  • Il nome dei colori in inglese per il sotto (bottom), sopra (top), sinistra (left) e destra (right)
  • Le dimensioni che sono quelle acquisite puntando con il mouse sul file immagine
  • 5pt è la larghezza in pixel del bordo. Ovviamente il numero 5 può essere cambiato a piacimento
  • dotted significa punteggiato

Ecco che cosa si ottiene in pratica con questo codice



In questa immagine ho messo 10 pixel di bordo perché 5 mi sembravano di poco effetto.