.

Barra per skin I

parte superiore

« Older   Newer »
 
  Share  
.
  1. .Kobrax.
    view post Posted on 29/12/2009, 15:47
        Top   Dislike
     
    .

    User deleted
    Allora, impariamo a creare e inserire in una skin una barra molto semplice:

    OSS:
    La barra è quell'immagine che racchiude le sezioni del forum

    Per creare la barra apriamo un documento di circa 500x35 (possiamo anche variare) e facciamo il lavoro desiderato, che vogliamo far figurare come barra, non mi dilungo su come crearla, io ho fatto questo:




    Facciamo un lavoro unico e poi lo taglieremo in tre pezzi, importante è che siano tutti della stessa altezza

    .mback_left


    Questa parte forma la .mback_left e l'URL dell'immagine dopo averla hostata dovra' essere inserito nel codice della skin.
    Dobbiamo stare attenti alle misure per poterle inserire nel codice nel modo giusto, l'immagine usata è 148x35

    .mback_center


    Questa è la parte centrale della barra, per avere un disegno uniforme deve essere omogenea, dato che il motivo viene ripetuto lungo l'asse X

    .mback_right


    Questa è la parte destra della barra, anche per lei dobbiamo stare attenti alle misure per inserirle in modo giusto nel codice, nel mio caso è 132x35


    Fatto questo, in Amministrazione/Grafica/Colori e stili andremo a modificare questa parte di codice

    CODICE
    .mback {height: altezza della barra px; background-image: none}
    .mback_left {width: lunghezza del pezzettino di barra px; background-image: url(URL del pezzo di barra hostato); background-repeat: no-repeat; background-position: bottom}
    .mback_center {background-image: url(URL del pezzo centrale della barra); background-repeat: repeat-x; background-position: bottom}
    .mback_right {width: lunghezza del pezzetto destro di barra px; background-image: url(URL del pezzetto destro di barra hostato); background-repeat: no-repeat; background-position: bottom}


    OSS:
    riguardo la .mback left e la .mback right, nel codice dobbiamo SOLO mettere la lunghezza (width)
    l'altezza (height) va solo all'inizio, con .mback etc...

    nel mio caso il codice corretto, tenedo conto delle misure è:
    CODICE
    .mback {height: 35px; background-image: none}
    .mback_left {width: 148px; background-image: url(http://i48.tinypic.com/2j1kh0o.png); background-repeat: no-repeat; background-position: bottom}
    .mback_center {background-image: url(http://i47.tinypic.com/30dgxax.png); background-repeat: repeat-x; background-position: bottom}
    .mback_right {width: 132px; background-image: url(http://i49.tinypic.com/s4qvja.png); background-repeat: no-repeat; background-position: bottom}



    Consigli:
    Accozziamo bene i colori per non creare qualcosa di troppo forte e brutto da vedere
    QUI ci sono palettes dalle quali prendere spunto per i colori della skin

    Edited by .Kobrax. - 31/12/2009, 14:27
     
    .
  2. splatterino
    view post Posted on 30/12/2009, 23:18
        Top   Dislike
     
    .
    Avatar

    Icons © GW ♥

    Group
    Posts
    11,410
    Wilberini
    +456

    Status
    Offline
    Kobrax io avevo provato a seguire dei tutorial da un altro forum. Ecco cosa mi è uscito:

    .mback_left:
    .mback_center:
    .mback_right:
    Web Web
     
    .
  3. .Kobrax.
    view post Posted on 30/12/2009, 23:44
        Top   Dislike
     
    .

    User deleted
    va bene, anche se l'avrei tagliata piu' corta, l'importante comunque è che torni giusta sulla skin
     
    .
  4. DarkRosalie
    view post Posted on 31/12/2009, 02:41
        Top   Dislike
     
    .

    User deleted
    ci ho provato pure io e mi è uscito così:




    solo non capisco come mai se provo a metterla la parte centrale me la mette sopra il titolo cioè mi viene una cosa simile --> __-----__ cosa sbaglio?
     
    .
  5. .Kobrax.
    view post Posted on 31/12/2009, 09:04
        Top   Dislike
     
    .

    User deleted
    metti anche il codice inserito, che capisco meglio cosi'
     
    .
  6. DarkRosalie
    view post Posted on 31/12/2009, 13:07
        Top   Dislike
     
    .

    User deleted
    si scusa, il codice è:
    CODICE
    .mback {height: 35px; background-image: none}

    .mback_left {width: 148px; height: 142px; background-image: url(http://i50.tinypic.com/205quqt.png); background-repeat: no-repeat; background-position: bottom}

    .mback_center {height: 142px; background-image: url(http://i45.tinypic.com/2nstbb5.png); background-repeat: repeat-x}

    .mback_right {width: 132px; height: 142px; background-image: url(http://i48.tinypic.com/33yglqx.png); background-repeat: no-repeat; background-position: bottom}

    .msub {height: 35px;}

    .msub_left {width: 148px; background-image: url(http://i50.tinypic.com/205quqt.png); background-repeat: no-repeat}

    .msub_center {background-image: url(http://i45.tinypic.com/2nstbb5.png); background-repeat: repeat-x}

    .msub_right {width: lunghezza pezzo destro barra px; background-image: url(http://i48.tinypic.com/33yglqx.png); background-repeat: no-repeat}

    .mright_top {height: 132px; width: 109px; background-image: url(http://i37.tinypic.com/fabigy.png); background-repeat: no-repeat; background-position: bottom left}

    .mleft, .sep_left {height: 4px; width: 109px; background-image: url(http://i33.tinypic.com/2moz234.png); background-repeat: repeat-y; background-position: bottom left}

    .mleft_top {height: 147px; width: 109px; background-image: url(http://i37.tinypic.com/1zqy5g7.png); background-repeat: no-repeat; background-position: bottom left}

    .mleft_bottom {height: 147px; width: 109px; background-image: url(http://i34.tinypic.com/wwhils.png); background-repeat: no-repeat; background-position: right top}

    .mright, .sep_right {width: 24px; background-image: url(http://i35.tinypic.com/2zoav7k.jpg); background-repeat: repeat-y; background-position: left}

    .mright_bottom {height: 147px; width: 109px; background-image: url(http://i33.tinypic.com/21100v9.png); background-repeat: no-repeat; background-position: left top}


    io volevo fare anche in modo che il titolo si sovrapponesse alla barra...come si fa?
     
    .
  7. .Kobrax.
    view post Posted on 31/12/2009, 13:45
        Top   Dislike
     
    .

    User deleted
    prova cosi'
    CODICE
    .mback {height: 35px; background-image: none}

    .mback_left {width: 148px; background-image: url(http://i50.tinypic.com/205quqt.png); background-repeat: no-repeat; background-position: bottom}

    .mback_center {background-image: url(http://i45.tinypic.com/2nstbb5.png); background-repeat: repeat-x}

    .mback_right {width: 132px; background-image: url(http://i48.tinypic.com/33yglqx.png); background-repeat: no-repeat; background-position: bottom}

    .msub {height: 35px;}

    .msub_left {width: 148px; background-image: url(http://i50.tinypic.com/205quqt.png); background-repeat: no-repeat}

    .msub_center {background-image: url(http://i45.tinypic.com/2nstbb5.png); background-repeat: repeat-x}

    .msub_right {width: 132px; background-image: url(http://i48.tinypic.com/33yglqx.png); background-repeat: no-repeat}

    .mright_top {height: 132px; width: 109px; background-image: url(http://i37.tinypic.com/fabigy.png); background-repeat: no-repeat; background-position: bottom left}

    .mleft, .sep_left {height: 4px; width: 109px; background-image: url(http://i33.tinypic.com/2moz234.png); background-repeat: repeat-y; background-position: bottom left}

    .mleft_top {height: 147px; width: 109px; background-image: url(http://i37.tinypic.com/1zqy5g7.png); background-repeat: no-repeat; background-position: bottom left}

    .mleft_bottom {height: 147px; width: 109px; background-image: url(http://i34.tinypic.com/wwhils.png); background-repeat: no-repeat; background-position: right top}

    .mright, .sep_right {width: 24px; background-image: url(http://i35.tinypic.com/2zoav7k.jpg); background-repeat: repeat-y; background-position: left}

    .mright_bottom {height: 147px; width: 109px; background-image: url(http://i33.tinypic.com/21100v9.png); background-repeat: no-repeat; background-position: left top}



    per titolo intendi il nome del forum?

    Edited by .Kobrax. - 31/12/2009, 14:23
     
    .
  8. DarkRosalie
    view post Posted on 31/12/2009, 13:51
        Top   Dislike
     
    .

    User deleted
    ok ora provo... no intendo il titolo del gruppo delle sezioni...per esempio "intro" che è il titolo del "quadrato" che racchiude presentazioni,annunci dello staff ecc...scusa ma non so il termine preciso ^^'

    EDIT: niente da fare...guarda, ti lascio lo stamp
    grazie dell'aiuto ^^' :kiss:
     
    .
  9. .Kobrax.
    view post Posted on 31/12/2009, 14:24
        Top   Dislike
     
    .

    User deleted
    ho controllato e ho trovato altri errori, li ho corretti, riprova ora con il codice che ti ho messo
     
    .
  10. DarkRosalie
    view post Posted on 31/12/2009, 14:36
        Top   Dislike
     
    .

    User deleted
    ora va molto meglio ma non capisco...c'è un pezzetto della barra che è come se fosse "ritagliato e incollato" per allungare la parte centrale O__O vedi?
    SPOILER (click to view)
    non mi picchiare XD
     
    .
  11. .Kobrax.
    view post Posted on 31/12/2009, 14:51
        Top   Dislike
     
    .

    User deleted
    si ho visto, quello lo fa probabilmente perche' il motivo non è perfettamente ripetibile nel centro.
    Infatto per l' mback center sarebbe consigliabile fare una cosa che sia omogenea in quanto deve essere ripetuta piu' volte per coprire la lunghezza della barra
     
    .
  12. DarkRosalie
    view post Posted on 31/12/2009, 15:01
        Top   Dislike
     
    .

    User deleted
    ah!! ok ^^ grazie mille ^^ proverò a sistemare ^^
     
    .
  13. espy n_n
    view post Posted on 14/3/2011, 19:41
        Top   Dislike
     
    .
    Avatar

    Enjoy your nightmare~

    Group
    Posts
    7,937
    Wilberini
    +173
    Location
    Hollow Bastion

    Status
    Anonymous
    image image image

    Va bene? .)
    Contacts Contacts
     
    .
  14. splatterino
    view post Posted on 14/3/2011, 19:44
        Top   Dislike
     
    .
    Avatar

    Icons © GW ♥

    Group
    Posts
    11,410
    Wilberini
    +456

    Status
    Offline
    :ok:
    Web Web
     
    .
  15. __Stella Swan__
    view post Posted on 15/9/2011, 08:39
        Top   Dislike
     
    .

    User deleted
    Ecco il mio:
    left center right
    giusto??

    CODICE
    .mback {height: 30 px; background-image: none}
    .mback_left {width: 135px; background-image: url(http://i284.photobucket.com/albums/ll9/PrinzesschenDaisy/left.png); background-repeat: no-repeat; background-position: bottom}
    .mback_center {background-image: url(http://i284.photobucket.com/albums/ll9/PrinzesschenDaisy/center.png); background-repeat: repeat-x; background-position: bottom}
    .mback_right {width: 140 px; background-image: url(http://i284.photobucket.com/albums/ll9/PrinzesschenDaisy/right.png); background-repeat: no-repeat; background-position: bottom}
     
    .
20 replies since 29/12/2009, 15:47   285 views
  Share  
.
 
.
Skin - Html
Create your forum and your blog! · Top Forum · Categories · Help · Status · Contacts · Powered by ForumFree
Top