5 [Quinta Lezione], Modifichiamo Il Messenger

[Quinta Lezione] Corso di Skin
Modifichiamo Il Messenger.

La parte di cui ci occuperemo oggi è proprio il box dei messaggi, quando noi andiamo a vedere se abbiamo nuovi mp, quello è il nostro messenger, è molto semplice la parte che lo riguarda e potete lasciarlo tra le ultime cose da fare XD il codice che studieremo è questo:



Il Messenger può essere diviso, rozzamente e banalmente, in due parti generali,
la parte destra con il box di tutti i messaggi che ci sono arrivati e la parte di sinistra, dove ci sta una colonna con vari voci. Per semplificare la visualizzazione di tutti i tag ho fatto questa illustrazione che vi spiegherò passo passo insieme al codice:



nella colonna di sinistra come già detto prima abbiamo delle voci, esattamente dei link, questo parametro ci regola il link come sarà quando ci passiamo sopra con il mouse.



in questo caso qua, il .row1 e incrociato il msg_main, potete anche separli ma per comodità li consideriamo insieme questa volta. il .msg_main è lo sfondo della colonna a sinistra, la parte sotto tutti quei link.




questa parte è abbastanza importnate,determinerà lo sfondo del box dei messaggi, quindi cercate di contrastarla sempre un pò dal resto del corpo,magari facendolo lo sfondo leggermente più chiaro e non scordatevi il bordo di farlo ben visibile :uff:







il title3 può essere lasciato semplicemente con un colore di sfondo uguale al row3 oppure leggermente più scuro, è possibile anche applicare un immagine di sfondo per migliorare la grafica del messenger, inoltre nel tag successivo è possibile aggiungere un bordo, in questo caso non c'è.

Il .Darkbar nell'immagine precedente non è presente in quanto lo ritroviamo quando stiamo andando a scrivere un messaggio, è una sorta di title,infatti spesso si usa un immagine di sfondo uguale al title, ma è possibile lasciarlo anche semplice, in ogni caso se volete differenziarlo dal title3, basterà dividerli e metterli singolarmente ognuno per i fatti suoi XD tipo:




In Ogni caso ecco un'immagine che vi fa vedere precisamente dove trovate il .darkbar, inoltre vi anticipa altri tag, come il codebuttons,forminput e il textinput.



I restanti Tag, potete modificarli a vostro piacimento.