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 : 20Messages : 488

    le Sam 6 Sep 2014 - 7:00

    Rappel du premier message :

    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.
    Catblack
    FémininAge : 22Messages : 85

    le Ven 26 Déc 2014 - 11:31

    merci
    avatar
    British Cookie
    FémininAge : 27Messages : 34

    le Sam 24 Jan 2015 - 9:35

    Merci beaucoup !
    avatar
    Yukiji
    FémininAge : 18Messages : 107

    le Lun 9 Fév 2015 - 22:44

    Merci !



    avatar
    MxPrime2
    MasculinAge : 24Messages : 81

    le Mar 24 Fév 2015 - 15:52

    Merci !
    avatar
    Piratress
    FémininAge : 21Messages : 215

    le Jeu 5 Mar 2015 - 15:42

    Merci ! =)
    avatar
    Kunida
    FémininAge : 25Messages : 6

    le Sam 7 Mar 2015 - 16:25

    Merci
    avatar
    Irissia87
    FémininAge : 31Messages : 124

    le Jeu 12 Mar 2015 - 11:50

    merci!
    avatar
    Mika-chan
    FémininAge : 26Messages : 76

    le Sam 14 Mar 2015 - 19:45

    merci :)
    avatar
    Hana Evali
    FémininAge : 28Messages : 167

    le Ven 10 Avr 2015 - 15:44

    merci



    avatar
    Dark Dream
    FémininAge : 26Messages : 79

    le Mer 29 Avr 2015 - 14:03

    merci du partage ♥
    Lupa
    FémininAge : 21Messages : 180

    le Mer 6 Mai 2015 - 10:41

    Merci =D



    To die would be an awfully big adventure... ~ Peter Pan, James M. Berrie.
    avatar
    BlueGhost
    MasculinAge : 17Messages : 125

    le Ven 8 Mai 2015 - 9:51

    Merci, c'est très beau ^^





    ~ Upupupu... je ne suis pas une peluche, je suis Monokuma ! ~
    Danganronpaaa ♥
    avatar
    AwenWolf
    FémininAge : 30Messages : 76

    le Mar 19 Mai 2015 - 14:05

    Merci =)
    avatar
    tchapalow
    FémininAge : 28Messages : 33

    le Jeu 28 Mai 2015 - 6:03

    merci mon poulet!
    avatar
    fancy
    MasculinAge : 28Messages : 34

    le Mer 3 Juin 2015 - 2:43

    j'aime beaucoup.
    merci du partage <3
    avatar
    Yukooo
    MasculinAge : 17Messages : 11

    le Mer 10 Juin 2015 - 8:20

    J'viens de comprendre pourquoi ça sortait sur le spoiler du tuto' pour arrondir les messages (...)
    Je trouve que ça rend bien, merci !
    avatar
    Lycoris
    FémininAge : 25Messages : 23

    le Jeu 11 Juin 2015 - 2:55

    Merci !
    avatar
    TiGraou
    MasculinAge : 25Messages : 242

    le Ven 12 Juin 2015 - 10:55

    Merci
    avatar
    Chione
    MasculinAge : 17Messages : 397

    le Ven 26 Juin 2015 - 8:26

    merci!




    FEZ!FEZ!
    Drogba JR
    MasculinAge : 26Messages : 88

    le Ven 26 Juin 2015 - 12:03

    merci
    avatar
    Madras
    FémininAge : 33Messages : 279

    le Sam 27 Juin 2015 - 2:34

    Merci
    avatar
    Liitchy
    FémininAge : 23Messages : 40

    le Mar 14 Juil 2015 - 7:26

    merci
    avatar
    Dacota.
    FémininAge : 24Messages : 39

    le Mar 14 Juil 2015 - 13:40

    Merci :)
    avatar
    DaZeli
    FémininAge : 22Messages : 377

    le Lun 27 Juil 2015 - 21:26

    merci!
    avatar
    rosebleudu10
    FémininAge : 28Messages : 188

    le Jeu 30 Juil 2015 - 10:20

    merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 21 Aoû 2018 - 10:11