AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le deal à ne pas rater :
Aliexpress : codes promo valables sur tout le site
Voir le deal

    Mise en forme complète du profil "upside down" (CSS)

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Sam 24 Nov 2012 - 1:19

    Rappel du premier message :

    Salut salut x)
    (oui je suis motivé aujourd'hui Razz)

    Je vous propose avec ce tutoriel une mise en forme complète de votre profil (pseudo + cadre + avatar + profil) avec comme particularité principale un profil qui apparait en tournant. Un petite explication en image est surement préférable :

    Image 1
    Image 2
    Image 3

    Donc pour l'explication, votre profil apparait normalement comme dans l'image 1. Ensuite, lorsque vous survolez la petite image en dessous de l'avatar inscrite "profil", le cadre se tourne (image 2 = intermédiaire de mouvement) pour arriver dans le bon sens comme sur l'image 3.

    Plutôt sympa, nan ? x)


    Installation HTML

    Pour modifier le profil sur vos forum vous devez aller dans le template "viewtopic_body", autrement nommé "Affichage d'un sujet". Dans ce template, repérez le code suivant :

    Code:
    <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
             <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                <span class="postdetails poster-profile">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
                <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->
                {postrow.displayed.POSTER_RPG}
             </span><br />
             <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
          </td>

    Il commence à la ligne 87 normalement. C'est la case du profil ("td" en codage html désignant la case d'un tableau).

    Remplacez l'intégralité de ce passage par celui-ci :

    Code:
    <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                      <div class="profil_mess">
             <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
                <span class="postdetails poster-profile">
                {postrow.displayed.POSTER_RANK}<br />
                                      {postrow.displayed.RANK_IMAGE}</span>
                        <span class="avatar_mess">{postrow.displayed.POSTER_AVATAR}</span><br />
                      </div>
                      <div class="profil2_mess">
                        <center><img src="http://img15.hostingpics.net/pics/665019profilimage.png" /></center>
                        <div class="profil2_content"><span class="postdetails poster-profile">
                <!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                <!-- END profile_field -->
                {postrow.displayed.POSTER_RPG}
             </span><br />
                          <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" /></div>
                      </div>
          </td>

    N'oubliez pas d'enregistrer et de valider votre template modifié !


    Installation CSS

    Allez ensuite dans votre Feuille CSS pour y ajouter ce code, qui mettra en forme votre profil :

    Code:
    .profil_mess
    {
      position: relative;
      z-index: 9;
      width: 210px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 10px;
      background-color: #333333;
      padding: 4px;
      text-align: center;
      border-radius: 10px;
      -moz-border-radius: 10px;
      -htm-border-radius: 10px;
      -o-border-radius: 10px;
      -webkit-border-radius: 10px;
      border: 2px solid #5b5b5b;
      box-shadow: 0px 0px 5px #000000;
      -moz-box-shadow: 0px 0px 5px #000000;
      -htm-box-shadow: 0px 0px 5px #000000;
      -o-box-shadow: 0px 0px 5px #000000;
      -webkit-box-shadow: 0px 0px 5px #000000;
    }

    .name
    {
      display: block;
      text-transform: uppercase;
      margin-top: -15px;
      margin-bottom: -10px;
      font-size: 14px;
      font-family: arial black;
      text-shadow: 1px 1px 0px #000000;
      padding-bottom: 5px;
      border-bottom: 1px dashed #5b5b5b;
    }

    .avatar_mess
    {
      display: block;
      width: 200px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 10px;
      height: 320px;
      overflow: hidden;
      border: 5px solid #0d0d0d;
      opacity: 0.7;
      -moz-opacity: 0.7;
      -khtml-opacity: 0.7;
      filter: alpha(opacity=70);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }
    .avatar_mess:hover
    {
      opacity: 1;
      -moz-opacity: 1;
      -khtml-opacity: 1;
      filter: alpha(opacity=100);
      transition: 1s;
      -moz-transition: 1s;
      -o-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
    }

    .profil2_mess
    {
      position: relative;
      z-index: 1;
      width: 180px;
      margin-left: auto;
      margin-right: auto;
      margin-top: -202px;
      background-color: #141414;
      padding-left: 4px;
      padding-right: 4px;
      text-align: left;
      border-radius: 10px;
      -moz-border-radius: 10px;
      -htm-border-radius: 10px;
      -o-border-radius: 10px;
      -webkit-border-radius: 10px;
      border: 2px solid #434343;
      box-shadow: 0px 0px 5px #000000;
      -moz-box-shadow: 0px 0px 5px #000000;
      -htm-box-shadow: 0px 0px 5px #000000;
      -o-box-shadow: 0px 0px 5px #000000;
      -webkit-box-shadow: 0px 0px 5px #000000;
      color: #434343 !important;
      transform: rotate(-180deg);
      -moz-transform: rotate(-180deg);
      -o-transform: rotate(-180deg);
      -htm-transform: rotate(-180deg);
      -webkit-transform: rotate(-180deg);
      transition: 2s;
      -moz-transition: 2s;
      -o-transition: 2s;
      -htm-transition: 2s;
      -webkit-transition: 2s;
    }
    .profil2_mess:hover
    {
      margin-top: -42px;
      transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      -htm-transform: rotate(0deg);
      -webkit-transform: rotate(0deg);
      transition: 2s;
      -moz-transition: 2s;
      -o-transition: 2s;
      -htm-transition: 2s;
      -webkit-transition: 2s;
    }
    .profil2_content
    {
      display: block;
      width: 180px;
      height: 200px;
      max-height: 200px;
      overflow: auto;
    }


    Personnalisation

    Comme vous pouvez le constater, le profil est placé à l'envers sous l'avatar pour ensuite être remis dans le bon sens au survol. Du coup, il est OBLIGATOIRE que votre petite image de profil soit créée A L'ENVERS ! Bah oui, puisqu'elle n'apparait à l'endroit que parce que le bloc est à l'envers... Vous suivez ? XD

    Pour le reste, il s'agit essentiellement de couleurs à changer, guère plus.

    Parmi les effets du profil, l'avatar est en opacité légèrement réduite et devient opaque au survol, et le pseudo est en majuscules.

    En cas d'utilisation de ces codes merci de mettre un crédit à Never-Utopia sur votre forum, même si vous personnalisez le code, la base a été écrite ici. Un petit crédit, ce n'est pas grand chose, et nous ne demandons que ça pour le partage de notre petit savoir x)

    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.


    Dernière édition par Sparrow-style le Lun 6 Mai 2013 - 11:37, édité 2 fois



    sign
    Aladiah
    Aladiah
    FémininAge : 27Messages : 58

    Ven 7 Oct 2016 - 20:12

    Mercii c'est magnifique :)
    Sparryx
    Sparryx
    MasculinAge : 21Messages : 71

    Ven 28 Oct 2016 - 19:17

    Merci
    RaisedByWolves
    RaisedByWolves
    FémininAge : 25Messages : 39

    Dim 6 Nov 2016 - 22:02

    thanks *-*
    Cendre de Lune
    Cendre de Lune
    FémininAge : 60Messages : 11

    Lun 7 Nov 2016 - 19:40

    Merci pour voir
    Bryan1997
    Bryan1997
    MasculinAge : 26Messages : 51

    Mar 8 Nov 2016 - 20:24

    merci
    Scratpub
    Scratpub
    FémininAge : 39Messages : 145

    Sam 3 Déc 2016 - 21:24

    Thank you !
    Paulind
    Paulind
    FémininAge : 22Messages : 24

    Ven 9 Déc 2016 - 19:36

    Merci beaucoup
    AkaZukin
    AkaZukin
    FémininAge : 29Messages : 35

    Sam 10 Déc 2016 - 15:36

    Trop cool! merci *_*
    Merkantia
    Merkantia
    FémininAge : 28Messages : 14

    Mar 20 Déc 2016 - 0:17

    Mercééééééééééé.
    xJokerxG
    xJokerxG
    MasculinAge : 29Messages : 12

    Mar 20 Déc 2016 - 4:35

    Merci beaucoup.^^
    Marec
    Marec
    MasculinAge : 28Messages : 21

    Jeu 29 Déc 2016 - 3:13

    Merci pour le tuto :)
    Gieve
    Gieve
    FémininAge : 34Messages : 123

    Dim 8 Jan 2017 - 23:39

    Merci du partage *O*
    Adiboo
    Adiboo
    MasculinAge : 34Messages : 22

    Ven 13 Jan 2017 - 22:28

    Super j'aime beaucoup ça rend vraiment bien !
    Kimirsu Anko
    Kimirsu Anko
    MasculinAge : 23Messages : 89

    Sam 14 Jan 2017 - 13:05

    Merci !
    Giovale
    Giovale
    MasculinAge : 32Messages : 16

    Mar 31 Jan 2017 - 21:30

    Merci !
    PuppetBlue
    PuppetBlue
    FémininAge : 31Messages : 113

    Sam 11 Fév 2017 - 16:51

    Mercii



    Mise en forme complète du profil "upside down" (CSS) - Page 23 Pupiii10
    Nezer
    Nezer
    MasculinAge : 22Messages : 4

    Mer 15 Fév 2017 - 3:25

    merco
    jean-claude
    jean-claude
    MasculinAge : 49Messages : 44

    Mer 8 Mar 2017 - 21:54

    merci
    Nightwing
    Nightwing
    FémininAge : 31Messages : 72

    Lun 13 Mar 2017 - 16:06

    Merci !
    CatVanHels
    CatVanHels
    FémininAge : 31Messages : 6

    Ven 17 Mar 2017 - 20:38

    merci
    Alexielios
    Alexielios
    FémininAge : 32Messages : 62

    Sam 18 Mar 2017 - 13:03

    Merci :)



    Mise en forme complète du profil "upside down" (CSS) - Page 23 Slytherin-House-member

    Mise en forme complète du profil "upside down" (CSS) - Page 23 Tales-of-Phantasia-Fan
    Mise en forme complète du profil "upside down" (CSS) - Page 23 Suikoden%2BII%2BFan
    Mise en forme complète du profil "upside down" (CSS) - Page 23 Star-Wars-Fan
    Mise en forme complète du profil "upside down" (CSS) - Page 23 Dominion%2BFan

    "People live their lives bound by what they accept as correct and true. That's how they define reality.
    But what does it mean to be correct or true?"
    Zayshin
    Zayshin
    FémininAge : 32Messages : 42

    Dim 26 Mar 2017 - 9:13

    Merci pour ton partage
    Linoa
    Linoa
    FémininAge : 34Messages : 42

    Lun 27 Mar 2017 - 18:49

    Merci !



    Mise en forme complète du profil "upside down" (CSS) - Page 23 Pdsm
    ~ If you come here... You'll find me. I promise ~
    Detlef Ivarson
    Detlef Ivarson
    FémininAge : 32Messages : 13

    Sam 8 Avr 2017 - 22:47

    J'adore et j'adhère. Merci beaucoup !
    Athéna
    Athéna
    FémininAge : 63Messages : 29

    Lun 10 Avr 2017 - 23:19

    Merci pour ce partage Wink



    "L'esprit est un instrument de musique avec une certaine gamme de tons,
    au-deLà desquels s'étend un silence infini."
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 10:09