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 du moment :
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
    Glow
    Glow
    FémininAge : 24Messages : 94

    Jeu 12 Fév 2015 - 18:55

    Merci bien !
    Sweet Angel
    Sweet Angel
    FémininAge : 41Messages : 153

    Mar 17 Fév 2015 - 9:39

    Comme tjs j'adore! Merci
    Bleu
    Bleu
    FémininAge : 26Messages : 14

    Jeu 19 Fév 2015 - 13:19

    Merci !
    Drysfer
    Drysfer
    MasculinAge : 34Messages : 71

    Jeu 19 Fév 2015 - 23:26

    Merci



    Mise en forme complète du profil "upside down" (CSS) - Page 13 Gc001
    Abby Reever
    Abby Reever
    FémininAge : 32Messages : 146

    Dim 22 Fév 2015 - 17:22

    Haaaan c'est ce que je cherchais! *-*
    Popcorn
    Popcorn
    MasculinAge : 34Messages : 41

    Lun 23 Fév 2015 - 10:09

    Très classe, merci !
    Thalia Grace
    Thalia Grace
    FémininAge : 27Messages : 66

    Lun 23 Fév 2015 - 13:52

    Merci, c'est vraiment sublime ! ♥
    Kokoro Korou
    Kokoro Korou
    MasculinAge : 28Messages : 74

    Mar 24 Fév 2015 - 18:28

    Merci ♥
    MxPrime2
    MxPrime2
    MasculinAge : 29Messages : 81

    Mar 24 Fév 2015 - 21:02

    Super
    Anonymous
    Invité

    Mer 25 Fév 2015 - 17:28

    Thanks!
    James K. Lindley
    James K. Lindley
    MasculinAge : 33Messages : 46

    Ven 27 Fév 2015 - 18:39

    Magnifique ! merci du partage ! *_*
    Mystick
    Mystick
    FémininAge : 39Messages : 100

    Ven 27 Fév 2015 - 21:38

    Je suis trop fan, merci du partage
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Mer 4 Mar 2015 - 0:18

    j'ai déjà vu ca sur des fow ! ca m'interesse :)
    Océ
    Océ
    FémininAge : 49Messages : 363

    Mer 4 Mar 2015 - 10:20

    Merci ^^

    Jadesse
    Jadesse
    FémininAge : 25Messages : 30

    Mer 4 Mar 2015 - 13:25

    Merci
    Synny
    Synny
    FémininAge : 22Messages : 55

    Mer 4 Mar 2015 - 17:18

    Merci du partage :)
    Krager
    Krager
    MasculinAge : 28Messages : 68

    Sam 7 Mar 2015 - 12:01

    MERCI
    Patdrue
    Patdrue
    FémininAge : 34Messages : 158

    Sam 7 Mar 2015 - 22:09

    J'aime beaucoup! QUEL TALENT!
    Lakia
    Lakia
    FémininAge : 25Messages : 138

    Sam 7 Mar 2015 - 23:56

    mercii ^^
    AyaseNeko
    AyaseNeko
    FémininAge : 27Messages : 55

    Dim 8 Mar 2015 - 18:09

    merciii !
    Adélia
    Adélia
    FémininAge : 26Messages : 21

    Lun 9 Mar 2015 - 14:10

    ça a l'air super, merci Very Happy
    EOS
    EOS
    MasculinAge : 31Messages : 34

    Mar 10 Mar 2015 - 19:25

    Merci
    Inoue Musaki
    Inoue Musaki
    FémininAge : 34Messages : 147

    Jeu 12 Mar 2015 - 8:31

    Merci ^^
    Kamui Kyuuji
    Kamui Kyuuji
    MasculinAge : 31Messages : 30

    Jeu 19 Mar 2015 - 10:57

    Merci beaucoup.
    Satyrix
    Satyrix
    MasculinAge : 26Messages : 18

    Dim 22 Mar 2015 - 13:13

    la poulpe a écrit:Wahouuu j'adore !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 15:03