AccueilRechercherS'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.


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

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

    le 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
    -Resis
    -Resis
    MasculinAge : 24Messages : 25

    le Dim 5 Juin 2016 - 15:36

    waoo superbe
    Hige'
    Hige'
    FémininAge : 21Messages : 8

    le Dim 5 Juin 2016 - 20:36

    Merci ! Very Happy
    Kraiyz
    Kraiyz
    MasculinAge : 24Messages : 29

    le Mar 21 Juin 2016 - 18:21

    MERCI !
    Djeina
    Djeina
    FémininAge : 24Messages : 233

    le Jeu 23 Juin 2016 - 5:04

    Merci du partage ^^
    Applauze
    Applauze
    MasculinAge : 24Messages : 167

    le Jeu 23 Juin 2016 - 7:20

    Merci !
    tamedmind
    tamedmind
    FémininAge : 20Messages : 19

    le Dim 26 Juin 2016 - 0:50

    Wow merci!
    Mustique
    Mustique
    FémininAge : 25Messages : 10

    le Dim 26 Juin 2016 - 13:14

    Je trouve l'idée génial ! Merci à toi !
    Miyuna Kazaki
    Miyuna Kazaki
    MasculinAge : 23Messages : 5

    le Dim 26 Juin 2016 - 22:46

    Merci
    castles
    castles
    MasculinAge : 21Messages : 6

    le Lun 27 Juin 2016 - 14:11

    Merciii ! :)
    Velcuum
    Velcuum
    MasculinAge : 22Messages : 41

    le Sam 16 Juil 2016 - 19:44

    Merci C: !!
    dean winchester
    dean winchester
    MasculinAge : 26Messages : 85

    le Dim 17 Juil 2016 - 13:52

    merci
    Thanos
    Thanos
    MasculinAge : 25Messages : 84

    le Mer 20 Juil 2016 - 6:43

    Merci
    PhaerylGG
    PhaerylGG
    FémininAge : 25Messages : 13

    le Jeu 21 Juil 2016 - 13:32

    Merci pour tout
    Liintu
    Liintu
    FémininAge : 31Messages : 67

    le Jeu 21 Juil 2016 - 19:37

    ça gère merci !
    Bully
    Bully
    FémininAge : 18Messages : 39

    le Mer 27 Juil 2016 - 11:39

    chouette merci
    Anonymous
    Invité

    le Ven 19 Aoû 2016 - 21:09

    Merci beaucoup pour ce LS !
    marie-noelle
    marie-noelle
    FémininAge : 63Messages : 112

    le Mar 23 Aoû 2016 - 0:36

    merci :)
    ludoloveisa
    ludoloveisa
    MasculinAge : 32Messages : 62

    le Jeu 1 Sep 2016 - 13:38

    merci pour le partage
    Midori-chan
    Midori-chan
    FémininAge : 35Messages : 33

    le Sam 10 Sep 2016 - 14:19

    très sympa



    Le présent est un cadeau.
    Anonymous
    Invité

    le Sam 10 Sep 2016 - 14:22

    :)
    deeplies
    deeplies
    FémininAge : 26Messages : 11

    le Mer 21 Sep 2016 - 10:23

    Super merci !
    avatar
    Yunroxas
    FémininAge : 27Messages : 37

    le Dim 25 Sep 2016 - 22:26

    Merci !
    Sheewps
    Sheewps
    MasculinAge : 20Messages : 23

    le Mer 28 Sep 2016 - 21:38

    Ah super, merci du partage !!
    Lireloth
    Lireloth
    MasculinAge : 24Messages : 4

    le Mer 28 Sep 2016 - 21:45

    Merci Very Happy
    SuperSpaceCab
    SuperSpaceCab
    MasculinAge : 36Messages : 36

    le Ven 30 Sep 2016 - 6:22

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Jan 2021 - 11:39