Skinning for Dummies [lezione 4]

Adesso ci appresteremo a modificare l'aspetto delle discussioni della nostra Skin. Come potete notare dallo screen ogni selettore che ci apprestiamo ad editare modifica una precisa parte del topic.

Come potete notare dall'immagine i due top e i due bottom servono a modificare la parte con il nickname, la data d'invio della discussione e i diversi bottoni "cancella - modifica - quota" (nella parte superiore) e i bottoni per contattare l'utente che ha postato la risposta oltre al tasto per tornare in cima al topic e il quadrato per la selezione della risposta. A questi selettori può essere inserita un'immagine di background al posto di un semplice colore ma c'è da ricordare sempre di fare in modo che questa immagine non sia troppo piena altrimenti si rischierà di rendere la lettura difficoltosa. Questi selettori possono venir separati e modificati singolarmente, ma è molto raro che venga fatto perchè si rischierebbe di ottenere un brutto effetto visivo complessivo.


Questo selettore modifica il colore del nickname dell'autore della risposta.


Left e Right sono due delle parti più importanti della discussione. Rappresentano la parte con le informazioni dell'autore della discussione (avatar e informazioni varie) e quella dove comparirà il messaggio una volta inviato. Anche a Left e Right può essere aggiunta un immagine di sfondo (preferibilmente con ripetizione totale altrimenti rischierete di avere parti senza sfondo)


Quote e Code sono i selettori che si occupano dello stile delle citazioni, dei codici e degli spoiler (le modifiche dello spoiler saranno le stesse di Code, attenzione). Come tutti i selettori con sfondo anche qui potrete aggiungere un'immagine di background con ripetizione totale. Con questi selettori viene anche deciso il colore del testo all'interno delle varie citazioni e codici.


Il Color server per modificare il colore del testo semplice della discussione, mentre color a:link serve per differenziare i link dal testo normale, rendendoli più riconoscibili e color a:hover per differenziare il link al passaggio del mouse. Hr è un selettore poco modificato, la sua funzione è quella di cambiare il colore della linea formata con la digitazione del tag <hr>


Fancyborder è il selettore per il riquadro degli allegati, ma è poco usato visto che ormai quasi tutto viene direttamente hostato e linkato direttamente nella discussione.
Edit è il selettore che modifica il testo "Modificato da:" che appare quando qualcuno apporta delle modifiche ad una risposta già inviata precedentemente. Per fare in modo che questo messaggio non appaia vi basta uguagliare il colore del testo di .edit a quello dello sfondo di .right. .info e .altert sono due selettori che principalmente vengono usati quando nella skin vengono riscontrati messaggi di errore come una discussione non accessibile.


Signature è il selettore che si occupa invece del colore del testo della firma degli utenti.


Il sep è una piccola parte che serve a separare le risposte in una discussione e la discussione totale dal title posto in fondo. Al sep può essere anche applicata un immagine di sfondo. Può anche essere eliminato sostituendo le proprietà dentro le parentesi graffe con display:none.


Ci apprestiamo adesso a modificare i selettori riguardanti il sondaggio. Il sondaggio è il tipo di discussione alternativa al topic e presenta un box aggiuntivo prima dell'inzio della discussione vera e propria. Impareremo quindi a modificare quel box.



Questo Title2 nonostante abbia lo stesso nome è diverso dal quello delle statistiche (se avete prestato attenzione vi accorgerete che quello delle statistiche si chiama .stats .title2, il che vuol dire che il title2 con aggiunto un selettore riguardante una sezione specifica applica le modifiche solo in quella zona). Ovviamente anche qui può essere inserita un immagine di sfondo con ripetizione orizzontale e possono essere differenziati i link da quelli di base.


Row1 rappresenta le righe contenenti le varie opzioni del sondaggio.


Row2 invece è la linea che comprende l'avviso di aver già votato nel sondaggio e il totale dei voti dati dagli utenti.


Questi selettori solitamente non sono presenti in tutte le skin di base perciò quando non li troverete presenti dovrete aggiungerli voi. Servono a modificare le barre del sondaggio, quelle con le percentuali di voti ricevuti. Le barre si dividono in 3 parti principali, la parte sinistra (.tab_left) con nessuna ripetizione, larghezza e altezza fissi, la parte centrale (.bar) con ripetizione orizzontale con solamente l'altezza fissa, e la parte destra solitamente creata a specchio con quella sinistra. Vengono di solito utilizzate tre piccole immagini per la barra ma possono essere sostituite da un unico colore di sfondo e devono essere ritagliate come nello screen qui sopra.