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 simple aux bordures arrondies

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

    le Dim 19 Fév 2017 - 14:53



    Bonjour à tous !
    Aujourd'hui je vous propose un profil très simple et facilement modifiable ^-^

    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.

    Rendu en image:

    Optimisé pour tous les navigateurs - Version PHPBB2

    Quelques infos:
    - La taille est adaptée automatiquement
    - Les couleurs et les polices sont modifiables et sont toutes indépendantes de la charte de couleur dans l'onglet Couleurs.
    - L'image "Info du profil" est modifiable.

    Installer votre nouveau profil:
    Pour commencer l'installation de nos 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 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></span>
                       <div class="SujetPseudo">{postrow.displayed.POSTER_NAME}</div>
                       <div class="SujetProfil">
     <div class="SujetRang">
                                       {postrow.displayed.POSTER_RANK}<br />
                                       {postrow.displayed.RANK_IMAGE}
                               </div>
                               <span class="SujetAvatar">
                               {postrow.displayed.POSTER_AVATAR}
                               </span>
                       </div>
                       <div class="SujetInfosProfil">
                               <div>
     <!-- BEGIN profile_field -->
                               <div class="SujetLabel">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}</div>
     <!-- END profile_field -->
     <div class="SujetFeuillePerso">{postrow.displayed.POSTER_RPG}</div>
                               </div>
                               <img src="http://img11.hostingpics.net/pics/480042Infoduprofil.png" alt="Infos fermées" class="ImageInfosClosed" />
                       </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:
    /* Commande profil par Cheshire Cat */
    /* Concerne le pseudo du membre */
    .SujetPseudo{
      margin-bottom:-12px; /* fait descendre le pseudo en dessous de la bordure du profil */
      text-align:center;
      text-transform:uppercase;
      font-size:20px;
    }
    /* Empêche le pseudo d'être écrit en gras */
    .SujetPseudo strong{
      font-weight:normal;
    }
    /* Concerne l'avatar et le rang */
    .SujetProfil{
      margin:0 5px;
      width:230px;
      padding:15px;
      box-sizing:border-box;
      border-radius:15px;
      border:1px solid #d6d59c;
      background-color:#fafdf9;
    }
    /* Concerne le rang */
    .SujetRang{
      margin:5px 0 15px;
      text-align:center;
      font-size:15px;
      color:#6e520f;
      letter-spacing:1px;
    }
    /* Concerne les informations du profil */
    .SujetInfosProfil{
      width:135px;
      padding:0px 15px 0px 15px;
      margin-top:-1px;
      margin-left:34px;
      box-sizing-border-box;
      border-bottom-left-radius:15px;
      border-bottom-right-radius:15px;
      border:1px solid #d6d59c;
      background-color:#fafdf9;
      transition:all 800ms;
      font-size:11px;
    }
    /* Ajoute un padding supérieur au passage de la souris pour afficher les informations */
    .SujetInfosProfil:hover{
      padding:15px 15px 0 15px;
    }
    /* Concerne la parite interne aux informations */
    .SujetInfosProfil > div{
      height:0px;
      overflow:auto;
      transition:all 800ms; /* créé une transition progressive avant et après passage de la souris */
    }
    /* Affiche les informations au survol */
    .SujetInfosProfil:hover > div{
      height:180px;
    }
    /* Concerne les champs du profil */
    .SujetLabel{
      margin-bottom:5px;
      margin-right:5px;
      padding:3px;
      background-color:rgba(233, 236, 234, 0.7);
      border:1px solid #bcb7ba;
      color:#6e520f;
    }
    /* Supprime le margin-bottom pour le dernier champ du profil */
    .SujetLabel:last-of-type{
      margin-bottom:0;
    }
    /* Concerne la feuille de personnage */
    .SujetFeuillePerso{
      color:#6e520f;
    }
    /* Concerne le lien vers la feuille de personnage */
    .SujetFeuillePerso a[href="/u1rpgsheet"]{
      text-align:center;
      letter-spacing:1px;
      display:block;
      margin:10px 0 5px;
      color:#6e520f;
      border-bottom:1px solid #6e520f;
    }
    /* Supprime les balises BR avant et après le lien vers la feuille de personnage */
    .SujetFeuillePerso br:first-of-type,
    .SujetFeuillePerso br:nth-of-type(2){
      display:none;
    }
    /* Concerne l'image en bas des informations du profil */
    .ImageInfosClosed{
      margin-bottom:-1px;
      margin-left:-15px;
      opacity:0.6;
    }

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

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

    Un petit merci fait toujours plaisir, alors hésite pas ! :mouton:
    avatar
    Nihil Scar Winspeare
    Messages : 5036

    le Dim 19 Mar 2017 - 11:53

    Merci pour ton partage :heart:

    Tout est nickel :joie: , j'ai juste ajouté ce petit bout de CSS :
    Code:
    /* empeche certaines infos du profil de depasser*/
    .SujetInfosProfil > div img,
    .SujetInfosProfil > div textarea {
      max-width: 100%;
      box-sizing: border-box;
    }

    Le sujet sera bientôt taggé, indexé puis déplacé et enfin il aura sa propre petite vie /pan/

    Modèle à remplir pour l'index :
    Code:
    <div class="ls_codage"><div class="lscodage_illu"><img src="https://img11.hostingpics.net/pics/221039Sanstitre.jpg" /></div><div class="tutograph_titre">Profil simple aux bordures arrondies</div><div class="tutograph_mots">par Cheshire Cat</div><a href="http://www.never-utopia.com/t62523-profil-simple-aux-bordures-arrondies" 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:08

    Salut!

    Merci du partage, je déplace dans les LS ^^



    avatar
    Kelalin
    FémininAge : 25Messages : 1946

    le Lun 18 Sep 2017 - 18:03

    Merci pour le partage !
    avatar
    Chocolou
    FémininAge : 24Messages : 106

    le Sam 25 Nov 2017 - 20:29

    Alors, ca c'est la classe D: merciiii
    avatar
    Kitket
    FémininAge : 35Messages : 100

    le Jeu 28 Déc 2017 - 21:05

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 21 Aoû 2018 - 2:08