REDAZIONE

A tutti i MyBlogger un bentornati sul nostro blog di Redazione! Oggi impareremo un trucchetto semplice e veloce per avere il totale controllo sulle immagini che fungono da link nei vostri articoli.

Alcuni browser visualizzano un contorno alle immagini quando queste sono cliccabili, ma non sempre l’effetto è esattamente quello che desideriamo. Come intervenire? In realtà è molto semplice, si tratta solo di aggiungere una riga di codice all’interno del foglio di stile.

Andiamo su “Presentazione” >>>  “Opzioni avanzate” e clicchiamo su “Modifica modello” accanto al foglio di stile. Nella finestra che si apre, nella parte “I tuoi CSS personalizzati” copiamo e incolliamo questo codice:

a img {

border-style: none;

}

Così facendo avremo eliminato il bordino da tutte le immagini. Se invece l’idea di una cornicetta non vi dispiaceva poi tanto sappiate che potete personalizzarla come volete! Ecco il codice necessario:

a img {

border-color: <valore>;

border-style: <valore>;

border-width: <valore>;

border-spacing: <valore>;

}

• Border-color sarà il colore espresso con il codice esadecimale html: es. #000000 è il nero, #FFFFFF è il bianco.
• Border-style è il tipo di bordino. Qui avete diverse opzioni:
• Border-width determina lo spessore del bordo. Il valore deve essere indicato in pixel (es. 2px).
• Border-spacing indica la distanza in pixel tra il bordo dell’immagine vera e propria e il disegno della cornice (es. se border-spacing: 3px; la cornicetta verrà disegnata a 3 pixel dal limite dell’immagine)

• None: nessuno; l'elemento non presenta alcun bordo e lo spessore equivale a 0.
• dotted: a puntini
• dashed: tratteggiato
• solid: continuo
• double: doppio
• groove:  in rilievo
• ridge: scavato
• inset: incassato
• outset: sporgente

Fantastico, abbiamo fatto un altro passo verso una comprensione più profonda e completa del nostro blog!! Come sempre, siate curiosi, sperimentate e ricordatevi sempre di avere la massima cura del vostro prezioso MyBlog … sicuramente i vostri lettori sapranno come premiarvi!

A proposito, grazie a tutti per i generosissimi complimenti che ci fate sempre sul blog di Redazione…cosa aspettate venite a trovarci anche su Facebook, il MyBlog caffè lo offriamo noi! XD

A presto,

la Redazione

Abbiamo visto in precedenza come personalizzare l’Header del nostro MyBlog. Ma se volessimo creare un Blog completamente personalizzato?!? Oggi impareremo come fare…

Continuiamo intanto l’esplorazione del web alla ricerca di programmi Open Source che ci facilitino nella gestione e modifica delle immagini: una nostra attenta lettrice ci ha segnalato Pixlr un divertente editor di immagini che non necessita alcun tipo di installazione è può essere comodamente utilizzato direttamente nella finestra del nostro browser!!

Per questo tutorial abbiamo scelto di partire dal template di MyBlog “Fumetto – 1 large”, ma la procedura ovviamente può essere applicata, con le dovute variazioni, anche per tutti gli altri…

Innanzi tutto apriamo una Anteprima del blog (cliccando sul link) che ci servirà da guida, per capire su quali elementi grafici stiamo intervenendo; poi cerchiamo nelle Opzioni avanzate e apriamo Modifica modello del Foglio di stile. Noterete che all’interno del codice ci sono una serie di URL di immagini, riferite agli sfondi dei vari elementi della pagina: header, Footer, Backgorund, ecc.

Se copiamo questi pezzi di codice e li incolliamo scegliendo l’opzione “Apri URL immagine” su Pixlr possiamo visualizzare l’immagine relativa e modificarla.

Ora viene il “difficile”… proviamo a metterci in gioco! Per prima cosa apriamo l’immagine dell’elemento grafico che vogliamo modificare (ad esempio l’header) e, in un'altra finestra (creando un nuovo file da URL immagine) apriamo una immagine che ci piace e che si adatti bene ad essere utilizzata come sfondo.

Una volta che abbiamo entrambe le immagini sull’area di lavoro possiamo trascinare il livello Sfondo di quella “nuova” nella finestra dell’header originale come illustrato nell’immagine seguente.

Rilasciando il pulsante del mouse creeremo automaticamente un nuovo livello nel file dell’header, contenente il nuovo sfondo.

Ora ridimensioniamo l’immagine (short cut: Ctrl + T) e posizioniamola come preferiamo. Per dare un aspetto più rifinito al nostro Header, useremo lo strumento maschera di livello, attivabile selezionando l’icona in basso a sinistra nel pannello Livelli.

Vedrete sparire l’immagine che avete appena sovrapposto a quella dell’header originale, ma niente paura: questa opzione ci permette di disegnare sulla maschera rivelando o nascondendo il livello a cui è applicata e per ora il nostro nuovo sfondo è nascosto. Prendiamo dunque lo “Strumento di disegno” nel pannello Strumenti (quello con l’icona del rettangolo e del cerchio colorati di giallo per intenderci) e scegliamo nelle opzioni in alto di disegnare un rettangolo coi bordi smussati e impostiamo il raggio di stondatura su 30 px. A questo punto clicchiamo e trasciniamo sull’immagine in modo da disegnare un rettangolo che ricalchi quello dello sfondo dell’header originale e quando rilasceremo vedremo riapparire proprio quella porzione del nuovo sfondo. Se dovessimo sbagliare e volessimo ripetere questa procedura basta digitare Ctrl + Z sulla nostra tastiera per fare un passo indietro e annullare l’ultima azione in ordine cronologico.

Il risultato dovrebbe essere simile a questo:

Ora procediamo ad aggiustare il colore dello sfondo per adattarsi alle tinte della nuova immagine: selezioniamo il Livello Sfondo (quello con l’header originale) e nella barra degli strumenti in alto scegliamo “Regolazione” > “Tonalità e saturazione”. Ora possiamo giocare un po’ coi valori di Tonalità (che sostanzialmente cambia la gamma cromatica) Saturazione, Luminosità e l’opzione Colora. Ecco le impostazioni che abbiamo usato noi:

Aggiungiamo adesso un paio di effetti di rifinitura: clicchiamo sull’icona “Stili di livello” e impostiamo un bagliore interno sul nuovo sfondo. Possiamo variare i parametri come desideriamo; nel nostro caso abbiamo impostato il bagliore in modo che andasse a definire una linea bianca di contorno dell’immagine.

Un altro effetto che possiamo aggiungere è un bagliore esterno, questa volta nero sfumato, per creare un effetto di ombreggiatura e creare un illusione di tridimensionalità della pagina.

Aprendo le varie immagini che costituiscono la grafica del blog avrete notato una che si presenta come una banda orizzontale molto sottile: si tratta dell’immagine che fa da sfondo alla pagina dei contenuti e che si ripete sempre uguale in verticale. La larghezza di questa immagine è uguale a quella dell’header, mentre l’altezza è di 10 pixel. Per crearne la nostra versione personalizzata senza rischiare di perdere gli allineamenti con l’immagine dell’header procederemo come segue:

Intanto salviamo i nostri progressi selezionando File > Salva… scegliamo il formato JPG (già impostato di default) e la qualità dell’immagine in uscita: valori bassi comportano un peggioramento della qualità dell’immagine, ma una minore dimensione del file, quindi caricamenti più rapidi…valori intorno ai 100kb possono andare bene dato che graficamente si tratta comunque dell’elemento più “pesante” della nostra grafica. Nominiamo il file e salviamo dove preferiamo.

Ed ecco il risultato: