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.

-50%
Le deal à ne pas rater :
-50% sur les sacs à dos pour ordinateur portable Urban Factory ...
19.99 € 39.99 €
Voir le deal

    Profil arrondi transparent et sortant de la page

    Alumine
    Alumine
    FémininAge : 26Messages : 487

    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://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.
    Anonymous
    Invité

    Sam 6 Sep 2014 - 19:42

    Merci du partage Wink
    Mr Yo
    Mr Yo
    MasculinAge : 49Messages : 37

    Dim 7 Sep 2014 - 14:28

    merci beaucoup
    Nana-Chan
    Nana-Chan
    FémininAge : 25Messages : 44

    Dim 7 Sep 2014 - 17:42

    Merci !
    Fyraliel
    Fyraliel
    FémininAge : 33Messages : 1424

    Mar 16 Sep 2014 - 16:13

    merci



    Profil arrondi transparent et sortant  de la page F86e7518c1
    avatar
    .erin
    FémininAge : 29Messages : 28

    Mer 17 Sep 2014 - 18:04

    merci
    missvodkadems
    missvodkadems
    FémininAge : 33Messages : 114

    Ven 19 Sep 2014 - 22:25

    Merciiiiiii



    Profil arrondi transparent et sortant  de la page Pub10
    Frosty Blue
    Frosty Blue
    FémininAge : 27Messages : 162

    Sam 20 Sep 2014 - 10:37

    Merci ^^
    Tony`s
    Tony`s
    MasculinAge : 32Messages : 64

    Lun 29 Sep 2014 - 3:20

    merci
    Shatters
    Shatters
    FémininAge : 30Messages : 57

    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)
    Sentenza
    Sentenza
    MasculinAge : 39Messages : 95

    Ven 3 Oct 2014 - 16:50

    merci beaucoup!
    JasLo
    JasLo
    FémininAge : 22Messages : 76

    Lun 6 Oct 2014 - 18:39

    Thankss!
    Nearween
    Nearween
    FémininAge : 25Messages : 213

    Dim 12 Oct 2014 - 13:25

    merci pour le code ~



    Profil arrondi transparent et sortant  de la page Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    SpicAsh
    SpicAsh
    FémininAge : 27Messages : 176

    Lun 13 Oct 2014 - 20:41

    Merci !
    Sweet Angel
    Sweet Angel
    FémininAge : 41Messages : 153

    Dim 19 Oct 2014 - 12:36

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

    Mer 22 Oct 2014 - 21:34

    Merci du partage :3
    AlexeB
    AlexeB
    FémininAge : 28Messages : 165

    Jeu 23 Oct 2014 - 7:49

    Merci du partage! :heart:
    EricSouvaltzis
    EricSouvaltzis
    MasculinAge : 25Messages : 47

    Jeu 23 Oct 2014 - 11:58

    Merci
    Clémentine
    Clémentine
    FémininAge : 31Messages : 223

    Mer 12 Nov 2014 - 19:13

    Merciiiiiiiiiiiii ^^



    Profil arrondi transparent et sortant  de la page 9w9t
    Celuna
    Celuna
    FémininAge : 33Messages : 133

    Jeu 13 Nov 2014 - 16:23

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

    Lun 17 Nov 2014 - 17:43

    merci ♥
    HEAVEN.SPIRIT
    HEAVEN.SPIRIT
    MasculinAge : 29Messages : 37

    Lun 24 Nov 2014 - 15:45

    merci du partage
    P'tit loup
    P'tit loup
    MasculinAge : 41Messages : 451

    Mar 2 Déc 2014 - 10:31

    merci du partage ^^



    Profil arrondi transparent et sortant  de la page 30xivrd
    Noruenu
    Noruenu
    FémininAge : 31Messages : 123

    Mer 3 Déc 2014 - 15:12

      Merci ! :B
    Banpaia
    Banpaia
    FémininAge : 26Messages : 130

    Mer 17 Déc 2014 - 18:10

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 22:13