Vai alla pagina precedente Vai alla pagina successiva Stampa questa pagina Torna alla Home Supporto italiano Supporto internazionale    
CAMBIARE LO SFONDO

Come possiamo cambiare lo sfondo al forum inserendo un'immagine oppure modificandone il colore? E' necessario agire sui fogli di stile (i cosiddetti CSS - Cascading Style Sheets cioé Fogli di Stile a Cascata - ved. questa guida) e di seguito vedremo le procedure per fare questi cambiamenti. Iniziamo con la procedura per inserire un immagine e in fondo alla pagina vedremo come cambiare il colore.


INSERIRE UN'IMMAGINE DI SFONDO

Se volete mettere un'immagine di sfondo dovete tener presente che esistono varie risoluzioni degli schermi e usare quindi un'immagine che possa soddisfare le risoluzioni più frequenti. Il mio consiglio è di usare una 1280x1024 (che va bene per gli schermi piatti da 17 pollici - risoluzione nativa: 1280x1024 - e per la maggior parte dei portatili di uso comune - risoluzione : 1280x800). Al momento è ancora molto utilizzata la risoluzione 1024x768 (potreste usare questa se volete risparmiare in Kb) ma nel tempo probabilmente prenderanno sempre più spazio risoluzioni maggiori; per avere un'idea ecco una statistica attuale per un sito con circa 60.000 visitatori (pagina originale in inglese)

Per inserire l'immagine di sfondo (una volta che hai deciso la dimensione ed hai la tua immagine) caricala nella cartella images del template che usi, che quindi nel nostro esempio è templates/mg_themes/images e poi...

APRI
templates/mg_themes/style_ice.css

TROVA

body {
background: #FFFFFF;
/*background: #FFFFFF url(images/ice/bg_body.gif) top left repeat-x;*/
margin: 0px 0px 0px 0;
padding: 0px 10px 0px;
}

SOSTITUISCI CON

body {
background: #FFFFFF url(images/tuo_sfondo.jpg) top center no-repeat;
margin: 0;
padding: 0;
background-attachment:fixed;

}

Sostituisci, ovviamente, a "tuo_sfondo.jpg" il nome dell'immagine utilizzata.
Il codice proposto permette di fissare l'immagine al centro in alto - parametri top center - e inoltre ne impedisce lo scorrimento tramite il parametro fixed (quindi è il testo a scorrere davanti all'immagine quando si fa lo scrolling della pagina).

Se vuoi cambiare qualcuno di questi parametri è sufficiente agire sul CSS. Il parametro repeat è indicativo se l'immagine deve o no essere ripetuta in verticale (repeat-y), in orizzontale (repeat-x) o se non deve essere ripetuta affatto (no-repeat) nel caso la visualizzazione sullo schermo sia più ampia della dimensione dell'immagine stessa. Se vuoi puoi cambiare il colore di sfondo (che nell'esempio è il bianco: #FFFFFF) con uno simile al background che usi.

Adesso è necessario aumentare gli spazi di visibilità dell'immagine, altrimenti resterà coperta quasi del tutto, vedi immagine sotto

Per togliere colori e immagini di sfondo del corpo del forum e del CMS fate quanto segue:

APRI
templates/mg_themes/style_ice.css

TROVA

#forumtable {
background-color: #FFFFFF;
border: solid 0px #333333;
border-width: 0px 0px 0px 0px;
}

SOSTITUISCI CON

#forumtable {
margin: 0;
padding: 0;
}

Il passaggio fatto può essere sufficiente, ma in alcuni template è bene togliere anche lo sfondo a forum-header (fate delle prove).

TROVA

.forum-header {
background: #E8EEF8 url(images/ice/bg_top_100.jpg) top left repeat-x;
padding: 0;
}

SOSTITUISCI CON

.forum-header {
padding: 0;
}


Fatte queste modifiche il risultato sarà quello sotto riportato (layout liquido su schermo con larghezza 1280).

