Guida alla creazione di un separatore sezioni

« Older   Newer »
  Share  
view post Posted on 16/5/2009, 03:11
Avatar

Senior Member

Group:
NB Developers
Posts:
19,328

Status:


Guida alla creazione di un separatore sezioni


Lo scopo di questa guida, è quello di mostrare la procedura da attuare ai fini di raggiungere quest'effetto (vedere tra la sezione 2 e 3) : http://esempio.skin.blogfree.net/

Come prima cosa, bisogna creare una nuova sezione che fungerà da separatore, tra le sezioni interessate.
Il nome della nuova sezione, dovrà essere
HTML
</a><i></i>

che servirà a nascondere il nome di questa, mentre quello che vogliamo mostrare deve essere inserito nella descrizione della stessa sezione. Nel nostro esempio abbiamo inserito semplicemente "Separazione".

A questo punto bisogna procedere sulla parte "estetica", andate quindi in modifica colori e stili e inserite questo, in fondo al codice:
CODICE
#f201143 img {display:none}
#f201143 .xx, #f201143 .yy, #f201143 .zz, #f201143 .aa, #f201143 .bb {SELETTORE .TITLE ; line-height: 80%}
#f201143 .desc {color: #XXX; font-size: 12px}
#f201143 .xx, #f201143 .yy, #f201143 .zz {font-size: 0; color: #YYY}
#f201143 .xx br, #f201143 .yy br, #f201143 .zz br {display:none}


Analizziamo ora questo codice.
Al posto di 201143, che è l' ID della sezione d'esempio, dovete inserire l' ID della vostra sezione appena creata.1
E' necessario effettuare tutte le sostituzioni affinché l'effetto sia quello desiderato.

Al posto di #XXX, bisogna inserire il colore HTML del testo del separatore, mentre al posto di #YYY dobbiamo inserire un colore che sia molto simile al colore dell'immagine/colore di sfondo del separatore.2

A questo punto cercate sempre in modifica colori e stili, il selettore .title{} e copiate tutto ciò che è racchiuso tra le parentesi graffe, al posto di SELETTORE .TITLE.
Questo serve per dare lo stile al vostro separatore.


1NB: Potete ricavare l'ID della sezione, entrando in una sezione qualsiasi del vostro forum e successivamente, aprire la sezione creata tramite il menù a tendina in fondo a destra della pagina.

2NB: Questo processo bisogna farlo al fine di avere una corretta visualizzazione con Internet Explorer che non è in grado di rimuovere completamente il testo con font-size:0

Edited by 1Dan - 17/2/2010, 22:56
 
Top
0 replies since 16/5/2009, 03:11   3829 views
  Share