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.

-23%
Le deal à ne pas rater :
EVGA SuperNOVA 650 G6 – Alimentation PC 100% modulaire 650W, 80+ ...
77.91 € 100.91 €
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
    Fuyuka
    Fuyuka
    FémininAge : 29Messages : 63

    Mar 12 Jan 2016 - 12:37

    Merciiiiii
    Necrolythia
    Necrolythia
    FémininAge : 36Messages : 580

    Mer 13 Jan 2016 - 13:36

    super merciiiiiiiiiiiiii



    Mise en forme complète du profil "upside down" (CSS) - Page 20 KKEVK8u
    rosebleudu10
    rosebleudu10
    FémininAge : 34Messages : 189

    Jeu 14 Jan 2016 - 13:25

    merci beaucoup
    didicmy
    didicmy
    FémininAge : 33Messages : 74

    Lun 18 Jan 2016 - 18:35

    Super merci du partage :d
    VincentWeever
    VincentWeever
    MasculinAge : 26Messages : 57

    Dim 24 Jan 2016 - 0:11

    Merci
    Brume Sauvage
    Brume Sauvage
    FémininAge : 31Messages : 35

    Mar 2 Fév 2016 - 14:44

    merci :3
    Choupy
    Choupy
    FémininAge : 30Messages : 8

    Mer 3 Fév 2016 - 16:24

    Merci
    blastrall
    blastrall
    MasculinAge : 29Messages : 41

    Sam 6 Fév 2016 - 19:45

    superbe
    Vador
    Vador
    MasculinAge : 23Messages : 64

    Sam 6 Fév 2016 - 22:29

    Merci !
    Sly King
    Sly King
    FémininAge : 27Messages : 75

    Dim 7 Fév 2016 - 0:34

    merciii :love:
    Okita
    Okita
    MasculinAge : 30Messages : 16

    Mer 17 Fév 2016 - 20:44

    Merci c'est génial Very Happy
    Rebekaah
    Rebekaah
    FémininAge : 29Messages : 51

    Ven 19 Fév 2016 - 17:41

    Merci !
    Kilda
    Kilda
    FémininAge : 43Messages : 73

    Ven 19 Fév 2016 - 21:15

    merci
    Shi
    Shi
    MasculinAge : 32Messages : 59

    Sam 20 Fév 2016 - 9:03

    Merci, c'est sublime :aww:
    amy pond
    amy pond
    FémininAge : 24Messages : 59

    Sam 20 Fév 2016 - 22:14

    Merci ! :)
    Darkius
    Darkius
    MasculinAge : 36Messages : 65

    Mar 23 Fév 2016 - 16:40

    Merci bien :)
    Gahia
    Gahia
    FémininAge : 35Messages : 50

    Sam 27 Fév 2016 - 11:12

    Merciiii
    Darouine Lius
    Darouine Lius
    MasculinAge : 34Messages : 76

    Dim 28 Fév 2016 - 16:15

    très sympa merci
    Shide
    Shide
    FémininAge : 35Messages : 60

    Dim 28 Fév 2016 - 23:12

    merci
    Eywa
    Eywa
    FémininAge : 38Messages : 14

    Mar 1 Mar 2016 - 12:54

    en effet c'est sympa
    Waize
    Waize
    FémininAge : 26Messages : 34

    Mar 1 Mar 2016 - 18:02

    merci :3
    Ichibari
    Ichibari
    FémininAge : 38Messages : 90

    Ven 4 Mar 2016 - 22:32

    Merci beaucoup



    Mise en forme complète du profil "upside down" (CSS) - Page 20 378622ginsignature
    Zachary Wolf
    Zachary Wolf
    FémininAge : 31Messages : 57

    Mar 8 Mar 2016 - 20:55

    Merci du partage
    Jujudu44
    Jujudu44
    FémininAge : 36Messages : 61

    Jeu 10 Mar 2016 - 0:36

    Merci beaucoup ! :)
    Unleash
    Unleash
    MasculinAge : 24Messages : 85

    Ven 11 Mar 2016 - 13:28

    merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 8:58