Pagina precedente | 1 | Pagina successiva

[faq] Crea e personalizza una skin

Ultimo Aggiornamento: 25/08/2014 16:50
Autore
Stampa | Notifica email    
25/08/2014 16:46
 
Quota
OFFLINE
Post: 15.264
Registrato il: 26/08/2000
Sesso: Maschile
- Admin unico -
FreeForumZone Admin
Vediamo come si può creare e personalizzare una skin per il forum.
Possiamo modificare la skin attuale del forum (vedi guida), creare una nuova skin da zero (vedi quida) oppure modificare una skin predefinita.
Per partire da una skin predefinita occorre prima associarla al forum, vai nella sezione Aspetto e clicca su Lista Skin.


Sulla pagina che si apre cliccare su Predefinite. Queste sono le skin predefinite di ffz, scegli quella che più si avvicina allo stile che hai in mente e cliccaci sopra per asegnarla a forum.


Siamo tornati nella pagina di modifica, ma ora la skin predefinita scelta è assegnata al forum e possiamo iniziare a lavorarci.
Il pannello per la modifica della skin è molto completo e permette di personalizzare tutto il forum, ma occorre un po' di lavoro e pazienza.
Analizziamo in dettaglio le varie opzioni che offre.
Partiamo dallo Sfondo. Questo è il primo parametro da considerare e impostare. Notiamo subito che ci sono due sfondi: Schermo e pagina!
Lo schermo è lo sfondo di tutto il forum largo come lo schermo del tuo computer, sul quale in genere possiamo applicare una immagine.
La pagina rappresenta il riquadro che contiene tutto il forum, scritte, menu e tabelle: generalmente è più stretto, non largo quanto lo schermo. Se applichiamo una immagine di sfondo allo schermo, la pagina sarà vuota... o eventnualmente colorata (magari di un colore semi trasparente).
Questa struttura è comune in tutto il pannello skin, quando c'è uno sfondo, puoi impostare una immagine di sfondo, un colore di sfondo (e come vedremo più avanti il colore del testo, dei link e dei link al passaggio del mouse).
C'è inoltre un link Opzioni che apre la finestra di impostazioni per l'elemento selezionato (per impostare le proprietà dello sfondo e, se presente, del testo)


