Modifica dell’aspetto grafico del tema
9 Maggio 2011 in Foglio di stile, Lezione 4
Nei due videotutorial che seguono i primi approcci alla modifica del file style.css, responsabile della visualizzazione grafica del tema. Il consiglio è di aiutarsi con un paio di strumenti integrativi, da scaricare ed installare prima di operare le modifiche allo stile:
- Firebug, bella estensione di Firefox che consente di individuare lo stile associato alle diverse porzioni della pagina e di fare prove live di modifica: https://addons.mozilla.org/it/firefox/addon/firebug/;
- Contrast Analyzer, componente della barra dell’accessiblità, che consente di veririfcre i contrasti e, insieme, di conoscere il valore esadecimale di un colore: http://webaccessibile.org/articoli/contrast-analyser-versione-22/ oppure http://webaccessibile.org/articoli/la-barra-dell-accessibilita-versione-20/.
Primi ritocchi al foglio di stile. Prima parte
Cambiamento della dimensione del font nelle liste e in alcuni box (div) dell’home page. Attenzione: causa alcuni problemi di connessione, l’ultima parte è un po’ lenta.
Primi ritocchi al foglio di stile. Seconda parte
Modifica del file style.css, modifiche ad alcuni colori di sfondo.
Orazio ha detto 10 Maggio 2011
firebug sembra un ottimo strumento. Ho modificato lo stile e il codice HTML e ho visto il risultato in anteprima. Sono riuscito a rendere effettive le modifiche nel fogli di stile; non riesco a rendere effettive le modifiche all’HTML. Quale file devo andare a modificare?
Silvia ha detto 11 Maggio 2011
Ho fatto qualche modifica secondo il tutorial
http://alardiz.info/icbotticino/
Ciao
Silvia
Luisa Bossi ha detto 14 Maggio 2011
Sono riuscita a sistemare la dimensione del carattere relativamente a home-left, home right e sotto-hp, ma non riesco a trovare nel foglio di stile la parte di codice relativa all’elenco numerato “ol”. E’ tardi e, magari, la stanchezza fa la sua parte!
Grazie per l’aiuto.
Bdomenica a tutti!
Luisa Bossi ha detto 14 Maggio 2011
Ci sono riuscita!
Nella ricerca “ol ul” mi dimenticavo di digitare la virgola come elemento di separazione!
ciao
Silvia ha detto 15 Maggio 2011
Come si elimina il logo di “porte aperte” in alto a sinistra per sostituirlo con un altro?
Da modifica temi> testata
<a href="”>
però non ne sono sicura
Grazie
Silvia
Silvia ha detto 15 Maggio 2011
Come si elimina il logo di “porte aperte” in alto a sinistra per sostituirlo con un altro?
Da modifica temi> testata
però non ne sono sicura
Grazie
Silvia
Silvia ha detto 15 Maggio 2011
Come si elimina il logo di “porte aperte” in alto a sinistra per sostituirlo con un altro?
Da modifica temi> testata
<a href="”>
però non ne sono sicura
Grazie
Silvia
Silvia ha detto 15 Maggio 2011
no scusate…non riesco a visualizzare il messaggio in modo corretto
aurora mangiarotti ha detto 16 Maggio 2011
Un modo semplice è questo: devi creare un logo della tua scuola come immagine gif e nominarlo come quello di porte aperte “logo.gif”, quindi inserirlo nella cartella images del nostro tema [sostituirà quello originale. Devi stare attenta alle dimensioni altrimenti può non essere visibile. ovviamente devi inviarlo via ftp nella cartella images remota
ciao
PS: sto facendo esperimenti: http://lnx.bordoni.pv.it/wordpress/
Silvia ha detto 16 Maggio 2011
Grazie Aurora!! che bella la tua Home…
dunque il mio IC è in affanno per tantissime cose, quindi anche per il logo, perciò pensavo di utilizzare un’immagine evocativa di un ambiente educativo e poi seguirò le tue istruzioni. Verifica tu…
http://alardiz.info/icbotticino/
Come vedi siamo ancora appoggiati allo spazio web che gentilmente ha concesso in via provvisoria Alberto.
ciao
Silvia
maria antonietta micieli ha detto 17 Maggio 2011
non si installa la bara di accessibilità con IE 9 ,ma ho contrast color analyser va bene lo stesso?
admin ha detto 17 Maggio 2011
Sì, contrast analyzer va benissimo.
Per la barra dell’accessibilità so che a breve sarà disponibile la nuova versione in italiano.
Intanto è già disponibile in lingua inglese: http://www.paciellogroup.com/resources/wat-ie-about.html
maria antonietta micieli ha detto 17 Maggio 2011
ciao Alberto ho modificato un po’…qua e là, un po’ seguendo il tutorial , un po’ a naso:-)
http://lnx.circolobinasco.it/sitowp/
non sono molto soddisfatta, avrei voluto fare un’altra cosa con la topbar arancione ….ho salvato la prova poi te la invio via e-mail.
Lo sfondo lo vorrei con le sfumatore ma un giallino chiarissimo, ma dovrei provare con firework.
So già che l’arancione non supera il contrasto e va be’ il titolo è grosso!
Intanto ho fatto un po’ di pratica con firebug poi con calma vedrò di sistemare
aurora mangiarotti ha detto 18 Maggio 2011
ciao a tutti, ma in particolare ad Antonietta!
Vorrei sapere qualcosa di più sull’arancione (in che senso non supera il contrasto?). I colori della mia scuola sono il bordò e l’arancione per questo pensavo di colorare di arancione la right bar.
admin ha detto 18 Maggio 2011
La verifica del contrasto viene eseguita attraverso un apposito programma che consente di valutare, attraverso due algoritmi, le differenze di colore e di luninosità tra testo e sfondo: http://webaccessibile.org/articoli/contrast-analyser-versione-22/.
L’arancione, purtroppo, è un colore che è difficile da abbinare.
aurora mangiarotti ha detto 20 Maggio 2011
Grazie!
ciao
maria antonietta micieli ha detto 22 Maggio 2011
Ciao Aurora carissima,
Scusa ma in questi giorni sono stata presa da altre attività didattiche urgenti (lo spettacolo) ma ti ha già risposto Alberto, anch’io volevo usare i colori del logo e colorare la topbar arancione ma difficilmente passa il test di contrasto con le scritte, tu fai delle prove comunque Contrast anlyser con firebug.
Un abbraccio
anna ha detto 19 Maggio 2011
– Vorrei cambiare la scritta in alto a dx
– vorrei linkare alla home tale scritta ma non come intervenire
– come inserire le immagini in alto a sx nella testata
– e poi come si fa una casella di testo con i bordi e come visualizzare una tabella.
A presto grazie
maria antonietta micieli ha detto 24 Giugno 2011
ho cambiato i colori ,c’è ancora qualcosa da sistemare
http://lnx.circolobinasco.it/sitowp/