AccueilRechercherS'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 :
Code promo ASOS : -15% supplémentaire ...
Voir le deal

    Profil arrondi transparent et sortant de la page

    Alumine
    Alumine
    FémininAge : 23Messages : 488

    le Sam 6 Sep 2014 - 13: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:
    Profil arrondi transparent et sortant  de la page - Page 2 Impryc14


    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://2img.net/i/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://2img.net/i/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
    Catblack
    FémininAge : 24Messages : 85

    le Ven 26 Déc 2014 - 16:31

    merci
    British Cookie
    British Cookie
    FémininAge : 30Messages : 34

    le Sam 24 Jan 2015 - 14:35

    Merci beaucoup !
    Yukiji
    Yukiji
    MasculinAge : 20Messages : 115

    le Mar 10 Fév 2015 - 3:44

    Merci !



    (c) sygea
    MxPrime2
    MxPrime2
    MasculinAge : 26Messages : 81

    le Mar 24 Fév 2015 - 20:52

    Merci !
    PrincesseÔ
    PrincesseÔ
    FémininAge : 23Messages : 220

    le Jeu 5 Mar 2015 - 20:42

    Merci ! =)
    Kunida
    Kunida
    FémininAge : 27Messages : 6

    le Sam 7 Mar 2015 - 21:25

    Merci
    Irissia87
    Irissia87
    FémininAge : 33Messages : 124

    le Jeu 12 Mar 2015 - 16:50

    merci!
    Mika-chan
    Mika-chan
    FémininAge : 28Messages : 76

    le Dim 15 Mar 2015 - 0:45

    merci :)
    Hana Evali
    Hana Evali
    FémininAge : 30Messages : 188

    le Ven 10 Avr 2015 - 21:44

    merci





    Je joue
    • ♚ Kili
    • ♚Ianto Jones
    • ♚ Thor Odinson
    • ♚ James T. Kirk
    J'anime
    • ♚ Les intrigues
    • ♚ Les soirées CB
    • ♚ Les événements
    • ♚ Le flood/les jeux


    Dark Dream
    Dark Dream
    FémininAge : 28Messages : 79

    le Mer 29 Avr 2015 - 20:03

    merci du partage ♥
    avatar
    Lupa
    FémininAge : 24Messages : 183

    le Mer 6 Mai 2015 - 16:41

    Merci =D



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

    le Ven 8 Mai 2015 - 15:51

    Merci, c'est très beau ^^



    Profil arrondi transparent et sortant  de la page - Page 2 1476882517-signa

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

    le Mar 19 Mai 2015 - 20:05

    Merci =)
    tchapalow
    tchapalow
    FémininAge : 31Messages : 33

    le Jeu 28 Mai 2015 - 12:03

    merci mon poulet!
    fancy
    fancy
    MasculinAge : 30Messages : 34

    le Mer 3 Juin 2015 - 8:43

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

    le Mer 10 Juin 2015 - 14:20

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

    le Jeu 11 Juin 2015 - 8:55

    Merci !
    TiGraou
    TiGraou
    MasculinAge : 27Messages : 243

    le Ven 12 Juin 2015 - 16:55

    Merci
    Chione
    Chione
    MasculinAge : 20Messages : 397

    le Ven 26 Juin 2015 - 14:26

    merci!



    Profil arrondi transparent et sortant  de la page - Page 2 1435969469-signd
    FEZ!FEZ!
    Profil arrondi transparent et sortant  de la page - Page 2 150804081846482087
    avatar
    Drogba JR
    MasculinAge : 28Messages : 88

    le Ven 26 Juin 2015 - 18:03

    merci
    Madras
    Madras
    FémininAge : 35Messages : 282

    le Sam 27 Juin 2015 - 8:34

    Merci
    Liitchy
    Liitchy
    FémininAge : 26Messages : 41

    le Mar 14 Juil 2015 - 13:26

    merci
    Dacota.
    Dacota.
    FémininAge : 26Messages : 39

    le Mar 14 Juil 2015 - 19:40

    Merci :)
    DaZeli
    DaZeli
    FémininAge : 25Messages : 377

    le Mar 28 Juil 2015 - 3:26

    merci!
    rosebleudu10
    rosebleudu10
    FémininAge : 30Messages : 189

    le Jeu 30 Juil 2015 - 16:20

    merci
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Jan 2021 - 10:06