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 à ne pas rater :
Enceinte portable JBL Clip 4 Bluetooth Noir à 29€
29 €
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
    Aleksei
    Aleksei
    MasculinAge : 28Messages : 20

    Jeu 8 Mai 2014 - 14:56

    Waou merci!!
    Nonze
    Nonze
    MasculinAge : 31Messages : 85

    Ven 9 Mai 2014 - 22:55

    Merci
    Angie Harkness
    Angie Harkness
    FémininAge : 41Messages : 725

    Sam 10 Mai 2014 - 1:36

    merci sparrow pour ce profil ^^
    Albator
    Albator
    MasculinAge : 35Messages : 100

    Sam 10 Mai 2014 - 19:26

    Je veux voir ! '-'
    Missa
    Missa
    FémininAge : 28Messages : 54

    Dim 11 Mai 2014 - 10:17

    Merci !



    Mise en forme complète du profil "upside down" (CSS) - Page 3 120812073937800125
    Presley♥Cash
    Presley♥Cash
    FémininAge : 33Messages : 80

    Dim 11 Mai 2014 - 16:35

    J'aime beaucoup :)
    Merci du partage
    Brindillee
    Brindillee
    FémininAge : 24Messages : 32

    Lun 12 Mai 2014 - 11:23

    Merci !
    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Mar 13 Mai 2014 - 12:49

    Merci Sparrow ^^"



    Eshon
    Eshon
    FémininAge : 43Messages : 197

    Mar 13 Mai 2014 - 15:13

    J'aime beaucoup le rendu ! ^^
    Merci !  Very Happy 
    O'Daim
    O'Daim
    FémininAge : 29Messages : 116

    Mar 13 Mai 2014 - 18:20

    Merci o/
    layna
    layna
    FémininAge : 32Messages : 69

    Mar 13 Mai 2014 - 22:58

    Sublimeeeeeeeeeee
    ClipClap
    ClipClap
    FémininAge : 23Messages : 60

    Mer 14 Mai 2014 - 14:40

    Cool ! Merci du partage ! ♥



    Mise en forme complète du profil "upside down" (CSS) - Page 3 435202SignatClip2
    Crowley
    Crowley
    FémininAge : 28Messages : 68

    Mer 14 Mai 2014 - 15:04

    C'est original et très joli, merci !
    Belle Morte
    Belle Morte
    FémininAge : 28Messages : 42

    Ven 16 Mai 2014 - 14:40

    Merci :)
    Rynkka
    Rynkka
    FémininAge : 25Messages : 120

    Ven 16 Mai 2014 - 18:27

    Un des codes que j'aime le plus. Merci Cap'taine!



    Mise en forme complète du profil "upside down" (CSS) - Page 3 48861711
    Moona Neko
    Moona Neko
    FémininAge : 29Messages : 75

    Ven 16 Mai 2014 - 20:39

    Merci !
    Kitty Galore
    Kitty Galore
    FémininAge : 33Messages : 55

    Sam 17 Mai 2014 - 0:59

    merci



    Clarisse
    Clarisse
    FémininAge : 24Messages : 3960

    Dim 18 Mai 2014 - 3:04

    Merci. Very Happy
    Ryu-Kin
    Ryu-Kin
    FémininAge : 37Messages : 125

    Mar 20 Mai 2014 - 5:19

    Merci beaucoup :)
    Chatchoum
    Chatchoum
    FémininAge : 33Messages : 43

    Mar 20 Mai 2014 - 16:05

    Marciii <3
    Hayate747
    Hayate747
    MasculinAge : 35Messages : 196

    Mer 21 Mai 2014 - 23:39

    Yes ! Merci 8D
    Xperience
    Xperience
    FémininAge : 28Messages : 156

    Jeu 22 Mai 2014 - 20:46

    Merci !



    Mise en forme complète du profil "upside down" (CSS) - Page 3 1453390429-tumblr-lv1fbrkxzh1qlnpia
    Eykillyn
    Eykillyn
    FémininAge : 27Messages : 19

    Jeu 22 Mai 2014 - 21:04

    Magnifique, merci pour le partage ^^



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

    ~ Nuvat & Venzel ~ Rebel & King  ♥ ~
    Hopyes
    Hopyes
    FémininAge : 36Messages : 93

    Ven 23 Mai 2014 - 21:09

    merci c'est sympas
    Luxuria
    Luxuria
    FémininAge : 27Messages : 83

    Ven 23 Mai 2014 - 22:04

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 12 Déc 2024 - 9:05