Scegli uno sfondo cliccando su libreria prendendone uno che ti piace (alternativamente puoi cliccare su carica e inviarlo dal tuo computer).
Il pannello a questo punto chiede se vuoi rimuovere il colore della pagina (avendo impostato uno sfondo allo schermo è probabile che non vuoi nasconderlo con una pagina colorata!!!), clicca su SI.
Vediamo che lo sfondo ha anche un colore di sfondo oltre ad una immagine.
Il colore di sfondo sarà visibile solo dove non c'è l'immagine, oppure se l'immagine ha al suo interno delle trasparenze.
In questo momento l'immagine di sfondo viene visualizzata così com'è, mentre sarebbe opportuno adattarla alla dimensione dello schermo, clicca su Opzioni.
Se l'immagine è più piccola dello schermo, si vedrà solo in parte, possiamo quindi ridimensionarla Ridimensiona immagine in modo che:
1) si adatti e copra interamente lo sfondo lo schermo: cover) (ma potrebbe non venir visualizzata per intero)
2) si adatti per coprire la maggior parte dello schermo, ma senza venir tagliata: contain (l'immagine è tutta visibile ma potrebbero esserci dei pezzi di sfondo senza immagine)
Se preferisci la (2) dove non arriva l'immagine ci sarà il colore di sfondo. Oppure puoi scegliere di ripetere l'immagine orizzontalmente e/o verticalmente (tipicamente una immagine piccola, se non è una foto, si fa ripetere in entrambe le direzioni)
Importante anche l'opzione per fissare l'immagine allo schermo: se selezionata lo sfondo non si sposta quando la pagina scorre!


Ora Salva (se è la prima volta che salvi ti chiederà un nome per la skin).
Nella stessa sezione ci sono opzioni per impostare la spaziatura interna della pagina del forum. Passa con il mouse sopra l'immagine per capire come viene applicata.
Nella sezione successiva Dimensione pagina troviamo altre impostazioni per dimensione e posizionamento della pagina del forum.
Generalmente le impostazioni predefinite vanno bene, ma per far risaltare lo sfondo si può pensare una larghezza fissa, che è anche più leggibile con monitor grandi.


La sezione successiva Colori finestre e caratteri è la più importante e permette di impostare gli sfondi interni e tutti i colori del forum.
La prima cosa da fare è scegliere il colore di base: in alto sulla sinistra c'è la scala di colore, scegli quello che più si avvicina a ciò che hai in mente, e poi fai variare intensità e luminosità fino ad ottenere il colore giusto (c'è anche la possibilità di creare una skin scura cliccanso sull'apposito pulsante): il pannello si occuperà di trovare il colore giusto per ogni elemento del forum.


Se la skin prevedeva delle immagini di sfondo per i vari elementi, cambiando i vari colori, queste stoneranno, quindi clicca sui pulsanti rimuovi.
Ora possiamo già scegliere molte proprietà di base, tra cui lo stile dei bordi delle tabelle del forum (squadrati o arrotondati), ombre, bordi degli elementi esterni ed interni, spaziature, la dimensione ed il tipo di carattere da usare nel forum.


Analizziamo più in dettaglio lo schema della pagina. Per ogni tipo di sfondo che possiamo impostare (sia nel colore che come immagine, analogamente allo sfondo del forum), possiamo anche decidere il colore del testo, dei collegamenti (o link) e dei collegamenti evidenziati al passaggio del mouse: tutti elementi che hanno come sfondo lo sfondo scelto, subito a sinistra.


Ogni elemento di sfondo ha anche un suo menu opzioni, tramite il quale possiamo impostare tutte le proprietà dell'immagine di sfondo che abbiamo già visto, ma in questo caso possiamo anche impostare delle proprietà che agiscono sul testo come grassetto e sottolineato. Ecco quindi che si possono creare dei collegamenti che al passaggio del mouse diventano grassetto, sottolineati, oppure entrambi.
Ad ogni modifica ricordati di cliccare su OK.


Tutti i colori impostati finora sono pieni e nascondono l'immagine di sfondo, possiamo dare un effetto trasparenza tramite l'apposito comando.
Non appena questo viene impostato, noterete come tutti i colori di sfondo sono diventati semi trasparenti.
Si può anche agire sul livello di trasparenza dei singoli colori, per rendere più o meno visibile lo sfondo in determinati punti (ad esempio il colore di sfondo sul contenuto è probabile che lo si desideri un po' meno trasparente, il testo può risultare poco leggibile se l'immagine sottostante è troppo visibile): per fare questo basta semplicemente cliccare sul colore e nella finestra che appare, spostare il livello di trasparenza.


Ora ne sappiamo abbastanza per continuare a lavorare su questa pagina per un po' di tempo.
Potreste impiegare diverso tempo e vari tentativi con colori ed immagini prima di trovare il risultato desiderato.
Questo è il risultato finora ottenuto, con solo pochi minuti di lavoro:


Questo è però soltanto il pannello semplice della skin, esiste una modalità avanzata che permette di configurare molto più in dettaglio i vari elementi, ma dal momento che offre tante opzioni in più, è bene entrare in questa modalità solo quando abbiamo già definito la maggior parte degli elementi secondo i colori e lo stile che più ci piace.
Prima però vediamo qualche trucchetto e cosa si può fare con immagini e colori di sfondo.
Vediamo cosa succede se applichiamo delle immagini di tipo texture alla sotto-intestazione.
Clicca su libreria accanto allo sfondo della sotto intestazione, poi su texture. Qui puoi scegliere tra molte texture. Se non ne trovi una che ti piace puoi caricare una immagine dal tuo computer. Essendo le texture solitamente immagini piccole, occorre impostare anche la ripetizione della stessa tramite il pannello opzioni. Sistemiamo poi anche i colori di testo, e dei link. Clicca su OK e salva.



Vediamo il risultato delle ultime modifiche


In questo caso abbiamo scelto una immagine che stona con il resto del forum, proviamo invece un'altra cosa, le trame colorate.
Clicca su Libreria e scegli questa volta Trame. Queste sono tutte immagini semi trasparenti, e significa che diventa importante il colore di sfondo dell'elemento, perché si vedrà sotto l'immagine. Scegli una trama e poi eventualmente modifica i colori di sfondo, del testo e dei link.


Questo è l'effetto che si ha con le trame


Lo stesso metodo si può applicare con immagini semi trasparenti. Se non trovi la trama che più ti piace puoi crearne facilmente una con programmi di fotoritocco impostando la trasparenza dell'immagine (che deve essere salvata in formato .png).

Vediamo ora un altro strumento del pannello, utile per creare dinamicamente degli sfondi con sfumature: i gradienti.
La funzionalità gradiente è compatibile solo con i browser più avanzati (quindi gli utenti con browser tipo Inernet Explorer 8 vedranno solamente il colore di sfondo pieno).
Quando crei un gradiente questo si comporta come una immagine di sfondo, quindi puoi scegliere una immagine, o un gradiente, non entrambi.
Vediamo come, lavoriamo ora sul contenuto (che rappresenta, nella versione semplice di questo pannello, lo sfondo di cartelle dei messaggi).
Clicca su Gradiente: si apre una finestra inizialmente con una sfumatura blu e bianca.
Sulla sinistra abbiamo 2 colori attivi e due non attivi. Possiamo impostare fino a 4 colori per il nostro gradiente. Qui vediamo solo un gradiente semplice, scegli i due colori e vediamo come cambia la sfumatura: puoi anche spostare le barre laterali per cambiare il punto in cui il colore è pieno.


Giocando un po' su questi parametri e sui colori si possono fare dei gradienti molto belli.
Impostiamo anche una trasparenza sul secondo colore, in modo che l'effetto sia più uniforme con il resto della grafica.
Vediamo anche che sulla destra possiamo impostare il tipo di gradiente, che può essere lineare (linear), circolare (circular) o ellittico (elliptical). Per ogni tipo si può scegliere anche l'orientamento oppure posizione e dimensione del punto centrale.


Questo è l'effetto che si ottiene



-----------------------------------------------------------------------------------------------------

Se siete arrivati fino a qui, la vostra skin è quasi pronta e dovreste già conoscere tutti gli elementi del pannello; vediamo cosa offre in più la modalità avanzata, clicca sul pulsante in alto a destra.


La modalità avanzata offre molti strumenti in più, ma la logica di applicazione è la stessa. Si possono impostare immagini di sfondo scegliendole dalla libreria, caricandole direttamente o tramite indirizzo internet, impostare gradienti e colori con trasparenza. E' possibile impostare però molte più immagini e molti più colori per i vari elementi del forum.
Alcuni strumenti hanno poi delle opzioni extra.
Ad esempio per i bordi arrotondati si possono scegliere quanto farli arrotondati e quali angoli (si può scegliere di arrotondare solo un angolo, solo due, o fare ogni angolo diverso dall'altro).
Le ombre permettono di specificare più parametri (Es: la dimensione e la distanza in pixel dall'elemento).


Qui occorrerà molto tempo per raffinare la skin del vostro forum.
Scorri con calma sezione per sezione per capire cosa modificare.
Pagina -> Le impostazioni generiche di schermo e pagina e del forum
Testata -> L'intestazione del forum, visibile solo se opportunamente impostata da Forum -> Impostazioni -> Intestazione
Proprietà generiche -> proprietà generiche delle tabelle, sfondi intestazione e sottointestazione, trasparenze, bordi arrotondati
Sezioni -> sezioni varie del forum: percorso di navigazione, pulsanti, statistiche
Lista cartelle -> immagini e colori per gli elementi nella lista cartelle
Lista discussioni -> immagini e colori per gli elementi nella lista discussioni
Lista messaggi -> immagini e colori per gli elementi nella lista messaggi
Altri elementi -> collegamenti di cambio pagina, tag, utenti online, lista smile, caselle di testo
Bacheca -> colori e impostazioni della bacheca del forum

Non c'è spazio qui per spiegare in dettaglio tutte le opzioni, per qualsiasi informazione o aiuto chiedete pure al nostro staff!!!



Se siete esperti html e css potete anche modificare direttamente il css della skin generato dal pannello, cliccando sul pulsante Modifica CSS.
La modifica diretta è molto complessa, ed è sconsigliato farlo se non si è consapevoli di cosa si va a modificare.
Si consiglia l'uso combinato di questo pannello assieme agli strumenti messi a disposizioni dai moderni browser per analizzare gli elementi della pagina (quali ad esempio Firebug per Firefox, o quelli integrati nei browser stessi).


Per qualsiasi richiesta non esitate a contattare il nostro staff, che vi aiuterà certamente a creare la skin che fa per voi.

-----------------------------------------------------------------------------------------------------

Per quanto riguarda la sotto sezione Immagini e pulsanti, invece, potete leggere questa guida:
Imposta un set di smile, umori, immagini per la skin
freeforumzone.leonardo.it/d/10925297/Imposta-un-set-di-smile-umori-immagini-per-la-skin/discussi...

Si possono scegliere immagini, una lista di smile, e molto altro.

Ora la skin è pronta... non resta che segnalarla al nostro staff!
[Modificato da admin 25/08/2014 16:50]



Amministra Discussione: | Chiudi | Sposta | Cancella | Modifica | Notifica email Pagina precedente | 1 | Pagina successiva
Nuova Discussione
 | 
Rispondi
Cerca nel forum
Tag discussione
Discussioni Simili   [vedi tutte]
Crea il tuo forum gratis su freeforumzone (1 messaggio, agg.: 28/08/2014 15:28)
Imposta lo sfondo del forum (con blocco scorrimento e trasparenza) (1 messaggio, agg.: 21/08/2014 17:05)
Crea una cartella con permessi privati (es. power user) (1 messaggio, agg.: 21/08/2014 17:30)
Permetti l'accesso alla cartella ad un gruppo di utenti (1 messaggio, agg.: 21/08/2014 17:46)
Crea sottocartelle e riordina elenco cartelle (1 messaggio, agg.: 21/08/2014 17:54)
Imposta proprietà comuni per le cartelle (1 messaggio, agg.: 21/08/2014 18:04)

Feed | Forum | Album | Utenti | Cerca | Login | Registrati | Amministra
Crea forum gratis, gestisci la tua comunità! Iscriviti a FreeForumZone
FreeForumZone [v.6.1] - Leggendo la pagina si accettano regolamento e privacy
Tutti gli orari sono GMT+01:00. Adesso sono le 14:55. Versione: Stampabile | Mobile
Copyright © 2000-2024 FFZ srl - www.freeforumzone.com