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 gris avec effet au survol

    Partagez
    avatar
    Cheshire Cat
    FémininAge : 21Messages : 937

    le Dim 19 Fév 2017 - 14:54



    Bonjour ou bonsoir !
    Je suis de nouveau là, de retour pour vous proposer un nouveau libre service de profil avec un style assez simple !

    Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

    Aperçu en image:

    Optimisé pour tous les navigateurs - Version PHPBB2

    Quelques infos:
    - La taille de la création est de 200 pixels.
    - La taille des avatars dans le code est de 320 pixels, mais adaptable si vous modifiez la valeur.
    - Les couleurs et les polices sont modifiables et sont toutes indépendantes de la charte de couleur dans l'onglet Couleurs.

    Installer votre nouveau profil:
    Pour commencer l'installation de notre nouveau profil, nous allons devoir aller dans Panneau d'administration > Accueil > Affichage > Templates > Généralités > viewtopic_body et chercher cette partie, si votre template n'est pas encore modifiée
    Code:
    <!-- BEGIN displayed -->
       <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <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>

    Vous supprimez et vous remplacez par ce qui suis
    Code:
    <!-- BEGIN displayed -->
       <tr id="p{postrow.displayed.U_POST_ID}">
          <td valign="top">
                         <div class="profil_posteur">
                <div class="pseudo_sujet">
                                      <a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a>
                                      {postrow.displayed.POSTER_NAME}
                                 </div>
                <div class="rang_sujet">
                                      {postrow.displayed.POSTER_RANK}
                                 </div>
                <div class="hover_profil">
                                         <div class="avatar_sujet">
                                           {postrow.displayed.POSTER_AVATAR}
                                         </div>
                                         <div class="infosprofil_sujet">
                      <!-- BEGIN profile_field -->
                                                 <div class="label_sujet">
                        {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}
                                                 </div>
                      <!-- END profile_field -->
                     {postrow.displayed.POSTER_RPG}
                                         </div>
                </div>
                <div class="rang_sujet">
                  {postrow.displayed.RANK_IMAGE}
                                 </div>
                         </div>
          </td>

    Une fois cela fait, enregistrez et validez votre template.

    Nous allons ensuite devoir ajouter le CSS qui va le rendre super stylé. Du coup, on va aller dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS
    Code:
    /* Profil du membre dans les sujets */
    .profil_posteur{
      width:200px;
      background:#927d75;
      padding:8px 0;
      font-family:calibri; /* Police sur toute la zone du profil */
      box-sizing:border-box; /* Cette propriete permet d ajuster le padding en fonction de la taille du bloc */
    }
    /* La partie suivante centre a la fois le pseudo, le rang écrit et l image du rang */
    .pseudo_sujet, .rang_sujet{
      text-align:center;
    }
    /* La partie suivante concerne uniquement le pseudo du membre */
    .pseudo_sujet{
      font-size:16px;
    }
    /* La partie suivante concerne les div du rang */
    .rang_sujet{
      font-size:10px;
      letter-spacing:2px;
      text-transform:uppercase;
    }
    /* La partie suivante concerne uniquement l image du rang */
    .rang_sujet img{
      max-width:100%;
    }
    /* La partie suivante concerne l'effet sur le profil */
    .hover_profil{
      position:relative; /* Ne pas modifier cette partie */
      width:200px; /* A modifier en fonction de la taille de votre avatars */
      height:320px; /* A modifier en fonction de la taille de votre avatars */
      overflow:hidden;
      margin:8px 0;
    }
    .avatar_sujet{
      position:absolute;
      top:0;
      left:0;
      /* La propriete filter permet d appliquer un flou a l image */
      -webkit-filter: blur(0px);
      -moz-filter: blur(0px);
      -o-filter: blur(0px);
      -ms-filter: blur(0px);
      filter: blur(0px);
      /* La valeur scale permet d agrandir la zone concernee */
      -webkit-transform:scale(1);
      transform:scale(1);
      /* La propriete transition permet d avoir un effet fluide */
      -webkit-transition:all 400ms;
      transition:all 400ms;
    }
    .hover_profil:hover .avatar_sujet{
      /* La propriete filter permet d appliquer un flou a l image */
      -webkit-filter: blur(2px);
      -moz-filter: blur(2px);
      -o-filter: blur(2px);
      -ms-filter: blur(2px);
      filter: blur(2px);
      /* La valeur scale permet d agrandir la zone concernee */
      -webkit-transform:scale(2);
      transform:scale(2);
    }
    .infosprofil_sujet{
      position:absolute; /* Ne pas modifier cette partie */
      top:10px; /* Ne pas modifier cette partie */
      left:10px; /* Ne pas modifier cette partie */
      width:180px;
      height:300px;
      overflow:auto;
      padding:10px;
      background:rgba(0, 0, 0, 0.2); /* La derniere valeur permet de modifier l opacite de la couleur de fond */
      border:4px solid #f9fdf9;
      box-sizing:border-box; /* Cette propriete permet d ajuster le padding en fonction de la taille du bloc */
      opacity:0;
      /* La valeur scale permet d agrandir la zone concernee */
      -webkit-transform:scale(1.5);
      transform:scale(1.5);
      /* La propriete transition permet d avoir un effet fluide */
      -webkit-transition:all 400ms;
      transition:all 400ms;
    }
    .hover_profil:hover .infosprofil_sujet{
      opacity:1;
      /* La valeur scale permet d agrandir la zone concernee */
      -webkit-transform:scale(1);
      transform:scale(1);
    }
    .label_sujet{
      background:#f9fdf9;
      padding:3px;
      text-transform:uppercase;
      font-size:10px;
      letter-spacing:1px;
      margin:0 0 5px 0;
    }
    /* Ne pas modifier cette partie */
    .label_sujet:last-child{
      margin:0 0 0 0;
    }
    /* empeche certaines infos du profil de depasser*/
    .infosprofil_sujet img,
    .infosprofil_sujet textarea {
      max-width: 100%;
      box-sizing: border-box;
    }

    Si jamais vous voulez une image dans vos profils, vous devez mettre le champ en tout premier et avec une image par défaut, sans quoi cela peut provoquer quelques problèmes avec le code actuel.

    Voici aussi les champs à renseigner pour ne pas afficher le titre du label


    Donc, si vous suivez ces indications, ajoutez ceci à votre CSS
    Code:
    /* Ne pas modifier cette partie */
    .label_sujet:first-child{
      padding:0;
    }
    /* Ne pas modifier cette partie */
    .label_sujet:first-child > img{
      width:100%; /* le pourcentage permet de redimensionner l image quelque soit sa taille et celle de la zone */
    }

    N'oubliez pas de l'enregistrer, et voilà vos nouveaux profils ! Very Happy

    J'espère que ça vous plaît, et n'hésitez surtout pas à poster un petit "merci", ça fait toujours très plaisir :hudada:
    avatar
    Nihil Scar Winspeare
    Messages : 5036

    le Dim 19 Mar 2017 - 11:37

    Merci pour le partage Chesh', c'est super :aww:

    J'ai juste fait quelques mini modifications (changé l'id profil_posteur par une classe et rajouté un petit code pour empêcher les infos de dépasser dans certains cas)

    Code:
    /* empeche certaines infos du profil de depasser*/
    .infosprofil_sujet img,
    .infosprofil_sujet textarea {
      max-width: 100%;
      box-sizing: border-box;
    }

    Le LS sera bientôt taggé, indexé et validé :hudada: peut-être même par toi

    Modèle pour l'index :
    Code:
    <div class="ls_codage"><div class="lscodage_illu"><img src="https://img11.hostingpics.net/pics/461879Sanstitre.jpg" /></div><div class="tutograph_titre">Profil gris avec effet au survol</div><div class="tutograph_mots">par Cheshire Cat</div><a href="http://www.never-utopia.com/t62524-profil-gris-avec-effet-au-survol" class="tutograph_lien">Voir le Code</a></div><!--NEXT-->



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    avatar
    Onyx
    FémininAge : 24Messages : 3132

    le Lun 18 Sep 2017 - 17:01

    Ça fait un bail, right?

    Allez, je classe ça dans les LS, merci du partage ^^



    avatar
    Kelalin
    FémininAge : 25Messages : 1946

    le Lun 18 Sep 2017 - 18:03

    Merci pour le partage !
    avatar
    Mikasa
    FémininAge : 20Messages : 162

    le Lun 25 Sep 2017 - 13:45

    merciii




    Signa:


    avatar
    Alwine
    FémininAge : 22Messages : 7

    le Sam 3 Fév 2018 - 22:32

    Merci beaucoup, le rendu est parfait !
    Contenu sponsorisé


      La date/heure actuelle est Mar 21 Aoû 2018 - 16:13