[skinning] Avatar del menù tondo

« Older   Newer »
 
  Share  
.
  1.      
     
    .
    Avatar

    "Tu ami l'amore ma non hai tempo per le persone"

    Group
    Patatine fritte
    Posts
    6,826
    Location
    TARDIS

    Status
    Anonymous
    Non so perché ma non riesco a fare l'avatar del menù così (eppure l'avevo già fatto in un'altra skin o__ ho proprio un vuoto e non ricordo come si fa DDD:). Non mi serve il codice dell'ombra, quello lo so mettere, non riesco proprio farlo tondo e a spostarlo più in basso rispetto al menù.

    oK3znvn
     
    .
  2.      
     
    .
    Avatar

    © Terri

    Group
    Patatine fritte
    Posts
    11,920
    Location
    Casa editrice

    Status
    Anonymous
    nella parte dei colori e stili ci dovrebbe essere questo (io l'ho preso dal ff magazine e poi l'ho modificato per la skin)
    CODICE
    .menuwrap > .left > li:first-child > a > .avatar {line-height: normal; overflow: hidden; width: 26px; height: 26px; position: absolute; top: 6px; border-radius: 100px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; border: 2px solid #194A78; background-color: #78A8D6; z-index: 9}
    .menuwrap > .left > li:first-child:hover > a > .avatar {top: 103px; width: 100px; height: 100px; background-color: #78A8D6; border-radius: 20px 60px 30px 50px}
    .menuwrap > .left > li:first-child > ul {z-index: 1; padding-left: 120px; background-color: #78A8D6}
    .menuwrap .nick {margin-left: 3.6em !important}


    qui:
    CODICE
    .menuwrap > .left > li:first-child > a > .avatar {line-height: normal; overflow: hidden; width: 26px; height: 26px; position: absolute; top: 6px; border-radius: 100px;

    è il "border radius" C:
     
    .
  3.      
     
    .
    Avatar

    "Tu ami l'amore ma non hai tempo per le persone"

    Group
    Patatine fritte
    Posts
    6,826
    Location
    TARDIS

    Status
    Anonymous
    Grazie ha funzionato ♥ Se avessi un altro problema posso scrivere sempre quà o è meglio se apro un altro topic?
     
    .
  4.      
     
    .
    Avatar

    © Terri

    Group
    Patatine fritte
    Posts
    11,920
    Location
    Casa editrice

    Status
    Anonymous
    penso che vada bene anche qua :3 ♥
     
    .
  5.      
     
    .
    Avatar

    "Tu ami l'amore ma non hai tempo per le persone"

    Group
    Patatine fritte
    Posts
    6,826
    Location
    TARDIS

    Status
    Anonymous
    Dunque, ho spostato le immagini ON e OFF (quella freccettina) fuori dal container e la targhetta a destra, però come vedete la targhetta risulta spostata, la vorrei attaccata a "discussioni" e "risposte" a destra, come dovrebbe essere quando si sposta la targhetta a destra appunto.

    B4xIpWk

    CODICE
    .web {font-size: 19px; font-family: helvetica; letter-spacing: -2px; text-transform: lowercase; color: #9c4f6a;  background: #f0f0f1; border-radius: 2px; padding-right: 3px; padding-left: 3px; font-style: normal}
    .web:hover {background: #f0f0f1; border-radius: 2px; padding-right: 3px; padding-left: 3px; font-style: normal}
    .desc {font-weight: normal; font-size: 11px; color: #8a8a8a; font-family: helvetica; line-height: 11px; padding-top: 3px;}
    .spostata .web a {color: #31666E; font-style: italic}
    .mods {margin-left: 6px}

    .board .on img, .board .off img {position: relative; left: -45px}
    .board .big_list .bb {margin-left: -53px}
    .board .zz .yy {font-family: helvetica; font-size: 12px; color: #8a8a8a}

    .web a:link img, .web a:visited img {float: right; border: #fff 2px solid; box-shadow:         1px 1px 0px rgba(50, 50, 50, 0.28);}
     
    .
  6.      
     
    .
    Avatar

    © Terri

    Group
    Patatine fritte
    Posts
    11,920
    Location
    Casa editrice

    Status
    Anonymous
    CITAZIONE
    .board .on img, .board .off img {position: relative; left: -45px}

    prova a diminuire o ad aumentare il numero in "left" o:
     
    .
  7.      
     
    .
    Avatar

    "Tu ami l'amore ma non hai tempo per le persone"

    Group
    Patatine fritte
    Posts
    6,826
    Location
    TARDIS

    Status
    Anonymous
    Ma non voglio spostare ON e OFF > < voglio solo spostare la targhetta
     
    .
  8.      
     
    .
    Avatar

    Tess!

    Group
    Pizzette
    Posts
    24,895
    Location
    Parma

    Status
    Anonymous
    il problema è che quel codice si applica a tutte le immagini...
    dovresti usare .aa per regolare gli on e off e le targhette con img
    in pratica con quel codice hai spostato di -45px tutte le immagini presenti in .on e .off, quindi la targhetta va a cozzare con la descrizione
    Spero si sia capito v.v
    dovrebbe essere:
    CODICE
    .board .aa .on img, .board .aa .off img {position: relative; left: -45px}
     
    .
  9.      
     
    .
    Avatar

    "Tu ami l'amore ma non hai tempo per le persone"

    Group
    Patatine fritte
    Posts
    6,826
    Location
    TARDIS

    Status
    Anonymous
    Succede questo D: wrZGCur
     
    .
  10.     +2    
     
    .
    Avatar

    Advanced Member

    Group
    Member
    Posts
    5,563

    Status
    Anonymous
    la targhetta è .board .s quindi prova ad applicare quello invece di .board img =)
     
    .
  11.      
     
    .
    Avatar

    Tess!

    Group
    Pizzette
    Posts
    24,895
    Location
    Parma

    Status
    Anonymous
    giusto! Non ci avevo pensato! Talvolta le soluzioni sono semplicissime eppure ti sfuggono proprio LOL
    prova a mettere un margin nella classe che ti ha indicato evs.
    CODICE
    .board .s {margin-left: yypx}
     
    .
  12.      
     
    .
    Avatar

    "Tu ami l'amore ma non hai tempo per le persone"

    Group
    Patatine fritte
    Posts
    6,826
    Location
    TARDIS

    Status
    Anonymous
    Okay per ora funziona u_u quando metto la skin sul forum vedrò se crea problemi e vi dico!
     
    .
  13.      
     
    .
    Avatar

    If Evil can love, then what is Evil?

    Group
    Patatine fritte
    Posts
    9,820
    Location
    Naboo

    Status
    Anonymous
    Rispolvero questa discussione per un problema simile...

    Dunque, ho notato un piccolo bug in una mia skin, che prima non avevo notato in quanto avevo un avatar quadrato e non rettangolare.
    Faccio uno screen così si capisce meglio il problema...
    lx5EzHg

    Come potete vedere, l'anteprima dell'avatar in alto a sinistra è "deformata": tale problema ha cominciato a manifestarsi da quando ho messo un avatar rettangolare alto e stretto (prima avevo un'icon o un avatar quadrato e il layout era perfetto: ovvero il mio avatar era completamente tondo e contornato da un bordo)

    Il codice è questo: sapreste dirmi cosa devo modificare per far sì che il codice si adatti a tutti i tipi di avatar, lunghi o stretti che siano? xD

    CODICE
    .menuwrap a {margin: 0 5px; padding: 0 11px; font-size: 9px; color: #AAA; text-transform: uppercase; letter-spacing: 1px}
    .menuwrap a:hover {color: #FFF; border: 0}
    .menuwrap .icon a {padding: 0 6px}
    .menuwrap .avatar {width: 70px; height: 70px; position: absolute; left: 10px; top: 0; z-index: 9; padding: 7px; padding-top: 0; border-radius: 0 0 100px 100px; transition: all 1s; -moz-transition: all 0.7s; -webkit-transition: all 0.7s; -o-transition: all 0.7s; -ms-transition-duration: 0.7s}
    .left .menu .avatar img {border-radius: 100px; box-shadow: 3px 3px 0 rgba(0, 0, 0, .2); border: 2px solid #522C2C}
    .menuwrap .left {margin-left: 100px}
    .menuwrap > .left > li:first-child > a > .avatar {line-height: normal; overflow: hidden; width: 60px; height: 60px; position: absolute; top: 5px; left: 5px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; z-index: 9}
    .menuwrap > .left > li:first-child:hover > a > .avatar {top: 90px; left: 100px; width: 100px; height: 100px}
    .menuwrap > .left > li:first-child > ul {z-index: 1; padding-left: 120px}


    Grazie mille! :3
     
    .
  14.      
     
    .
    Avatar

    © Terri

    Group
    Patatine fritte
    Posts
    11,920
    Location
    Casa editrice

    Status
    Anonymous
    prova ad aggiungere
    CODICE
    .menuwrap .avatar img {width: 70px !important; height: 70px !important
    : )
     
    .
  15.      
     
    .
    Avatar

    If Evil can love, then what is Evil?

    Group
    Patatine fritte
    Posts
    9,820
    Location
    Naboo

    Status
    Anonymous
    Purtroppo non funziona, Bea. ç__ç
     
    .
22 replies since 19/5/2013, 10:04   189 views
  Share  
.