creare una Skin x il vostro forum, 1 passo

Per prima cosa dobbiamo creare il nostro forum e successivamente la nostra skin^^ per creare un forum basta andare su http://forumfree.net/ o su http://forumcommunity.net/

E clicchiamo,dal pannello a sinistra,sulla voce "Crea il Tuo Forum!".

Digitiamo il nome ed il dominio,mettiamo un nome a caso alle sezioni e poi inviamo i dati.

Dalla nuova pagina che vi uscirà,cliccate su "Amministra".

dal menu laterale,scegliete la voce "Modifica Skin".

DIMENSIONI DEL FORUM



Andiamo in amministrazione

Modifica skin

E selezionate Invision 2.0.3



Registriamo le modifiche

Ora andiamo su Modifica colori e stili

Cominciamo a costruire la skin modificando questi codici, per il momento tralasciamo la prima parte e passiamo direttamente ad analizzare questa:

<div align="center">
<div class="code_top" align="left"><b>CODICE

Possiamo modificare la grandezza del nostro forum, cambiando i valori in percentuale.

.skin_tbl_width, .skin_tbl, .header_width si riferisce alla larghezza del forum

.stats .border si riferisce alla larghezza della tabella statistiche, quella che trovate in fondo al forum.



Potete farle della solita di misura o no, a seconda dei vostri gusti. Ecco cos'ho ottenuto io.

<div align="center">
<div class="code_top" align="left"><b>CODICE

Se volete allargare la grandezza del forum

<div align="center">
<div class="code_top" align="left"><b>CODICE

<b><p align="center">
BARRA ATTORNO AL FORUm
A questo punto possiamo iniziare con il modificare la barra attorno al forum, che sarebbe questa parte qui della nostra skin



Il codice da analizzare è questo



<div align="center">
<div class="code_top" align="left"><b>CODICE




Costruiamo con paint shop o photo shop la nostra barra.



Ecco la mia barra





Adesso dobbiamo dividerla in 3 pezzetti, proprio come ho fatto io:



<a href="http://i29.tinypic.com/zmfjw6.jpg" target="_blank"><font color="#a000f0">http://i29.tinypic.com/zmfjw6.jpg



<font color="#a000f0">

<a href="http://i27.tinypic.com/jqkit2.jpg" target="_blank"><font color="#a000f0">http://i27.tinypic.com/jqkit2.jpg



<font color="#a000f0">

<a href="http://i27.tinypic.com/oud1g3.jpg" target="_blank"><font color="#a000f0">http://i27.tinypic.com/oud1g3.jpg



Ecco a cosa corrispondono i vari pezzetti della barra nel nostro codice:



<b>.mback_left --> sinistra

<b>.mback --> centro

<b>.mback_right --> destra



Cominciamo ad inserire l'<b>.mback_left



<div align="center">
<div class="code_top" align="left"><b>CODICE




<b>width è la larghezza, perciò al posto di NUM dobbiamo inserire il numero in px della larghezza della parte sinistra, e al posto del link il link dell'immaginde sinistra che avremo hostato. Inoltre dovremo mettere anche no-repeat, in quanto quel pezzo di barra non dovrà ripetersi, ma dovrà esserci solo una volta.



Io ho ottenuto questo:

<div align="center">
<div class="code_top" align="left"><b>CODICE




Dovete fare la solita identica cosa per la parte destra della barra.

Inseriamo quindi inserire l'<b>.mback_right



<div align="center">
<div class="code_top" align="left"><b>CODICE




<b>width è la larghezza, perciò al posto di NUM dobbiamo inserire il numero in px della larghezza della parte destra, e al posto del link il link dell'immaginde destra che avremo hostato. Inoltre dovremo mettere anche no-repeat, in quanto quel pezzo di barra non dovrà ripetersi, ma dovrà esserci solo una volta.



Io ho ottenuto questo:

<!--c1-->
<div align="center">
<div class="code_top" align="left"><b>CODICE




Andiamo ora ad inserire la parte centrale della barra, l'<b>.mback



L'.mback è la parte centrale della barra, andiamo ad inserire il codice

<div align="center">
<div class="code_top" align="left"><b>CODICE


<b>height è l'altezza, scriviamo perciò al posto di NUM, l'altezza in px della nostra barra (nel mio caso è 50px).

