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 : -24%
PC Portable Gaming 15.6″ Medion Erazer Deputy ...
Voir le deal
759.99 €

    Profil gris avec effet au survol

    Cheshire Cat
    Cheshire Cat
    FémininAge : 26Messages : 975

    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://2img.net/i/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
    html - Profil gris avec effet au survol Bac408486e

    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:
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    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-->

    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 18 Sep 2017 - 17:01

    Ça fait un bail, right?

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



    Anonymous
    Invité

    Lun 18 Sep 2017 - 18:03

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

    Lun 25 Sep 2017 - 13:45

    merciii



    html - Profil gris avec effet au survol Miksa210
    Signa:
    Anonymous
    Invité

    Sam 3 Fév 2018 - 22:32

    Merci beaucoup, le rendu est parfait !
    Litalis
    Litalis
    MasculinAge : 28Messages : 27

    Mar 28 Mai 2019 - 7:37

    Merci :)
    Scratpub
    Scratpub
    FémininAge : 39Messages : 145

    Dim 23 Juin 2019 - 13:47

    Merci beaucoup pour ce partage!
    J'aime beaucoup ! Wink
    Tepemkau
    Tepemkau
    FémininAge : 31Messages : 22

    Dim 31 Juil 2022 - 23:21

    Code testé et approuvé, il est vraiment magnifique. Merci pour ces explications hyper claires :heart: :lovebomb:
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 14:24