Se volete che l'immagine utilizzata sia visibile negli schermi a risoluzione maggiore probabilmente dovreste prendere in considerazione l'idea di impostare un layout fisso (nell'immagine sotto a 990 pixel).

Infine se state utilizzando il tema di default esiste il problema che le sfumature laterali (evidenziate in rosso nell'immagine sopra) vanno bene solo in uno sfondo bianco, quindi...

1) Potete semplicemente cancellare i riferimenti alle immagini shadow_right.gif e shadow_left.gif dal CSS (di seguito sono citate le classi a cui tali immagini fanno riferimento).
2) Potete sostituire le gif che creano le sfumature su sfondo bianco ( templates/mg_themes/images/ice/shadow_right.gif e templates/mg_themes/images/ice/shadow_left.gif) con delle immagini in formato png, semitrasparenti, che vanno bene su ogni sfondo. In questo caso però l'effetto diventa interessante solo se lasciate lo sfondo di default di forumtable - ma si perde allora l'immagine sottostante - oppure se gli assegnate un'immagine semitrasparente (come vedremo qui).

Se optate per sostituire le gif in png scaricate le due immagini cliccando sull'icona sotto.

Scarica il file zippato con le due immagini png

Le due immagini che trovate nell'allegato sono: shadow_left.png e shadow_left.png.
Decomprimete le immagini e caricatele nella cartella templates/mg_themes/images/ice, poi aprite templates/mg_themes/style_ice.css e a questo punto eseguite i passaggi sotto riportati:

TROVA

.leftshadow{
background: url(images/ice/shadow_left.gif) repeat-y;
width: 9px;
vertical-align: top;
}

.rightshadow{
background: url(images/ice/shadow_right.gif) repeat-y;
width: 9px;
vertical-align: top;
}

SOSTITUISCI CON

.leftshadow{
background: url(images/ice/shadow_left.png) repeat-y;
vertical-align: top;
}

.rightshadow{
background: url(images/ice/shadow_right.png) repeat-y;
vertical-align: top;
}

NB: l'effetto sarà ben visibile su sfondo chiaro e molto poco su sfondo scuro!

Nel nostro esempio avremo il seguente risultato:

Inseriamo adesso una semitrasparenza sullo sfondo del corpo del forum

APRI
templates/mg_themes/style_ice.css

TROVA

#forumtable {
background-color: #FFFFFF;
border: solid 0px #333333;
border-width: 0px 0px 0px 0px;
}

oppure, se hai fatto le modifiche citate sopra nel tutorial, trova

#forumtable {
margin: 0;
padding: 0;
}

SOSTITUISCI CON

#forumtable {
background: url(images/semitrasparenza.png);
border: solid 0px #333333;
border-width: 0px 0px 0px 0px;
}

L'immagine semitrasparente va caricata in templates/mg_themes/images e la potete scaricate cliccando sull'icona sotto:

Scarica il file zippato con l'immagine semitrasparente

Fatti tutti i passaggi avrete un risultato simile a quello delle immagini sotto riportate.

 

CAMBIARE IL COLORE DELLO SFONDO

Vediamo adesso come cambiare colore allo sfondo. La procedura è molto semplice:

APRI
templates/mg_themes/style_ice.css

TROVA

body {
background: #FFFFFF;
/*background: #FFFFFF url(images/ice/bg_body.gif) top left repeat-x;*/
margin: 0px 0px 0px 0;
padding: 0px 10px 0px;
}

Cambia il colore dello sfondo ( #FFFFFF) con il colore che vuoi.

Il problema della visibilità del colore di sfondo è analogo a quello dell'immagine sopra trattato, infatti una volta ricaricato il file ed effettuato il refresh otteniamo solo la colorazione di due sottili strisce laterali perchè tutto il resto è coperto dallo sfondo del corpo del forum. In questo caso valutate se togliere o meno tale sfondo (oppure se semplicemente impostare lo stesso colore che avete usato per il tag BODY) e prendete in considerazione il layout fisso e la cancellazione o la sostituzione delle immagini sfumate laterali.