Skinning School: 7 Lezione - Statistiche e Messenger

Statistiche e Messenger

Incredibilmente siamo arrivati alla settima lezione, chi l’avrebbe mai detto! Mi sono arrivati molti messaggi privati, in cui mi domandavate alcune cose e sono felice ci sia questo “interesse” da parte vostra. Preferirei però, da ora in avanti, che postiate anche qua le vostre domande (anche che trattino di CSS e HTML in generale) per rendere tutti partecipi e di chiarire i dubbi una volta per tutti senza starmi a ripetere in MP.
Alla fine del corso non manca poi così tanto e, facendo due conti, penso che altre 3-4 lezioni possano bastare per avere un quadro più o meno completo della situazione.
Oggi vorrei riprendere dalle statistiche e dal messenger.

STATISTICHE



Come avrete visto, nella preview inziale abbiamo delle statistiche che non sono propriamente tipiche dello schema di forumfree, o meglio, sono “unite” come fossero un tutt’uno. A volte si pensa che gli schemi non conformi siano più difficili da fare, ma in realtà, come in questo caso, si tratta solo di togliere pezzi di codice. Vediamo come fare:
Elemento sicuramente di intralcio è il secondo mback che racchiude il titolo “statistiche”. Qui, come detto, si tratterà solamente di eliminare la barra e unire i due blocchi, ora separati. Identificare il selettore è molto semplice, esso è “.stats”.
Per eliminare il secondo mback, ci basterà impostare “display:none” sul selettore indicato, ovvero .stats .skin_tbl.bottom .mback, in questo modo:

.stats .skin_tbl.bottom .mback {display: none}

Una volta uniti i due blocchi statistiche, innalziamo la barra contenenti le informazioni relative alla presenza degli utenti. Per fare ciò aumenteremo il margin-bottom in questo modo:

#board .stats .top .mback {border-radius: 5px 5px 0 0;margin-bottom: 5px}

Eliminiamo or ail colore di background “solo” alle statatistiche, ovvero solo lo skin_tbl delle statistiche:

#board .stats .skin_tbl {background: transparent}

Infine per arrotondare il bordo del nostro blocco dovremo aggiungere un border-radius, a seconda dell’angolo che più preferiamo, io metterò 10px:

#board .stats {margin-top: 20px;border-radius:10px}

MESSENGER

Sistemate le statistiche possiamo andare a vedere più da vicino il Messenger.



Qualche nozione prima di iniziare la codificazione del messenger può esserci sempre utile nonostante molti selettori coincidano con quelli visti in precedenza per il blocco sezioni (vi consiglio di andare a dare un’occhiata a http://guidaclassi.skin.forumfree.it/):

Per quanto riguarda invece i tabs e il pannello di controllo posto sopra il messenger (Invio messaggi, Messaggio, Cartelle, Rubriche, Appunti) abbiamo diversi selettori:

I parametri che modificherò per il pannello sopra il messenger li riporto qui sotto (sono modifiche ai background e ai testi, quindi:

Infine andiamo a modificare la .list del nostro messenger modificando il background, nel solito #1a1a1a, e aggiungendo un border-top, in questo modo:

In questo caso sarà importante anche aggiungere un color adeguato a seconda dello sfondo che desideriamo, per non confondere le scritte. Anche qui (even) servirà per le righe di colore alternato (che per ora non desidero).

Infine diamo riguardo alla darkbar e al bottone di conferma posto all’interno.

CITAZIONE

PS: se vede la darkbar solo per metà completa/colorata vi basterà aggiungere il colore dell’ultimo pixel nel background del .title, .darkbar in questo modo:

CODICE

Background: url(http://dumpshare.net/images/5459644title.png) #afe0f7 repeat-x !important;

Si ammetto di essermene dimenticato prima!

Sistemiamo la colorazione del bottone attraverso il selettore .darkbar .forminput, in questo caso andrò a modificare solamente il colore di sfondo da #777 a 1A1A1A.
Questo sarà infine il risultato finale:



Con questo la settima lezione si conclude qui, qualsiasi approfondimento è ben accetto, postate e appena potrò, vi darò una risposta