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 :
Nike : Jusqu’à 50% sur les articles de ...
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
    Rimaï J. Godwin
    Rimaï J. Godwin
    MasculinAge : 28Messages : 93

    Dim 3 Mai 2015 - 19:37

    Merci o/
    BlueGhost
    BlueGhost
    MasculinAge : 22Messages : 138

    Lun 4 Mai 2015 - 18:41

    Merci du partage.



    Mise en forme complète du profil "upside down" (CSS) - Page 15 1476882517-signa

    ~ Upupupu... je ne suis pas une peluche, je suis Monokuma ! ~
    Danganronpaaa ♥
    darkhero246
    darkhero246
    MasculinAge : 31Messages : 179

    Mer 6 Mai 2015 - 21:08

    Merci pour le tuto
    Kira de Shola
    Kira de Shola
    FémininAge : 26Messages : 60

    Jeu 7 Mai 2015 - 21:13

    merci :)
    Punisher
    Punisher
    MasculinAge : 35Messages : 12

    Ven 8 Mai 2015 - 10:37

    nice merci
    Manon88
    Manon88
    FémininAge : 24Messages : 53

    Jeu 14 Mai 2015 - 17:51

    merci



    Pas de publicité dans les signatures, merci.
    rajani
    rajani
    MasculinAge : 24Messages : 15

    Ven 15 Mai 2015 - 8:12

    merci
    Liam212
    Liam212
    MasculinAge : 23Messages : 47

    Dim 17 Mai 2015 - 5:35

    génial !merci du partage ;p



    Mise en forme complète du profil "upside down" (CSS) - Page 15 11027963
    Dixy
    Dixy
    FémininAge : 30Messages : 234

    Lun 18 Mai 2015 - 20:27

    Très jolie merci !



    Mise en forme complète du profil "upside down" (CSS) - Page 15 ?c=isi&im=%2F8762%2F84558762%2Fpics%2F3210667051_1_13_DkYrqtSL
    Emma-Iseult
    Emma-Iseult
    FémininAge : 27Messages : 44

    Mer 20 Mai 2015 - 0:25

    Merci !
    Stanislava
    Stanislava
    FémininAge : 28Messages : 102

    Jeu 21 Mai 2015 - 7:11

    Oh, c'est très sympa, merci beaucoup !



    Mise en forme complète du profil "upside down" (CSS) - Page 15 777748signnu
    Chocolakato
    Chocolakato
    FémininAge : 33Messages : 837

    Ven 22 Mai 2015 - 12:31

    Ouii !Mercii !



    Izaya Orihara
    Izaya Orihara
    FémininAge : 22Messages : 105

    Dim 24 Mai 2015 - 2:56

    Merci du partage.
    Ellen Lesley
    Ellen Lesley
    FémininAge : 109Messages : 79

    Dim 24 Mai 2015 - 14:38

    Cool !
    Yooachte
    Yooachte
    FémininAge : 31Messages : 54

    Lun 25 Mai 2015 - 3:16

    Merci beaucoup :)
    Phoenix Brul'Plum
    Phoenix Brul'Plum
    FémininAge : 29Messages : 18

    Lun 25 Mai 2015 - 14:36

      Merci !



    Mise en forme complète du profil "upside down" (CSS) - Page 15 Najaah10
    Wolf Valley
    Wolf Valley
    FémininAge : 24Messages : 72

    Lun 25 Mai 2015 - 14:40

    Magnifique je le croise sur plein de forum !
    Djine
    Djine
    FémininAge : 28Messages : 19

    Lun 25 Mai 2015 - 17:21

    Magnifique ! Merci énormément du partage :kdo:
    EmYasmina
    EmYasmina
    FémininAge : 24Messages : 85

    Lun 25 Mai 2015 - 18:34

    Merci **
    The Mad Hatter
    The Mad Hatter
    MasculinAge : 29Messages : 38

    Mar 26 Mai 2015 - 14:36

    Trop bien merci



    Le meilleur moyen de réaliser l’impossible est de croire que c’est possible.
    Subarashi
    Subarashi
    MasculinAge : 26Messages : 64

    Mar 26 Mai 2015 - 14:58

    Fort sympathique.
    Edward Speleers
    Edward Speleers
    MasculinAge : 35Messages : 460

    Mer 27 Mai 2015 - 0:50

    AHah, super ça, merci



    Mise en forme complète du profil "upside down" (CSS) - Page 15 Edkidd11
    Yogi Nakagawa
    Yogi Nakagawa
    MasculinAge : 23Messages : 94

    Dim 31 Mai 2015 - 16:35

    J'ai besoin euhhhh
    Merci!
    Sneakazuha
    Sneakazuha
    FémininAge : 28Messages : 34

    Ven 5 Juin 2015 - 16:24

    J'adore **
    MajorNeuf
    MajorNeuf
    MasculinAge : 28Messages : 19

    Ven 5 Juin 2015 - 17:35

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 21:24