2 [Seconda Lezione], Le Sezioni Forum e la Barra Utente

[Seconda Lezione] Corso di Skin
Le Sezioni Forum e la Barra Utente.

Di cosa ci Occupiamo oggi?



Quindi oggi la parte di codice che ci appresteremo a modificare sarà questa:




1 - "La Barra Utente" a Cosa Serve e come si Modifica?



Non in tutte le skin base avremo specificazione cosi accurata del menù, in questo caso io sto usando il css della mia base skin: [Base Skin]; innanzitutto dobbiamo sapere cosa è la barra utente e dove la vediamo nella nostra skin, ecco l'immagine:

E' esattamente la parte dove appare il nostro nick, il box dei messaggi e nel lato destro, le funzioni di ricerca,aiuto e membri. La prima riga del codice ci chiede subito l'altezza e questo dipende da noi, ma in generale vi consiglio di non farla mai più piccola di 20px. oltre a questo se volete usare un'immagine come sfondo nella vostra barra utente, dovete mettere le dimensioni che si servono. dopo l'altezza, dovrete inserire l'immagine che volete visualizzare come sfondo, se non volete nessuna immagine,basta togliere questa riga: background-image: url(menu.gif); e Sostituirla con un semplice colore di sfondo: background-color: #??????; e poi infine, settate il vostro bordo come più vi piace, vi ricordo che potete personalizzate ogni lato della vostra barra utente per quanto riguarda il bordo, per esempio voglio fare un bordo tutto tratteggiato ma nella parte di sotto lo voglio unico, ecco il codice: border: 1px dashed #??????; border-bottom: 1px solid #??????; per avere una conoscenza più approfondita sui bordi vi consiglio questa mia piccola guida: [Border Style].




questi altri due codici, indicato esattamente le proprietà dei link riferito solamente alla barra utente e quindi il menù a:link è link non ancora cliccato , a:visited è il link in cui tu hai già cliccato e quindi è già stato visitato, l'a:hover invece è quel momento in cui il mouse passa sopra l'a:link e vediamo il testo cambiare colore, può anche non cambiarlo dipende appunto da come settiamo i colori, ma per una buona visualizzazione è sempre distinguere almeno l' a:link dall' a:hover. ora nel secondo codice appare questa specificazione: text-decoration: none praticamente è la decorazione che vogliamo dare al testo e quindi se lo vogliamo sottolineato in basso,sopra o altro... queste sono le più comuni decorazioni di testo: none || underline || overline || line-through || blink || inherit.





2 - Sezioni Forum.



- Questa parte di codice si riferisce esattamente al blocco delle sezioni, per aiutarvi a visualizzare di cosa stiamo parlando ecco un'immagine esplicativa:







Ora iniziamo come nostro solito ad esporre il codice, la prima riga è esattamente il .mainbg, cosa è? come avete visto nell'immagine precedente c'è una sorta di sfondo dietro la skin che si chiama mainbg, è anche quello che noi comunemente chiamiamo bordo, infanti la sua funzione è quella di prestarsi come bordo, quindi mettete un colore scuro nel mainbag,che sarà il vostro bordo nel blocco sezioni.



Da come si può capire dall'immagine, il title è la parte sottostante la barra principale, di solito si usa mettere un'immagine con una leggera sfumatura e cose del genere, in questo caso non abbiamo nessuna immagine ma solo il colore di sfondo, se volessimo mettere un immagine,ormai dovreste saperlo, dovete inserire dentro la prima riga questo: background-image: url(title.gif); background-repeat: repeat-x;

Le altre due righe come abbiamo studiato per il menù, sono semplicemente delle specificazioni dei link, quindi settateli a vostro piacimento.


Ed eccoci arrivati alla parte della sezione, da come vediamo dall'immagine presente, questi codici rappresentano l'intera riga della sezione, scomposta in vari blocchi rettangolari, ognuno di questi si chiama in modo differente, seguendo l'immagini non vi sarà difficile modificarli uno per uno. oltre a questo vorrei farvi notare che in questi codici ci stanno dei bordi, questi bordi, io li chiamo bordi di luce, infatti il colore deve essere sempre leggermente più chiaro del colore di sfondo della sezione e riescono a dare rilievo ad ogni blocco, naturalmente possono anche essere tolti, o posizionati come meglio si vuole.









Edited by ~ Sy - 11/5/2009, 20:38

apri una discussione in Support e linka il forum =)