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.

-20%
Le deal à ne pas rater :
(Adhérents Fnac) Enceinte Bluetooth Marshall Stanmore II Noir
199.99 € 249.99 €
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
    Lilandrile
    Lilandrile
    FémininAge : 38Messages : 60

    Jeu 13 Avr 2017 - 21:07

    Classe merci Razz
    Egyfu
    Egyfu
    FémininAge : 30Messages : 56

    Mer 19 Avr 2017 - 23:49

    Merci beaucoup :)
    Demone
    Demone
    FémininAge : 33Messages : 5

    Jeu 20 Avr 2017 - 13:44

    MErci !
    LaLigneVerte
    LaLigneVerte
    MasculinAge : 24Messages : 6

    Ven 28 Avr 2017 - 0:24

    Merci beaucoup !
    Rikudou-senin
    Rikudou-senin
    MasculinAge : 29Messages : 6

    Ven 19 Mai 2017 - 23:08

    Merci
    Hakuna Patata
    Hakuna Patata
    FémininAge : 31Messages : 73

    Mar 23 Mai 2017 - 15:54

    C'est top ça ! Merci bien ! :)
    John:
    John:
    MasculinAge : 30Messages : 56

    Mar 30 Mai 2017 - 4:02

    Merci :3
    Taraserie
    Taraserie
    FémininAge : 48Messages : 9

    Mer 7 Juin 2017 - 19:48

    super sympa! merci
    chelsey
    chelsey
    FémininAge : 28Messages : 17

    Mar 4 Juil 2017 - 15:10

    Thank's!
    Carasama
    Carasama
    FémininAge : 28Messages : 98

    Jeu 20 Juil 2017 - 18:48

    merci
    Sigril
    Sigril
    MasculinAge : 25Messages : 13

    Ven 28 Juil 2017 - 2:13

    merci
    .Lucifer.
    .Lucifer.
    MasculinAge : 50Messages : 184

    Sam 29 Juil 2017 - 0:58

    Merci beaucoup pour ce partage ! Wink



    Mise en forme complète du profil "upside down" (CSS) - Page 24 978358Divine
    Strabo
    Strabo
    FémininAge : 36Messages : 18

    Jeu 17 Aoû 2017 - 23:53

    Merci du partage!
    DarkWrestler.
    DarkWrestler.
    MasculinAge : 29Messages : 36

    Jeu 24 Aoû 2017 - 1:31

    Merci
    Ahina
    Ahina
    FémininAge : 42Messages : 73

    Sam 26 Aoû 2017 - 16:51

    Merci pour le code :)
    Qasim67
    Qasim67
    MasculinAge : 31Messages : 7

    Sam 26 Aoû 2017 - 19:28

    Merci, j'adore
    Nyls
    Nyls
    MasculinAge : 23Messages : 28

    Sam 9 Sep 2017 - 16:13

    merci bien !
    missnothing21
    missnothing21
    FémininAge : 31Messages : 29

    Ven 15 Sep 2017 - 21:46

    Merciiii
    phenixia74
    phenixia74
    FémininAge : 45Messages : 61

    Mar 19 Sep 2017 - 18:38

    Merci beaucoup ♥
    ¨Lame Spirit
    ¨Lame Spirit
    FémininAge : 26Messages : 35

    Mar 19 Sep 2017 - 21:23

    Merci chef 8D
    Dark Flame Master
    Dark Flame Master
    MasculinAge : 25Messages : 4

    Mer 27 Sep 2017 - 4:57

    merci
    Illeanëlia
    Illeanëlia
    FémininAge : 37Messages : 404

    Mer 11 Oct 2017 - 10:08

    magnifique merci pour ce partage *-*
    Mirony
    Mirony
    FémininAge : 36Messages : 44

    Dim 15 Oct 2017 - 3:27

    C'est superbe! Merci pour ce superbe partage
    Sow_Oxalys
    Sow_Oxalys
    FémininAge : 33Messages : 21

    Mar 24 Oct 2017 - 22:07

    pas mal, merci !
    Anonymous
    Invité

    Jeu 23 Nov 2017 - 1:39

    J'ADORE Very Happy Très beau travail & Merci du partage Very Happy Tellement plus simple comme cela Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 5:15