Al posto del LINK PARTE CENTRALE inseriamo appunto il link.

In questo caso dovremo mettere repeat: repeat-x, in quanto questa parte dovrà ripetersi per tutta la barra.



Ecco cos'ho ottenuto io:

<div align="center">
<div class="code_top" align="left"><b>CODICE




Ora andiamo a modificare un altro pezzo fondamentale per la nostra skin, l'<b>.msub, ossia la parte inferiore della nostra barra



Io vi consiglio di usare per questa parte il solito pezzetto di barra che avete usato per l'.mback

Andiamo ad inserire il codice dell'.msub

<!--c1-->
<div align="center">
<div class="code_top" align="left"><b>CODICE


<b>height si riferisce all'altezza del'.msub, vi consiglio di non farla troppo altra, io metterò 25px. Al posto del link io inserirò lo stesso che ho usato per l'.back, ma se volete potrete farne uno nuovo.



Ecco cos'ho ottenuto:

<div align="center">
<div class="code_top" align="left"><b>CODICE




La vostra skin dovrebbe essere a questo punto:





La linea che vedete sopra l'.msub spesso è molto fastidiosa, si tratta dell'm.foot. Per levarlo basta aggiungere alla fine del codice /* BARRA ATTORNO AL FORUM */ questo codice qui:

<div align="center">
<div class="code_top" align="left"><b>CODICE




Anche gli elementi .minus, .plus non sono molto belli esteticamente (sarebbero i più e i meno sulla barra) per levarli basta cancellare questo codice:

<div align="center">
<div class="code_top" align="left"><b>CODICE




Ora andiamo a modificare il colore della scritta sopra la barra, ossia questa:



Per modificare il colore basta inserire il codice del colore in esadecimale in questa parte qui del codice

<!--c1-->
<div align="center">
<div class="code_top" align="left"><b>CODICE





La barra è terminata, questo è il codice finale che io ho ottenuto:

<div align="center">
<div class="code_top" align="left"><b>CODICE





 

---

<p>



Se volete al posto della semplice barra attorno al forum una cornicetta basta semplicemente sostituire il codice /* BARRA ATTORNO AL FORUM */ in colori e stili con questo codice



<div align="center">
<div class="code_top" align="left"><b>CODICE




IL procedimento è uguale a quello della barra attorno al forum., modificate queste parti

_ altezza : height:

_ larghezza : width:



aiutatevi con quest'immagine





<b><!--coloro:red--><span style="color: red"><!--/coloro-->MODIFICARE IL COLORE DELLE SCRITTE<!--colorc--><!--/colorc-->

Per modificare il colore, ma se vogliamo anche la grandezza e il tipo di carattere delle scritte della nostra skin dobbiamo analizzare questa parte del codice:

<div align="center">


<p><!--ec2-->



Ho colorato di rosso la parte table, div;

ho colorato di verde la parte a:link, a:visited, a:hover.









Perciò per modificare i colori basta sostituire al posto dei codici esadecimali già inseriti, il codice che interessa a noi. Io, siccome voglio le scritte biance e rosa ho modificato così:

<div align="center">


<p><!--ec2-->



Abbiamo finito di modificare i colori, il codice finale che io ho ottenuto è questo:



<!--c1-->
<div align="center">


Per modificare il colore di sfondo invece, basta sostutire il codice del colore in esadecimale, in questa parte qui:

<div align="center">




Se vogliamo modificare le linee di ogni colonna delle sezioni basta modificare questa parte

<div align="center">




Come avrete notato questa parte inquadrettata di giallo:





è rimasta invariata. Per modificarne il colore basta inserire il cod esadecimale qui:

/* SCRITTE ESTERNE */

<div align="center">





<b><!--coloro:red--><span style="color: red"><!--/coloro-->SEZIONI DEL FORUM<!--colorc--><!--/colorc-->

Cominciamo a colorare le sezioni del forum. La parte del codice che ci interessa è la seguente:

<div align="center">




Ecco a cosa corrispondono le varie parti del forum







Ora che abbiamo capito a cosa si riferiscono i vari codici possiamo andare a colorare le sezioni, ed è estremamente semplice, infatti, basta sostituire i colori che vogliamo nelle varie parti:

