[Sesta Lezione]Corso di Skin
Profilo e Input
Il profilo utenti e gli input, sono la parte finale della nostra skin, facili e veloci da modificare, vediamo qua di seguito il codice che ci appresteremo a modificare:
CODICE
/* PROFILO UTENTI */
.pagetitle {font-size: 18px; font-weight: bold; letter-spacing: -1px; line-height: 120%}
.profile .title2 {border: 0; border-bottom: 1px solid #FFF}
.profile .row1 {border: 0; background-color: #FAFAFA}
/* INPUT */
.textinput, .forminput, .input, .codebuttons {border: 1px solid #ADBAC6; background-color: #EAEAEA; color: #586D7C; font-size: 7.5pt; font-family: verdana, helvetica, sans-serif; vertical-align: middle}
.forminput {font-size: 11px}
.menu .textinput, .menu .forminput {background-color: #F4F6FC; border-left: 1px solid #B2B9C5}
.msg .textinput {background-color: #FAFAFA; color: #444; font-size: 8.5pt}
.msg .input, .msg .forminput {background-color: #F7F7F7}
Iniziamo da profilo, questa è l'immagine di riferimento:
Profilo.
abbiamo il nostro pagetitle che corrisponde al nome dell'utente nel profilo,quindi ne possiamo settare il colore,la grandezza e qualsiasi stile di carattere vogliamo, possiamo anche mettere dei padding per distanziarlo. il .profile .title2 possiamo editarlo come più ci aggrada, possiamo cambiare il colore di sfondo o mettere un immagine, semplicemente cambiando il codice in questo:
CODICE
.profile .title2 {height: 30px; background-color: #F4F4F4; background-image: url(LINK);background-repeat: repeat-x; font-weight: normal; color: #63B4BD; border: 1px solid #CFCFCF; font-family: arial; font-size: 10px}
Quindi ci basterà creare la nostra immagine da mettere nel title2, specificare l'altezza, il colore di sfondo (anche se sarà coperto dall'immagine) mettere il link ed infine settare il testo come più ci piace.
CODICE
.profile .row1 {border: 0; background-color: #FAFAFA}
il .profile .row1 è semplicemente da come vediamo nell'immagine il colore di sfondo dei vari riquadri/sezioni del nostro profilo, quindi ci basterà settarne il colore di sfondo.
Input
CODICE
/* INPUT */
.textinput, .forminput, .input, .codebuttons {border: 1px solid #ADBAC6; background-color: #EAEAEA; color: #586D7C; font-size: 7.5pt; font-family: verdana, helvetica, sans-serif; vertical-align: middle}
.forminput {font-size: 11px}
.menu .textinput, .menu .forminput {background-color: #F4F6FC; border-left: 1px solid #B2B9C5}
.msg .textinput {background-color: #FAFAFA; color: #444; font-size: 8.5pt}
.msg .input, .msg .forminput {background-color: #F7F7F7}
questa è l'immagine relativa agli input:
Input; li ritroviamo in diverse parti della nostra skin, come nello screen che vi ho fornito. in generale non è complesso modificare gli input, basta mettere il colore del bordo, del testo e dello sfondo, per i .codebuttons invece possiamo anche mettere un immagine per renderli con un effetto "bombato" ci basterà, come abbiamo fatto per il title2 del profilo, inserire nell'apposito codice, questo:
CODICE
background-image: url(LINK);background-repeat: repeat-x;
Congratulazioni, ora siete degli SKINNER!
