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.

-50%
Le deal à ne pas rater :
-50% sur les sacs à dos pour ordinateur portable Urban Factory ...
19.99 € 39.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
    Mikasa
    Mikasa
    FémininAge : 26Messages : 162

    Mer 2 Juil 2014 - 19:21

    Wow, magnifique :O Tu es vraiment bon :O



    Mise en forme complète du profil "upside down" (CSS) - Page 6 Miksa210
    Signa:
    LatInna
    LatInna
    FémininAge : 28Messages : 26

    Mer 2 Juil 2014 - 19:33

    Merci beaucoup j'adore !




    Changement de PSEUDO

    LatInna devient Lylytaly.
    Mise en forme complète du profil "upside down" (CSS) - Page 6 Brendon-urie-gif-17
    avatar
    Drogba JR
    MasculinAge : 31Messages : 90

    Mer 2 Juil 2014 - 20:27

    troop beauuu Very Happy
    Lenalee
    Lenalee
    FémininAge : 34Messages : 40

    Jeu 3 Juil 2014 - 0:34

    merci beaucoup
    EricSouvaltzis
    EricSouvaltzis
    MasculinAge : 25Messages : 47

    Ven 4 Juil 2014 - 1:20

    Merci
    EricSouvaltzis
    EricSouvaltzis
    MasculinAge : 25Messages : 47

    Ven 4 Juil 2014 - 16:23

    merci
    avatar
    Drogba JR
    MasculinAge : 31Messages : 90

    Sam 5 Juil 2014 - 21:50

    les images doivent être de combien taille s'il vous plait ?
    Marwin
    Marwin
    MasculinAge : 31Messages : 47

    Dim 6 Juil 2014 - 2:06

    merci
    smily
    smily
    FémininAge : 25Messages : 66

    Lun 7 Juil 2014 - 15:12

    Merci :3 !
    Anonymous
    Invité

    Lun 7 Juil 2014 - 16:28

    Merci c'est cool Very Happy
    Demoniall
    Demoniall
    FémininAge : 23Messages : 74

    Lun 7 Juil 2014 - 17:48

    Merci Capt'ain !
    Valou93
    Valou93
    MasculinAge : 31Messages : 50

    Mar 8 Juil 2014 - 16:14

    Merci Very Happy
    Cherry'
    Cherry'
    FémininAge : 30Messages : 70

    Mar 8 Juil 2014 - 17:33

    Merci beaucoup pour ce partage ! ♥
    Foudry
    Foudry
    MasculinAge : 23Messages : 31

    Ven 11 Juil 2014 - 14:30

    Waw °° Merci !
    poussette59
    poussette59
    FémininAge : 39Messages : 178

    Ven 11 Juil 2014 - 18:46

    super =) merci
    Istina
    Istina
    FémininAge : 29Messages : 111

    Ven 11 Juil 2014 - 20:25

    Merci :)
    Rainbow Dash
    Rainbow Dash
    FémininAge : 25Messages : 52

    Lun 14 Juil 2014 - 3:54

    thanks!
    Mimirage
    Mimirage
    FémininAge : 32Messages : 17

    Lun 14 Juil 2014 - 14:36

    Merci pour ce code!
    Kâ Lys
    Kâ Lys
    MasculinAge : 32Messages : 299

    Jeu 17 Juil 2014 - 15:49

    Merciii! Enfin!



    Mise en forme complète du profil "upside down" (CSS) - Page 6 Bug
    Fayzl4D
    Fayzl4D
    MasculinAge : 27Messages : 84

    Dim 20 Juil 2014 - 10:28

    merci
    Yumi-chan
    Yumi-chan
    FémininAge : 30Messages : 67

    Dim 20 Juil 2014 - 16:57

    Merci ! :)
    Keith Sanders
    Keith Sanders
    MasculinAge : 26Messages : 22

    Dim 20 Juil 2014 - 17:20

    Génial Very Happy
    Kau
    Kau
    FémininAge : 22Messages : 148

    Jeu 24 Juil 2014 - 18:14

    Merciii ^^
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Sam 26 Juil 2014 - 14:36

    merci



    Patricia :)
    avatar
    Zahil
    MasculinAge : 30Messages : 29

    Dim 27 Juil 2014 - 17:45

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 19:59