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

    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.
    avatar
    Scandalucia
    FémininAge : 27Messages : 159

    le Lun 2 Mai 2016 - 18:17

    merci pour ce partage ♥

    avatar
    -Resis
    MasculinAge : 22Messages : 25

    le Mer 11 Mai 2016 - 22:36

    mci
    avatar
    TenebreuseRP
    FémininAge : 19Messages : 213

    le Dim 19 Juin 2016 - 17:54

    thank you!



    Spoiler:

    avatar
    akiraexile
    FémininAge : 20Messages : 7

    le Lun 27 Juin 2016 - 20:27

    Merci ^^
    avatar
    Lynnakiel
    FémininAge : 22Messages : 19

    le Mar 28 Juin 2016 - 14:17

    Merci du code !
    (J'ai beaucoup aimé ton post sur les messages Very Happy)
    avatar
    Indy Solo
    FémininAge : 23Messages : 238

    le Mar 9 Aoû 2016 - 9:15

    Merci !



    avatar
    Aubenaissante
    MasculinAge : 32Messages : 15

    le Mar 9 Aoû 2016 - 18:03

    up
    avatar
    Angy38
    FémininAge : 48Messages : 226

    le Dim 18 Sep 2016 - 15:16

    Merci !



    avatar
    Athos
    FémininAge : 23Messages : 49

    le Ven 30 Sep 2016 - 21:39

    merci!
    avatar
    Alborio
    MasculinAge : 19Messages : 33

    le Jeu 27 Oct 2016 - 14:20

    cimer
    avatar
    Lucy Nyah
    FémininAge : 20Messages : 20

    le Sam 5 Nov 2016 - 14:29

    Merciiii ! Very Happy
    avatar
    Gieve
    FémininAge : 29Messages : 104

    le Dim 5 Fév 2017 - 22:30

    Merci **
    avatar
    Doomdom
    MasculinAge : 33Messages : 25

    le Ven 10 Fév 2017 - 13:31

    merci beaucoup ! c'est génial avec ton autre code de message dans l'autre sujet :love:
    avatar
    Envola
    FémininAge : 26Messages : 56

    le Lun 13 Fév 2017 - 19:51

    Merci /o/
    avatar
    Zayshin
    FémininAge : 27Messages : 40

    le Mar 7 Mar 2017 - 3:53

    Merci du partage ^^
    avatar
    Demone
    FémininAge : 27Messages : 5

    le Ven 21 Avr 2017 - 20:40

    merci
    avatar
    .Lucifer.
    MasculinAge : 45Messages : 179

    le Sam 6 Mai 2017 - 10:12

    Merci beaucoup pour ce partage ! Wink



    avatar
    John:
    MasculinAge : 25Messages : 56

    le Mar 30 Mai 2017 - 2:46

    mrc :3
    avatar
    Ombeline30
    FémininAge : 33Messages : 124

    le Jeu 6 Juil 2017 - 18:27

    Merci ^^
    avatar
    Ahina
    FémininAge : 37Messages : 57

    le Sam 26 Aoû 2017 - 1:53

    super ! merci beaucoup pour ce code :)
    avatar
    Unleash
    MasculinAge : 18Messages : 83

    le Sam 23 Sep 2017 - 18:13

    Merci
    avatar
    Hakuna Patata
    FémininAge : 25Messages : 65

    le Lun 30 Oct 2017 - 8:05

    C'est cool merci :)
    avatar
    Whisperinette
    FémininAge : 26Messages : 17

    le Ven 19 Jan 2018 - 11:22

    Merci beaucoup cela va m'être des plus utiles ! ham3
    Contenu sponsorisé


      La date/heure actuelle est Mer 24 Oct 2018 - 4:23