<div align="center">


Qui le troviamo unite, cioè aa, bb, cc tutte insieme e ww, xx, yy, zz anche. ma se vogliamo possiamo dividerle in modo da utilizzare colori diversi, in questo modo

<!--c1-->
<div align="center">




Adesso andiamo a colorare la scritta della descrizione di ogni sezione, il codice da prendere in considerazione è il seguente:

<div align="center">




Decidiamo il colore e lo inseriamo al posto di quelli predefininiti, siccome io le descrizioni le voglio viola ho inserito questo codice:

<div align="center">




Un'altra parte importante è il <b>.mainbag



Ossia le righe verticali e orrizontali che vedete in figura:





Io le ho fatte bianche, modificarle è molto semplice, basta inserire il codice html del colore al posto di dove io ho messo #FFF:

<!--c1-->
<div align="center">




Ora dobbiamo inserire questo codice:

<div align="center">




Al posto di FFF mettiamo il colore che preferiamo. In ogni caso questa parte identifica il bordo che circonda tutto il forum, perciò vi conviene farlo del solito colore del .mainbag



Ora non ci rimane che analizzare questa parte qua:

<div align="center">




Troviamo .title ripetuto tre volte, il primo èerò è il più essenziale, cominciamo quindi con questo:


<div align="center">


Questo codice si riferisce a questa parte della skin:





Se volete semplicemente colorarla basta sostituire ai colori predefiniti i colori che preferiamo,

<div align="center">





Però possiamo fare una cosa più bella, ossia mettere un'immagine di sfondo, un pò come abbiamo fatto per la barra del forum.. Farlo è semplicissimo. Realizziamo un'immagine, tipo questa:





Ciò che conta è l'altezza, io l'ho fatta di 26px, la larghezza è ininfluente. Adesso dopo aver caricato quest'immagine con un sito free hosting preleviamo il link e lo inseriamo in questo codice (ovviamente questo codice va a sostituire quello precedente per il .title)




<div align="center">





Io ho ottenuto così:


<div align="center">





In questa parte qui


<div align="center">



Sostituiamo al posto dei colori predefiniti il codice esadecimale del colore che vogliamo per il font, io ho messo il solito che avevo messo prima nel codice del title, ma voi potete anche variarlo, in quanto questa è un opzione che ci permette di far variare il colore della scritta al passaggio del mouse.



Ora non ci rimane che modificare questa parte qua


<div align="center">




Foot si riferisce a questo:





Il procedimento è uguale identico a quello appena fatto per il .title. Io ho inserito nuovamente un'immagine per lo sfondo, ed ho inserito la solita che avevo messo per il .title

Ho ottenuto quindi questo:


<div align="center">





Un'ultimissima cosa è questa:


<div align="center">





Inserite al posto del colore il solito che avete usato per fare tutti i bordi del forum!



Questa parte è terminata, il codice che ho ottenuto è questo:


<div align="center">





 

---

<p>



Se volete le scritte che al passaggio del mouse diventano maiuscole basta inserire questo codice


<div align="center">





<b><!--coloro:red--><span style="color: red"><!--/coloro-->IMMAGINE DI SFONDO ALLA TAGBOARD<!--colorc--><!--/colorc-->

Se volete un immagine di sfondo alla tagboard

<!--INIZIO_SPOILER-->
<div align="center">
<div class="code_top" align="left"><b>SPOILER (<a href="javascript:spoiler()"><font color="#a000f0">clicca per visualizzare)
<div class="spoiler">
<div class="code" align="left">


<p><!--FINE_SPOILER-->



Create una Immagine 850*200 (L'Altezza Dipende dalla Altezza della Vostra Tagborad)

<!--INIZIO_SPOILER-->
<div align="center">
<div class="code_top" align="left"><b>SPOILER (<a href="javascript:spoiler()"><font color="#a000f0">clicca per visualizzare)
<div class="spoiler">
<div class="code" align="left">


<p><!--FINE_SPOILER-->



Quindi Andate In

Amministrazione

Modifica Colori e Stili

In Fondo Inserite Il Codice:











Se volete cambiare le misure della tagboard utilizzate questo codice




<p> 


Edited by rosy1luna86 - 9/11/2009, 11:58