AccueilFAQRechercherMembresGroupesS'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.


    Profil arrondi transparent et sortant de la page

    Partagez
    avatar
    Alumine
    FémininAge : 21Messages : 488

    le Sam 6 Sep 2014 - 13:00

    Profil


    Bonjour ! Alors ce LS vise à faire ceci : c'est un profil semi transparent et sortant de la page. Il y a pas mal d'effets d'opacité, notamment sur l'avatar et les bandes blanches, qui deviennent totalement opaques au survol de la souris. Je tiens à signaler que si vous avez activé la feuille de personnage et/ou une image de rang elles s'afficheront en-dessous des infos du profil, dans la partie droite. La taille totale est de 310 x 360px.
    Spoiler:


    HTML



    Donc premièrement, on va aller modifier le template viewtopic_body.
    Les templates sont la structure HTML du forum, c'est donc la structure que nous modifions. On les trouve dans le panneau d'admin, Affichage,Templates, Général, viewtopic_body


    Il faut donc chercher la partie de code relative à l'affichage du profil, qui si vous n'avez encore pas touché à ce template devrait se trouver vers la ligne 139; c'est celle-ci :
    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}" style="position: relative; top: -30px; width: 1px;" id="{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://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
        </td>

    Il va nous falloir la remplacer par une nouvelle afin de réorganiser les éléments du profil :
    Code:
    <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
            <div style="position:relative; width: 180px; height: 370px;"> 
                      <div id="profilmembre">
                          <div class="rang">{postrow.displayed.POSTER_RANK}</div>
                          <div class="name pseudo"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div><br />           
                          <div class="infoprofil">
                            <!-- 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}{postrow.displayed.RANK_IMAGE}
                          </div>
                        <div class="avatars">{postrow.displayed.POSTER_AVATAR}</div>
                          <div class="bande"></div>
                        </div>
              <div id="fondprofil"></div>
                      </div>
            <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
          </td>
    Et voilà, votre profil est prêt à être "stylé"... Validez le template, puis on s'occupe du CSS.





    CSS


    Le CSS gère "l'apparence" de la structure. Il se trouve dans affichage, Couleurs, Feuille de style CSS.

    ajoutez ceci à votre CSS, puis validez:
    Code:

    /*Profil arrondi transparent et sortant de la page, par Alu' pour Never-Utopia*/

    #profilmembre {
      position: absolute;
      top:5;
      left:-130;
      width: 310px;
      height: 360px;
      border: 1px solid transparent;
      border-radius:165px / 40px;
      overflow: hidden;
    }

    #fondprofil {
      position: absolute;
      top:5;
      left:-130;
      width: 310px;
      height: 360px;
      background: #E8E8E8;
      border-radius:165px / 40px;
      border:1px solid grey;
      opacity: 0.6;
      filter:alpha(opacity=60);
      z-index: 0;
    }

    .infoprofil{
      position: absolute;
      top: 55;
      left: 160;
      width: 130px;
      height: 230px;
      font-size: 12px;
      padding:10px;
      z-index: 1;}

    .avatars{
      position: absolute;
      left:0;
      top:55;
      width:150px;
      height: 250px;
      margin-left: 10px;
      border-radius: 10px;
      overflow:hidden;
      z-index:1;
      opacity: 0.8;
      filter:alpha(opacity=80);
      -webkit-transition: all 0.5s linear;
      -moz-transition:    all 0.5s linear;
      -o-transition:      all 0.5s linear;
      transition:        all 0.5s linear;
    }

    .avatars img {width: 100%; height: 100%;}/*forcer lavatar des membres à prendre la taille du fond*/
    .avatars:hover {opacity:1; filter:alpha(opacity=100);}

    .rang {text-align: center; margin: 6px 0;}

    .pseudo{
      position:relative;
      height: 14px;
      background: white;
      font-family: Georgia, cursive;
      text-align: center;
      font-weight: 400;
      letter-spacing: 0.5px;
      opacity: 0.7;
      filter: alpha(opacity=70);
      -webkit-transition: all 0.5s linear;
      -moz-transition:    all 0.5s linear;
      -o-transition:      all 0.5s linear;
      transition:        all 0.5s linear;
      z-index:1;
    }
    .pseudo:hover {letter-spacing:2px; opacity: 1; filter:alpha(opacity=100);}

    .bande {
      position: relative; 
      background:white;
      height: 14px;
      margin-top: 245px; 
      z-index:1;
      opacity: 0.7;
      filter: alpha(opacity=70);
      -webkit-transition: all 0.5s linear;
      -moz-transition:    all 0.5s linear;
      -o-transition:      all 0.5s linear;
      transition:        all 0.5s linear;
    }
    .bande:hover {opacity: 1; filter:alpha(opacity=100);}

    Et voilà, vous avez un nouveau profil ! Laissez le crédit s'il vous plaît, il ne prend que très peu de place ! Un petit merci ou commentaire serait apprécié (=


    MAJ du 22/10 : Vous pouvez également arrondir vos messages : www.

    Si vous avez des problèmes avec ce LS, venez poster ici.
    avatar
    Halloween
    FémininAge : 24Messages : 9754

    le Sam 6 Sep 2014 - 19:42

    Merci du partage Wink




    < / Libre service codage >
    avatar
    Mr Yo
    MasculinAge : 44Messages : 37

    le Dim 7 Sep 2014 - 14:28

    merci beaucoup
    avatar
    Nana-Chan
    FémininAge : 19Messages : 44

    le Dim 7 Sep 2014 - 17:42

    Merci !
    avatar
    Fyraliel
    FémininAge : 27Messages : 1424

    le Mar 16 Sep 2014 - 16:13

    merci



    .erin
    FémininAge : 23Messages : 28

    le Mer 17 Sep 2014 - 18:04

    merci
    avatar
    missvodkadems
    FémininAge : 28Messages : 114

    le Ven 19 Sep 2014 - 22:25

    Merciiiiiii



    avatar
    Frosty Blue
    FémininAge : 22Messages : 162

    le Sam 20 Sep 2014 - 10:37

    Merci ^^
    avatar
    Tony`s
    MasculinAge : 27Messages : 64

    le Lun 29 Sep 2014 - 3:20

    merci
    avatar
    Shatters
    FémininAge : 25Messages : 56

    le Mar 30 Sep 2014 - 20:12

    C'est original, merci de partager !



    J'ai appelé les bourreaux pour, en périssant, mordre la crosse de leurs fusils. J'ai appelé les fléaux, pour m'étouffer avec le sable, avec le sang. Le malheur a été mon dieu. Je me suis allongé dans la boue. Je me suis séché à l'air du crime. Et j'ai joué de bons tours à la folie. (Rimbaud)
    avatar
    Sentenza
    MasculinAge : 34Messages : 95

    le Ven 3 Oct 2014 - 16:50

    merci beaucoup!
    avatar
    JasLo
    FémininAge : 16Messages : 76

    le Lun 6 Oct 2014 - 18:39

    Thankss!
    avatar
    Nearween
    FémininAge : 20Messages : 212

    le Dim 12 Oct 2014 - 13:25

    merci pour le code ~





    Stand by Me
    avatar
    SpicAsh
    FémininAge : 21Messages : 171

    le Lun 13 Oct 2014 - 20:41

    Merci !
    avatar
    Sweet Angel
    FémininAge : 35Messages : 148

    le Dim 19 Oct 2014 - 12:36

    Merci pour les codes!
    avatar
    Screen
    FémininAge : 26Messages : 92

    le Mer 22 Oct 2014 - 21:34

    Merci du partage :3
    avatar
    AlexeB
    FémininAge : 23Messages : 165

    le Jeu 23 Oct 2014 - 7:49

    Merci du partage! :heart:
    avatar
    EricSouvaltzis
    MasculinAge : 19Messages : 47

    le Jeu 23 Oct 2014 - 11:58

    Merci
    avatar
    Clémentine
    FémininAge : 26Messages : 223

    le Mer 12 Nov 2014 - 19:13

    Merciiiiiiiiiiiii ^^



    avatar
    Celuna
    FémininAge : 28Messages : 133

    le Jeu 13 Nov 2014 - 16:23

    C'est une belle création. Merci
    avatar
    hirondelle
    FémininAge : 29Messages : 134

    le Lun 17 Nov 2014 - 17:43

    merci ♥
    avatar
    HEAVEN.SPIRIT
    MasculinAge : 24Messages : 37

    le Lun 24 Nov 2014 - 15:45

    merci du partage
    avatar
    P'tit loup
    MasculinAge : 35Messages : 445

    le Mar 2 Déc 2014 - 10:31

    merci du partage ^^



    avatar
    Noruenu
    FémininAge : 25Messages : 123

    le Mer 3 Déc 2014 - 15:12

      Merci ! :B
    avatar
    Banpaia
    FémininAge : 21Messages : 130

    le Mer 17 Déc 2014 - 18:10

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Mar 16 Oct 2018 - 5:14