.

Guida alla creazione di una Skin

« Older   Newer »
 
  Share  
.
  1. Gaara il Kazekage
    Posted on 28/6/2010, 13:06
     
    .

    User deleted
    Ecco a voi un Semplice tutorial Per creare una skin...
    iniziamo col creare una barra larga 500px e alta 50px:




    ora dividetela in tre parti, quella di destra, centro e sinistra:






    ora facciamo la stessa cosa con la barra di sotto, solo che ora mettiamo 30px di altezza:






    Ora possiamo passare alla parte più difficile ovvero quella di modificare i CSS


    IL CODICE E DA INSERIRE IN "COLORI E STILI"

    CODICE
    /* BARRA ATTORNO AL FORUM */
    .mback {height: 35px; background-image: none}
    .mtitle {padding-bottom: 2px; font-size: 9pt; text-align: center; color: #F98C67}
    .mback_left {width: 212px; height: 35px; background-image: url(LINK BARRA DI SOPRA PARTE SINISTRA); background-repeat: no-repeat; background-position: bottom}
    .mback_center {background-image: url(LINK BARRA SUPERIORE PARTE CENTRALE); background-repeat: repeat-x; background-position: bottom}
    .mback_right {width: 150px; height: 35px; background-image: url(LINK BARRA SUPERIORE PARTE DESTRA); background-repeat: no-repeat; background-position: bottom}
    .msub {height: 20px} .msub_left {width: 26px; height: 20px; background-image: url(LINK BARRA DI SOTTO PARTE SINISTRA); background-repeat: no-repeat}
    .msub_center {background-image: url(LINK BARRA DI SOTTO PARTE CENTRALE); background-repeat: repeat-x}
    .msub_right {width: 26px; height: 20px; background-image: url(LINK BARRA DI SOTTO PARTE DESTRA); background-repeat: no-repeat}
    .mleft, .sep_left, .mright, .sep_right {width: 0}


    IN "width212px; height:25px" dovete mettere le misure esatte, questo lo dovete fare qui
    CODICE
    .mback_left {width: 212px; height: 35px; background-image:

    QUI
    CODICE
    mback_right {width: 150px; height: 35px; background-image:

    QUI invece dovete fare la stessa cosa, ma con le misure esatte dei pezzi della barra di sotto:
    CODICE
    .msub {height: 20px} .msub_left {width: 26px; height: 20px; background-image: url

    E QUI
    CODICE
    .msub_right {width: 26px; height: 20px; background-image: url

    _______________________________________________________________

    Ora con questo cod abbiamo la definizione generale della skin..,
    Con questo cod possiamo cambiare tipo di scrittura(font) cambiare la grandezza di visualizazzione e colore...
    CODICE
    body {background-position: center; background-color: #FFFFFF; font-family: verdana, tahoma, arial; font-size: 8pt; color: #BBBBBB}
    table, div {font-family: verdana, tahoma, arial; font-size: 7.5pt; color: #A09F9F}
    a:link, a:visited {text-decoration: none; color: #888888}
    a:hover {color: #949393}


    QUI possiamo cambiare il tipo di scrittura, basta sostituire verdana con una font che a noi piace molto,come vedrete c'è anche 7,5pt ovvera la grandezza del font, modificando 7.5pt in (esempio) 10pt la
    nostra font verrà visualizzata in modo più grande, dopo la grandezza della font c'è: color:#A09F9F a questo punto dobbiamo usare il generatore dei colori html perchè qui possiamo cambiare il colore delle scritte (normali no link)

    CODICE
    table, div {font-family: verdana, tahoma, arial; font-size: 7.5pt; color: #A09F9F}


    Qui invece possiamo cambiare colore dei link.

    CODICE
    a:link, a:visited {text-decoration: none; color: #888888}


    Qui invece possiamo cambiare il colore dei link "quando ci passiamo sopra con il cursore"
    ______________________________________________________________

    Ora abbiamo

    CODICE
    /* SCRITTE ESTERNE */
    .nav {font-weight: bold; font-size: 9pt}


    dove e possibile modificare solo la scritta esterna, in questo caso: "( (Amministrazione) Naruto Shippuden Storm GDR spoiler 500 499 grafica episodi naruto one piece bleach 404 hentay hard film porno streaming »
    il mio consiglio e di lasciare questo codice cosi com'è...
    _______________________________________________________________

    Ora invece potremmo cambiare le misure con del forum con questo codice:
    CODICE
    /* DIMENSIONI FORUM */
    .header_width, .skin_tbl_width, .skin_tbl {width: 75%}
    .stats .border {width: 76%}


    bisogna modificare solo 75% e 76%.
    ________________________________________________________________

    Qui invece si assegnano i colori in base ai ruoli e ai gruppi di appartenenza (sempre che i gruppi vengano poi creati); per default il forum avra' solo i primi 4 attivi

    CODICE
    /* COLORI LISTA UTENTI ATTIVI */
    .amministratore {color: #F98C67; font-weight: bold}
    .moderatore {color: #FABDA9; font-weight: bold}
    .utente {color: #A09F9F}
    .daconvalidare {}
    .gruppo1 {color: #B980FF; font-weight: bold}
    .gruppo2 {color: #80A9FF; font-weight: bold}
    .gruppo3 {color: #95DDFF; font-weight: bold}
    .gruppo4 {color: #9FEF50; font-weight: bold}
    .gruppo5 {color: #FFF000; font-weight: bold}
    .gruppo6 {color: #FFB56A; font-weight: bold}


    ________________________________________________________________

    Invece ora possiamo modificare la barra utenti con questo cod:

    CODICE
    /* BARRA UTENTE */
    .menu {height: 28px; background-image: url(Link IMG da usare per la barra utenti)}
    .menu a:link, .menu a:visited {color: #888888}
    .menu a:hover {color: #929191; text-decoration: none}


    Qui invece possiamo modificare (come nel codice di prima) il colore dei link della barra utenti:
    a:link,...... cambia il colore dei link
    a:hover....... cambia il colore dei link quando ci si passa sopra con il cursore

    CODICE
    .menu a:link, .menu a:visited {color: #888888}
    .menu a:hover {color: #929191; text-decoration: none}
    [/CODE]
    ________________________________________________________________




    Edited by Gaara il Kazekage - 28/6/2010, 18:52
     
    .
  2. ~Ryuuji1119
    Posted on 28/6/2010, 13:53
     
    .
    Avatar

    Hai scritto tutta un'epoca

    Group
    Member
    Posts
    9,447

    Status
    Offline
    devi continuarlo :asd:
     
    .
  3. Sasuke.Susanoo
    Posted on 28/6/2010, 15:04
     
    .

    User deleted
    Come sei cattivo Alfre xD
     
    .
  4. ~Ryuuji1119
    Posted on 28/6/2010, 15:09
     
    .
    Avatar

    Hai scritto tutta un'epoca

    Group
    Member
    Posts
    9,447

    Status
    Offline
    io? Xkè?
     
    .
  5. Sasuke.Susanoo
    Posted on 28/6/2010, 15:10
     
    .

    User deleted
    CITAZIONE (A.V.A. @ 28/6/2010, 14:53)
    devi continuarlo :asd:

    Per questo xD Sei cattivo
     
    .
  6. ~Ryuuji1119
    Posted on 28/6/2010, 15:33
     
    .
    Avatar

    Hai scritto tutta un'epoca

    Group
    Member
    Posts
    9,447

    Status
    Offline
    Ma è la pura verità XD
    Non è mica una guida completa XD
    Vabbè... siccome sono cattivo non vi aiuto più XD
     
    .
  7. Gaara il Kazekage
    Posted on 28/6/2010, 15:49
     
    .

    User deleted
    ava lo so che lo devo continuare -.- ancora non o finito la prima parte ....

    edit: aggiunta barra di sotto e i suoi pezzi
     
    .
  8. Gaara il Kazekage
    Posted on 28/6/2010, 17:54
     
    .

    User deleted
    modificato...
     
    .
  9. XxItachixX
    Posted on 28/6/2010, 19:18
     
    .

    User deleted
    Non ho capito molto ^^
     
    .
  10. Gaara il Kazekage
    Posted on 28/6/2010, 19:26
     
    .

    User deleted
    uff lo sapevo .... credo che leverò sta guida ç_ç
     
    .
  11. XxItachixX
    Posted on 28/6/2010, 19:29
     
    .

    User deleted
    lasciala mica sono tutti impediti come me...ad altri puo essere utile ^^
     
    .
  12. Gaara il Kazekage
    Posted on 28/6/2010, 19:33
     
    .

    User deleted
    b'è dimmi almeno i passaggi che non ai capito... (anche se la guida e ancora in completa)
     
    .
  13. moltak
    Posted on 29/6/2010, 06:00
     
    .

    User deleted
    Iio ho capito tutto sei mitico
     
    .
  14. Gaara il Kazekage
    Posted on 29/6/2010, 08:29
     
    .

    User deleted
    davvero ?! comunque ancora non e finita la guida... devo mettere ancora altri 4-5 codici... per ora sto cercando di capire cosa significano alcuni codici XDDD
     
    .
  15. ~Ryuuji1119
    Posted on 29/6/2010, 09:02
     
    .
    Avatar

    Hai scritto tutta un'epoca

    Group
    Member
    Posts
    9,447

    Status
    Offline
    4 o 5? Sicuro? Mi sembra ce ne fossero altrii XD

    cmq, mo mi devi dire per le barre laterali se le vuoi ancora XD
     
    .
15 replies since 28/6/2010, 13:06   139 views
  Share  
.
 
.
Tutorial
Create your forum and your blog! · Top Forum · Categories · Help · Status · Contacts · Powered by ForumCommunity