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 : -20%
(Adhérents Fnac) Enceinte Bluetooth Marshall ...
Voir le deal
199.99 €

    Mise en forme complète du profil "upside down" (CSS)

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    Sam 24 Nov 2012 - 1:19

    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
    Lenou
    Lenou
    MasculinAge : 28Messages : 20

    Dim 25 Nov 2012 - 12:42

    *o* Wahou. Ça à l'air super. Merci du partage =)
    totothib
    totothib
    MasculinAge : 21Messages : 54

    Dim 25 Nov 2012 - 18:23

    Trop bien!!!Deuxième à poster :cool:
    Cuicui
    Cuicui
    FémininAge : 33Messages : 112

    Dim 25 Nov 2012 - 19:11

    J'aime beaucoup, merci :)



    Mise en forme complète du profil "upside down" (CSS) Eros11
    Battosai
    Battosai
    MasculinAge : 23Messages : 29

    Dim 25 Nov 2012 - 23:06

    Wii merci :) !
    giannismoll7
    giannismoll7
    MasculinAge : 29Messages : 62

    Mar 27 Nov 2012 - 17:44

    merci :)
    Neko Mimi
    Neko Mimi
    FémininAge : 33Messages : 165

    Mar 27 Nov 2012 - 19:38

    Super, merci =3



    Mise en forme complète du profil "upside down" (CSS) Tumblr_me5uxaCZuJ1qj73e2o1_500
    Barbosa
    Barbosa
    MasculinAge : 32Messages : 22

    Mer 28 Nov 2012 - 4:32

    Merci :)



    Mise en forme complète du profil "upside down" (CSS) 1164232998
    KaraV3
    KaraV3
    MasculinAge : 27Messages : 27

    Mer 28 Nov 2012 - 13:48


    Merci
    only'hope
    only'hope
    FémininAge : 34Messages : 9

    Mer 28 Nov 2012 - 14:28

    Merci beaucoup pour le partage (a)
    Lucy Nyah
    Lucy Nyah
    FémininAge : 26Messages : 20

    Mer 28 Nov 2012 - 16:02

    Merci beaucoup !!!
    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    Jeu 29 Nov 2012 - 12:38

    Encore une fois un code canon de la part de notre Captain Very Happy Merci de le faire partager <3
    CuBz
    CuBz
    MasculinAge : 34Messages : 27

    Sam 1 Déc 2012 - 10:01

    merci
    Louve
    Louve
    FémininAge : 30Messages : 1529

    Sam 1 Déc 2012 - 19:14

    Ô Cap'tain ! J'ai disparu longtemps mais une fois encore, NU me sauve la vie !





    Mise en forme complète du profil "upside down" (CSS) Nyan_cat_in_portals_by_ds_dna-d56j8yb

    [En pause]
    la poulpe
    la poulpe
    FémininAge : 31Messages : 21

    Dim 2 Déc 2012 - 13:21

    Wahouuu j'adore !
    Chucky'
    Chucky'
    MasculinAge : 26Messages : 80

    Dim 2 Déc 2012 - 14:28

    Merci Very Happy



    Mise en forme complète du profil "upside down" (CSS) 1370524847-cooltext1062715975
    Dastan
    Dastan
    MasculinAge : 40Messages : 111

    Dim 2 Déc 2012 - 15:13

    Pile ce que je cherchait! merci beaucoup pour ce tuto! **
    OMJ
    OMJ
    FémininAge : 33Messages : 92

    Dim 2 Déc 2012 - 17:09

    Merci du partage
    Fares
    Fares
    MasculinAge : 31Messages : 51

    Dim 2 Déc 2012 - 17:22

    Super ce tuto, digne de Sparrow ça Wink
    Depp
    Depp
    FémininAge : 32Messages : 300

    Dim 2 Déc 2012 - 17:45

    Merci beaucoup pour le partage Very Happy



    Mise en forme complète du profil "upside down" (CSS) Tumblr_nenygwIlcz1s4u464o1_500
    ♕ William
    ♕ William
    MasculinAge : 26Messages : 72

    Dim 2 Déc 2012 - 20:49

    Thanks!



    Mise en forme complète du profil "upside down" (CSS) Right_10
    William
    ladybr
    ladybr
    FémininAge : 34Messages : 45

    Dim 2 Déc 2012 - 21:45

    mercii
    Arrogant Mischief
    Arrogant Mischief
    MasculinAge : 28Messages : 70

    Lun 3 Déc 2012 - 0:41

    Merci pour ce super tuto !



    Mise en forme complète du profil "upside down" (CSS) Nu211
    WhiteKrow
    WhiteKrow
    MasculinAge : 30Messages : 26

    Mar 4 Déc 2012 - 16:26

    ▬ merci!
    Alehandra
    Alehandra
    FémininAge : 28Messages : 43

    Jeu 6 Déc 2012 - 13:51

    Merci du partage, c'est top ça !
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 3:53