Skinning School: 8 Lezione - Tagboard e Profilo

Tagboard e Profilo

Benvenuti a questa ottava lezione. Ho ufficialmente deciso che le lezioni finiranno con la decima. In quest’ultima farò una lezione “speciale” riguardante tutto il blog, quindi abbastanza ricca di contenuti. Per la nona invece avrò riguardo a topic e sondaggi.
Veniamo ora a noi e alla terz’ultima lezione dedicata al profilo utente e alla tagboard. Partiamo da quest’ultima e vediamo come inserirla all’interno del forum.

TAGBOARD

Installare la tagboard è estremamente semplice. Anzitutto bisogna andare in AMMINISTRAZIONE e cliccare sull’ultimo link, ovvero FUNZIONI AGGIUNTIVE e aprire la voce TAGBOARD (la terza ad essere precisi).
Vi aprirà questa pagina:



Qui inserite il nome della tagboard e l’altezza in pixel che desiderate. Se non vado errato la misura standard della tagboard è di 100/150 pixel, la migliore, almeno dal mio punto di vista è di 200px. Scegliete infine dove verrà posizionata, se nella hompage (attivando l’opzione nella casella Homepage) o in una qualsiasi sezione (o più sezioni). Salvate e aggiornando vedrete comparire la vostra tagboard . Io per adesso la metterò nella homepage.
Noterete subito che l’mback, ovvero la barra della nostra tagboard è simile a quella del blocco sezioni. Questo perché mback è un selettore universale e comprende sia la barra del blocco sezioni, sia della tagboard, dei topic ecc…
Per una barra diversa vi basterà modificare questi parametri:

.tag .mback,.tag .mback_center, .tag .mback_left, .tag .mback_right

Individuiamo ora i vari selettori della tagobard:

Ora che abbiamo identificato i selettori principali andiamo a modificare il profilo. Come sempre vi consiglio di passare su http://guidaclassi.skin.forumfree.it
Inizierò modificando lo sfondo e il colore delle scritte del mio profilo attraverso il selettore .profile .skin_tbl, con background: #1A1A1A e color: #fff in questo modo:

.profile .skin_tbl {border-radius: 5px 0 5px 5px;background: #1A1A1A;color: #fff}

Per modificare il riquadro dove è presente l’avatar e il nickname andrò a modificare il .profile h2. In questo caso inserisco un il background avrà il colore dello sfondo, quindi #e5e5e5; saranno presenti due bordi, border-top e bottom: 2px solid#37A1D2.

.profile h2 {margin-top: 1.5%;padding: 10px;background-color: #E5E5E5;border-top: 2px solid #37A1D2;border-bottom: 2px solid #37A1D2;border-radius:5px}

Modifichiamo infine il colore dei link (questi contrastano con il colore dello sfondo, per ora) e del nickname. Per i link metteremo lo stesso colore che abbiamo usato per tutti i link del forum e con l’a:hover bianco (#fff); mentre per il nickname useremo il nostro amato #1A1A1A, con tahoma impostato a font-family principale.

.profile .nick {line-height: 1em;margin: 5%;color: #1A1A1A;font: 16px Tahoma, Verdana, Arial, Serif; font-weight: bold;text-shadow: none}
.profile a {color: #37A1D2}
.profile a:hover {color: #fff}


NB: vi ricordo che se volete applicare texture al posto del background a tinta unica vi basterà hostare l’immagine ritagliata del vostro sfondo (che si ripeterà o meno) e utilizzare background: url (URL IMMAGINE) repeat-x (orizzontale o no-repeat; in caso volete che si ripeti orizzontalmente e verticalmente, non inserite nessuna ripetizione).
Anche questa lezione si conclude qui, qualsiasi domanda è ben accetta. So che qualcosa potrebbe risultare poco chiaro o complesso ma vi assicuro che prendendoci la mano sarà tutto più semplice. Questi sono tratti abbastanza essenziali e sommari, per eventuali approfondimenti io sono qua.