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 :
Elden Ring Shadow Of The Erdtree édition Collector : où le ...
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
    Shanyme Thibolt
    Shanyme Thibolt
    FémininAge : 30Messages : 156

    Lun 9 Nov 2015 - 21:47

    Merci pour le partage
    Banhjo
    Banhjo
    MasculinAge : 26Messages : 76

    Jeu 12 Nov 2015 - 3:03

    Merci !
    Sury
    Sury
    FémininAge : 28Messages : 82

    Jeu 12 Nov 2015 - 14:12

    c'est super merci
    Vixen Smile
    Vixen Smile
    FémininAge : 30Messages : 9

    Jeu 12 Nov 2015 - 18:07

    Merci :)
    Slyd
    Slyd
    MasculinAge : 33Messages : 25

    Jeu 12 Nov 2015 - 20:52

    Merci Wink
    Ayashaa
    Ayashaa
    FémininAge : 30Messages : 2

    Ven 13 Nov 2015 - 13:58

    Merci :)
    Toby P. Nolan
    Toby P. Nolan
    FémininAge : 25Messages : 38

    Dim 15 Nov 2015 - 20:51

    super merci!
    Luunalight
    Luunalight
    FémininAge : 33Messages : 98

    Mer 18 Nov 2015 - 15:03

    MErci !
    Girly
    Girly
    FémininAge : 26Messages : 116

    Ven 20 Nov 2015 - 17:16

    merci
    Ghost of Darkness
    Ghost of Darkness
    FémininAge : 29Messages : 46

    Dim 22 Nov 2015 - 17:34

    PARFAIT !!! ♥________♥
    Merci beaucoup beaucoup beaucoup beaucoup *-*



    Ghost of Darkness
    All my friends are heathens, take it slow. Wait for them to ask you who you know. Please dont make any sudden moves. You don't know the half od the abuse.


    Ehlènoha
    Ehlènoha
    FémininAge : 35Messages : 27

    Lun 23 Nov 2015 - 11:32

    Superbe, merci beaucoup !
    sweetheart.
    sweetheart.
    FémininAge : 36Messages : 120

    Lun 23 Nov 2015 - 23:18

    Merci



    Un bisou pour Invité


    Un bisou pour...
    Invité
    Devil.
    Devil.
    FémininAge : 26Messages : 58

    Ven 27 Nov 2015 - 22:29

    Magnifique ! Merci :3
    cynical-echo
    cynical-echo
    FémininAge : 26Messages : 41

    Jeu 3 Déc 2015 - 8:29

    Merci du codage, c'est très sympa comme codage !
    Anya-Gackt
    Anya-Gackt
    FémininAge : 32Messages : 59

    Mer 9 Déc 2015 - 16:25

    Merci beaucoup =)
    Tria
    Tria
    FémininAge : 26Messages : 127

    Ven 11 Déc 2015 - 22:09

    Merci !



    "Tomber est permis, se relever est ordonné."
    Mise en forme complète du profil "upside down" (CSS) - Page 19 Hv62
    Milia
    Milia
    FémininAge : 34Messages : 116

    Lun 14 Déc 2015 - 21:18

    Très très beau. Merci
    pawnee
    pawnee
    FémininAge : 34Messages : 21

    Sam 19 Déc 2015 - 1:00

    c'est beau et original, merci du partage!
    Fame
    Fame
    MasculinAge : 34Messages : 240

    Sam 19 Déc 2015 - 5:19

    merci
    sanae
    sanae
    FémininAge : 33Messages : 22

    Lun 21 Déc 2015 - 20:05

    Oh Merci
    Cola
    Cola
    FémininAge : 24Messages : 81

    Mer 23 Déc 2015 - 2:12

    thanks



    Mise en forme complète du profil "upside down" (CSS) - Page 19 Signa_11
    Kitket
    Kitket
    FémininAge : 40Messages : 106

    Dim 27 Déc 2015 - 18:53

    Merci
    DeadlyRuby
    DeadlyRuby
    FémininAge : 24Messages : 40

    Lun 28 Déc 2015 - 14:10

    Merci. ^^



    Mise en forme complète du profil "upside down" (CSS) - Page 19 15122001123111422113841857
    KimmyKinder
    KimmyKinder
    FémininAge : 22Messages : 181

    Jeu 31 Déc 2015 - 14:02

    Thx
    Doo
    Doo
    FémininAge : 32Messages : 42

    Jeu 7 Jan 2016 - 0:03

    merci du partage!
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 9:38