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.

Le Deal du moment : -50%
-50% Baskets Nike Air Huarache
Voir le deal
64.99 €

    Profil arrondi transparent et sortant de la page

    Alumine
    Alumine
    FémininAge : 26Messages : 487

    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://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.
    Crépuscule de Lune
    Crépuscule de Lune
    FémininAge : 35Messages : 95

    Sam 1 Aoû 2015 - 23:14

    Merci beaucoup ♥




    LianN
    LianN
    FémininAge : 34Messages : 47

    Lun 24 Aoû 2015 - 13:29

    Merci
    Anonymous
    Invité

    Lun 24 Aoû 2015 - 17:40

    Merci. \(*0*)/
    Alanya
    Alanya
    FémininAge : 34Messages : 52

    Ven 28 Aoû 2015 - 15:48

    Super ! Very Happy
    ptite_perle
    ptite_perle
    FémininAge : 60Messages : 127

    Sam 5 Sep 2015 - 16:08

    Merci :)



    Profil arrondi transparent et sortant  de la page - Page 3 Signature
    Bunny Lune
    Bunny Lune
    FémininAge : 34Messages : 145

    Lun 14 Sep 2015 - 22:16

    Merci du partage
    Zealanders
    Zealanders
    MasculinAge : 28Messages : 42

    Mar 15 Sep 2015 - 17:51

    Intéressant !
    Nyusu97
    Nyusu97
    FémininAge : 26Messages : 60

    Lun 21 Sep 2015 - 23:53

    Merciiiiii !



    Profil arrondi transparent et sortant  de la page - Page 3 974744Signa
    Zoé
    Zoé
    FémininAge : 24Messages : 189

    Mar 22 Sep 2015 - 9:06

    merci :)



    Profil arrondi transparent et sortant  de la page - Page 3 274643signaaaa
    Susan Storm
    Susan Storm
    FémininAge : 44Messages : 78

    Mar 22 Sep 2015 - 21:09

    merci ♥!
    Romann
    Romann
    FémininAge : 30Messages : 183

    Lun 28 Sep 2015 - 0:07

    Merci !



    Profil arrondi transparent et sortant  de la page - Page 3 Unicor11
    Uther
    Uther
    MasculinAge : 27Messages : 93

    Ven 16 Oct 2015 - 1:18

    Merci
    Dydy
    Dydy
    FémininAge : 33Messages : 493

    Mer 21 Oct 2015 - 11:43

    merci du partage!



    Profil arrondi transparent et sortant  de la page - Page 3 27978_signature_never_utopia_dydy_2
    dishonorableHighblood
    dishonorableHighblood
    FémininAge : 27Messages : 31

    Jeu 22 Oct 2015 - 7:19

    Merci!



    •♐♐♐♐♐♐♐♐♐• dishonorable yet fabulous •♐♐♐♐♐♐♐♐♐•
    crapounet
    crapounet
    MasculinAge : 98Messages : 7

    Sam 9 Jan 2016 - 7:41

    Ah enfin je retrouve ce code, merci bcp
    Solitude
    Solitude
    FémininAge : 48Messages : 294

    Mer 3 Fév 2016 - 17:06

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    Profil arrondi transparent et sortant  de la page - Page 3 Sign510
    Okita
    Okita
    MasculinAge : 30Messages : 16

    Sam 20 Fév 2016 - 13:42

    Merci :)
    Geekoupa
    Geekoupa
    MasculinAge : 36Messages : 20

    Sam 20 Fév 2016 - 15:26

    Plutôt sympa, je cherche justement quelque chose dans ce style là pour rendre mon forum plus original :)
    Fiery Aura
    Fiery Aura
    FémininAge : 25Messages : 57

    Jeu 25 Fév 2016 - 16:02

    Woa ! Essayons ça !
    Misery Mind™
    Misery Mind™
    FémininAge : 33Messages : 152

    Sam 27 Fév 2016 - 16:20

    merci !
    Cornelia
    Cornelia
    FémininAge : 35Messages : 118

    Sam 2 Avr 2016 - 17:17

    Merci <3
    ROGERS.
    ROGERS.
    FémininAge : 29Messages : 335

    Lun 4 Avr 2016 - 14:02

    Merci :hehe:
    Coco-Lapin02
    Coco-Lapin02
    MasculinAge : 55Messages : 167

    Sam 9 Avr 2016 - 15:20

    Merci
    Ari
    Ari
    FémininAge : 22Messages : 109

    Dim 1 Mai 2016 - 16:05

    merci c'est très joli ^^
    Discorde
    Discorde
    FémininAge : 23Messages : 63

    Dim 1 Mai 2016 - 17:53

    Merci !



    Recherche d'avatar ! Ça se passe ici : www
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 1:10