[TUTORIAL] Creare un separatore di sezioni, By iSkin

« Older   Newer »
  Share  
view post Posted on 23/7/2011, 15:06     +1   -1
Avatar

PES Community's User

Group:
Member
Posts:
6,076
Reputation:
+1
Location:
Sulmona [AQ]

Status:
Anonymous


<div style="margin-top: -10px; font-size: 10px">Separatore Sezioni © iSkin



Separatore di sezioni v3

Tramite CSS è possibile creare un separatore di sezioni, che è diverso dal tool per dividere in Categorie.Il codice in questione è stato creato appositamente per grandi community che non possono permettersi il lusso di sprecare sezioni per questo abbellimento.Innanzitutto inseriamo nella sezione in cui vogliamo avere sopra il separatore di sezioni, questo codice:
CODICE
<div class="separatoresezioni">NOME SEPARATORE</div>
, in seguito inseriamo in "Modifica colori e stili", dove meglio preferiamo, questo:
CODICE
.separatoresezioni {background-image: url(http://skin.forumfree.net/invision_metalblack/tile_sub.gif); background-repeat: repet-x; height: 18px; width: 193%; border: 1px solid #C7CACD; border-top: 0 solid #000; font-size: 12px; background-color: #FFF; color: #7E8186; float:left; margin-top: -45px; margin-left: -43px; text-align: center}
#fID .bb {height: 85px}

Adesso analizziamo il codice:


Eccovi una breve spiegazione dei fattori per personalizzare il codice:
1) #fID - Sostituite "ID" con l'ID della sezione.Serve a indicare l'altezza della sezione, dovreste regolarla in base a ciò da cui è composta(grandezza testo, targhette, ecc...)
2) .separatoresezioni - E' il selettore principale, modificate i rispettivi attributi per la personalizzazione del separatore di sezioni[/CODE]
E' probabile che si verifichino degli errori di allineamento, potete risolverli aumentando/diminuendo il valore del "margin-top".

Guida e Codice esclusivi di iSkin, vietato copiare senza permesso o spacciare per vostra.
Se utilizzate la guida sarebbe gradito inserire questo codice, opzionale, nel box Gestione Codici HTML - In fondo al forum:
CODICE
<div style="margin-top: -10px; font-size: 10px">Separatore Sezioni © <a href="http://skin.forumcommunity.net/?t=34012206" target="_blank">iSkin</a> </div> <br></div>


Allego qui la V2, compatibile con tutti i browsers

Separatore di sezioni v2

Tramite CSS è possibile creare un separatore di sezioni, che è diverso dal tool per dividere in Categorie.Cominciando creando una sezione con questo nome:
CODICE
</a>NOME SEZIONE
In modo da dare un nome alla sezione potendo usare questo codice.Prima di fare ciò però ricordatevi di prelevare l'ID.In seguito date come descrizione della sezione il nome che volete che appaia come nome del separatore.Adesso passiamo alla parte più appetitosa della guida, il codice CSS:
CODICE
#fID .xx, #fID .yy, #fID .zz, #fID .aa, #fID .bb {height: 12px; background-color: #FFF; background-image: url(http://i498.photobucket.com/albums/rr346/Menynt/Senzatitolo-1.png)}
#fID .desc {color: #407E86; font-weight: bold; letter-spacing: -1px; font-size: 8pt}
#fID .xx, #fID .yy, #fID .zz {font-size: 0}
#fID br, #fID img {display:none}

Adesso analizziamo il codice:


Eccovi una breve spiegazione dei fattori per personalizzare il codice:
1) #fID - Sostituite "ID" con l'ID della sezione.Serve a indicare specificamente quale selettore va modificato, in questo caso quello della sezione.
2) #fID .xx, #fID .yy, #fID .zz, #fID .aa, #fID .bb - E' il selettore che determina lo sfondo del separatore.
3) #fID .desc - E' il selettore del nome che apparirà come titolo del separatore.
#fID .xx, #fID .yy, #fID .zz {font-size: 0} - Rimuovere le scritte aggiuntive dal separatore
4) #fID br, #fID img {display:none} - Rimuove i bottoni e gli spazi verticali.

Guida esclusiva di iSkin , vietato copiare senza permesso o spacciare per vostra.
Se utilizzate la guida sarebbe gradito inserire questo codice, opzionale, nel box Gestione Codici HTML - In fondo al forum:
CODICE
<div style="margin-top: -10px; font-size: 10px">Separatore Sezioni © <a href="http://skin.forumcommunity.net/?t=34012206" target="_blank">iSkin</a> </div> <br></div>
 
Top
Miloš '92
view post Posted on 23/7/2011, 16:07     +1   -1




grazie zio :D
 
Top
1 replies since 23/7/2011, 15:06   164 views
  Share