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.

-22%
Le deal à ne pas rater :
Promo sur APPLE Airpods 2 avec boitier de charge
140 € 179 €
Voir le deal

    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
    Mangédéfruiélégumeuh
    Mangédéfruiélégumeuh
    MasculinAge : 23Messages : 83

    le Mer 11 Juin 2014 - 14:06

    merci :)
    Shiwaii
    Shiwaii
    MasculinAge : 31Messages : 112

    le Mer 11 Juin 2014 - 21:01

    Merci (:
    Shinju.dot
    Shinju.dot
    FémininAge : 31Messages : 88

    le Ven 13 Juin 2014 - 10:48

    merci
    Toshiki
    Toshiki
    FémininAge : 24Messages : 56

    le Ven 13 Juin 2014 - 15:08

    merci
    Risa
    Risa
    FémininAge : 32Messages : 260

    le Ven 13 Juin 2014 - 23:00

    Merci du partage \o/
    mel1986
    mel1986
    FémininAge : 34Messages : 38

    le Sam 14 Juin 2014 - 13:42

    Ooooh, c'est super joli ça. Merci du partage
    l'intruse
    l'intruse
    FémininAge : 26Messages : 46

    le Lun 16 Juin 2014 - 4:13

    c'est génial merci! Very Happy
    P'tit loup
    P'tit loup
    MasculinAge : 38Messages : 449

    le Lun 16 Juin 2014 - 12:44

    re merci ^^



    Mise en forme complète du profil "upside down" (CSS) - Page 5 30xivrd
    sunalibi
    sunalibi
    FémininAge : 35Messages : 5

    le Mar 17 Juin 2014 - 11:16

    Wow, merci beaucoup pour ce tuto, !
    Lestrange
    Lestrange
    FémininAge : 25Messages : 165

    le Mar 17 Juin 2014 - 13:04

    Merciiiii Very Happy
    Hashirama
    Hashirama
    MasculinAge : 23Messages : 63

    le Jeu 19 Juin 2014 - 22:22

    thx
    Benox
    Benox
    MasculinAge : 23Messages : 93

    le Sam 21 Juin 2014 - 14:05

    Je cherchais à faire ça depuis très longtemps et enfin je le trouve merci beaucoup

    Mordiern
    Mordiern
    FémininAge : 43Messages : 285

    le Sam 21 Juin 2014 - 20:52

    Merci, j'adore cet façon de faire. Trop joli :)
    Merino
    Merino
    MasculinAge : 25Messages : 55

    le Dim 22 Juin 2014 - 12:17

    Merci, c'est classe!
    Porcelain Detox
    Porcelain Detox
    MasculinAge : 26Messages : 91

    le Dim 22 Juin 2014 - 17:30

    Merci ^^
    Saku Hana
    Saku Hana
    FémininAge : 22Messages : 27

    le Dim 22 Juin 2014 - 19:09

    Merci :)
    x_Titia
    x_Titia
    FémininAge : 29Messages : 92

    le Lun 23 Juin 2014 - 15:13

    merci du partage
    PrincesseÔ
    PrincesseÔ
    FémininAge : 23Messages : 220

    le Mar 24 Juin 2014 - 14:04

    Super =)
    Deadpoolio
    Deadpoolio
    MasculinAge : 31Messages : 277

    le Mar 24 Juin 2014 - 14:26

    Merci mon capitaine :)
    Joli boulot
    Stitch56
    Stitch56
    FémininAge : 27Messages : 209

    le Mar 24 Juin 2014 - 20:18

    merci ♥
    avatar
    Chipman
    MasculinAge : 26Messages : 18

    le Sam 28 Juin 2014 - 12:43

    Merci !
    shibari
    shibari
    MasculinAge : 25Messages : 280

    le Sam 28 Juin 2014 - 16:03

    merki



    Mise en forme complète du profil "upside down" (CSS) - Page 5 140117011601839279

    Merci Dakota pour ce kit.
    Féréole
    Féréole
    FémininAge : 33Messages : 55

    le Lun 30 Juin 2014 - 14:45

    Merci :)
    Darkyfrite
    Darkyfrite
    MasculinAge : 108Messages : 595

    le Mar 1 Juil 2014 - 20:04

    Merci !



    Mise en forme complète du profil "upside down" (CSS) - Page 5 734710tumblrlr3y3p5zdz1qlqscio1500
    Anguis
    Anguis
    FémininAge : 29Messages : 28

    le Mer 2 Juil 2014 - 16:01

    Merci Capitaine <3
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Jan 2021 - 9:54