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 : -50%
-50% sur les sacs à dos pour ordinateur ...
Voir le deal
19.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

    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
    Harmonia
    Harmonia
    FémininAge : 26Messages : 110

    Lun 29 Déc 2014 - 15:54

    Merci *^*
    yukitg
    yukitg
    FémininAge : 34Messages : 18

    Sam 3 Jan 2015 - 6:13

    Merci! C'est trop beau!
    Evil Queen 4ever
    Evil Queen 4ever
    FémininAge : 31Messages : 64

    Jeu 8 Jan 2015 - 0:37

    superbe Very Happy




    Mise en forme complète du profil "upside down" (CSS) - Page 12 478753Chantal
    XaLis
    XaLis
    FémininAge : 26Messages : 44

    Sam 10 Jan 2015 - 21:36

    très beau, merci :)
    Kwiks
    Kwiks
    FémininAge : 26Messages : 20

    Dim 11 Jan 2015 - 16:27

    C'est vraiment génial merci
    Calypso Luciano
    Calypso Luciano
    FémininAge : 33Messages : 333

    Dim 11 Jan 2015 - 18:27

    merci ^^
    Pein94
    Pein94
    Age : 30Messages : 59

    Ven 16 Jan 2015 - 12:22

    merci :) , vraiment génial :)
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 32Messages : 315

    Ven 16 Jan 2015 - 17:57

    De nouveau merci ^^
    MOON LEE
    MOON LEE
    FémininAge : 29Messages : 149

    Sam 17 Jan 2015 - 23:54

    Merci
    Klemmeria
    Klemmeria
    FémininAge : 24Messages : 147

    Dim 18 Jan 2015 - 12:15

    thanks!



    Mise en forme complète du profil "upside down" (CSS) - Page 12 Btqy
    Akiyuki
    Akiyuki
    MasculinAge : 25Messages : 89

    Jeu 22 Jan 2015 - 19:38

    Merci beaucoup !
    âme
    âme
    FémininAge : 58Messages : 154

    Jeu 22 Jan 2015 - 19:48

    Excellent, j'adore ! Décidément N-U n'en finira pas de m'épater, c'est pour cette raison que je donne cette adresse à tous ceux me demandant où trouver des codages et idées pour les forums.
    Ici, c'est la référence !



    Sur Color'Avenue, L'urgent est déjà fait, l'impossible est en cours...pour les miracles, prévoir un délais.
    Thorn
    Thorn
    MasculinAge : 23Messages : 432

    Sam 24 Jan 2015 - 17:06

    Merci !



    Mise en forme complète du profil "upside down" (CSS) - Page 12 Kryr
    Lórien
    Lórien
    FémininAge : 29Messages : 19

    Jeu 29 Jan 2015 - 0:56

    L'idée est vraiment géniale, merci beaucoup pour la mise à disposition >w< ! Mon forum va être tout beau avec ça Wink
    Mimio
    Mimio
    FémininAge : 29Messages : 191

    Jeu 29 Jan 2015 - 5:59

    Toppy, merci !! o:



    Mise en forme complète du profil "upside down" (CSS) - Page 12 134914Signazael2
    Ondée
    Ondée
    FémininAge : 25Messages : 659

    Jeu 5 Fév 2015 - 13:08

    Je veux apprendre *o* Merci Very Happy



    EN VACANCES JUSQU'À DÉBUT AOÛT - TOTALEMENT ABSENTE
    Apokalip'z
    Apokalip'z
    MasculinAge : 30Messages : 290

    Jeu 5 Fév 2015 - 17:41

    merci Wink



    Mise en forme complète du profil "upside down" (CSS) - Page 12 1424818313-sign-apoka
    andril
    andril
    FémininAge : 34Messages : 42

    Ven 6 Fév 2015 - 15:00

    génial, merci !!!
    Hana Evali
    Hana Evali
    FémininAge : 33Messages : 195

    Ven 6 Fév 2015 - 22:54

    Merci o/



    Mise en forme complète du profil "upside down" (CSS) - Page 12 Ye49
    Scandalucia
    Scandalucia
    FémininAge : 33Messages : 234

    Sam 7 Fév 2015 - 14:39

    Merci beaucoup pour ce partage ! Ton code est superbe.
    Roromiya
    Roromiya
    FémininAge : 21Messages : 111

    Sam 7 Fév 2015 - 18:37

    Merci !



    Mise en forme complète du profil "upside down" (CSS) - Page 12 Enma10
    Artchie
    Artchie
    FémininAge : 32Messages : 43

    Dim 8 Fév 2015 - 23:23

    Ouah ! Je suis juste scotché ! C'est tellement chouette! Un grand bravo en tout cas, et un immense merci ! :gentleman:
    Henoch
    Henoch
    FémininAge : 41Messages : 34

    Lun 9 Fév 2015 - 17:12

    merci
    Colorful
    Colorful
    MasculinAge : 34Messages : 15

    Jeu 12 Fév 2015 - 1:40

    Merci je vais essayer d'intégrer ça à mon forum. J'ai encore jamais touché à ce genre de choses.
    Vegvisir
    Vegvisir
    FémininAge : 24Messages : 411

    Jeu 12 Fév 2015 - 12:06

    Je dirai même hyper sympa ! Merci Very Happy



    Mise en forme complète du profil "upside down" (CSS) - Page 12 1
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 13:04