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.


    Mise en forme de profil - ForumActif

    ClaryF
    ClaryF
    FémininAge : 34Messages : 138

    Lun 17 Mar 2014 - 21:57

    Mise en forme du profil



    Bonjour. Alors voilà, je me décide à poster une "petite" demande...je désespère. Je suis à la recherche d'une mise en forme de profil, pour mon forum. Quelque chose de "simple" - en apparence mais je doute que ce soit en pratique - mais de joli, en fait. Je ne trouve pas vraiment mon bonheur..et ce depuis un bon moment.

    Alors voilà. Je remercie d'avance la personne qui voudra bien prendre de son temps pour travailler sur ma demande. ~


    Schéma(s) et Eléments
    Schémas : Alors, pour le schéma, j'ai tenter de faire au plus simple. J'espère que c'est assez clair. Voici ; https://i.servimg.com/u/f58/18/17/15/99/sans_t29.jpg . J'ai appliquer fond noir, parce qu'il s'agit de la couleur de fond de mon forum. L'idée c'est donc des petits "cadres" (?) pour les éléments du profil. Le petit "i am" au dessus du pseudo, si ce n'est pas possible tant pis, c'est juste une fantaisie. Le pseudo je le vois bien entre ses guillemets en assez "grand" donc. Pour terminer, le "Ouvrir" correspondrait à quelque chose de cliquable, qui permettrait d'afficher la "Fiche de personnage".
    Tailles des éléments : La seule taille vraiment indispensable à connaître est la taille de l'avatar ; 200*400 px.
    Effets voulus : Un effet sur l'avatar peut être, comme un voile blanc dessus qui disparaît lorsqu'on passe la souris dessus...je ne sais pas si je m'exprime au mieux.


    Ressources
    Rien de particulier ! ~

    Autres précisions ?
    Je pense avoir tout dis. Au besoin je peux ajouter des précisions si on me les demande. Je remercie encore un bon millions de fois la personne qui s'intéressera à ma demande. ♥ & j'espère poster là il le faut.
    Anonymous
    Invité

    Dim 23 Mar 2014 - 11:29

    Plop,

    Mon résultat : www
    ClaryF
    ClaryF
    FémininAge : 34Messages : 138

    Dim 23 Mar 2014 - 14:30

    Bonjour.

    Merci d'avoir pris du temps pour cette demande ! ~ C'est niquel, exactement ce que je voyais !
    Anonymous
    Invité

    Dim 23 Mar 2014 - 14:33

    Voici donc les codes =3

    CSS
    Code:
    /* --------------------------------- PROFIL --------------------------------- */

    .profilmasque {
      background-color: #201E1E;
      width: 200px;
      padding: 10px;
      font-size: 11px;
      font-family: 'Voltaire', sans-serif !important;
    }

    .profil1 {
      width: 200px;
      font-size: 20px;
      font-family: 'Miniver', cursive;
      background-color: #201E1E;
      border: none;
      color: #B7B3B3;
    }

    .profil {
      background-color: #0D0D0D;
      padding: 10px;
      border-radius: 25px;
    }

    .rang {
      background-color: #201E1E;
      padding: 10px;
      width: 200px;
      text-align: center;
      color: #007BAA !important;
      font-size: 25px;
      font-family: 'Miniver', cursive;
    }

    .rang:hover {
      color: #B7B3B3 !important;
    }

    .avatar_profil {
      width: 200px;
      height: 400px;
      opacity: 0.5;
    }

    .avatar_profil:hover {
      opacity: 1;
    }

    .bloc_pseudo {
      padding: 10px;
      width: 200px;
      position: relative;
      left: 1em;
      text-align: center;
      color: #D5D2D2;
      font-size: 25px;
      font-family: 'Miniver', cursive;
    }

    .pseudo_profil {
      font-family: 'Finger Paint', cursive;
      font-size: 25px !important;
      text-align: center;
    }

    .details_profil {
      background-color: #201E1E;
      padding: 10px;
      width: 200px;
      height: 80px;
      overflow: auto;
      text-align: justify;
      color: #B7B3B3 !important;
      font-size: 11px;
      font-family: 'Voltaire', sans-serif !important;
    }

    /* --------------------------------- FIN PROFIL --------------------------------- */

    Template viewtopic_body, repères ceci :
    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>

    Que tu remplaces par :
    Code:
    <!-- BEGIN displayed -->
      <link href='http://fonts.googleapis.com/css?family=Finger+Paint|Miniver|Zeyada' rel='stylesheet' type='text/css'>
       <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
          <td class="profil" class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
                     
                      <br /><div class="rang">{postrow.displayed.POSTER_RANK}</div>
                      <br /><center><div class="avatar_profil">{postrow.displayed.POSTER_AVATAR}</div></center>
                      <span class="bloc_pseudo"><a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a>I am </span><div class="pseudo_profil">{postrow.displayed.POSTER_NAME}</div><br />
            <div class="details_profil"><!-- BEGIN profile_field -->
                {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
                        <!-- END profile_field --></div><br />
             <div class="profilmasque" onClick="this.firstChild.value=(this.firstChild.value=='Ouvrir')?'Fermer':'Ouvrir';this.lastChild.style.display=(this.firstChild.value=='Ouvrir')?'none':'block';" style="text-align: center;"><input type="button" value="Ouvrir" class="profil1"/><div style="display: none;  text-align:left;">
                {postrow.displayed.POSTER_RPG}
      </div></div>   
                      <br />
             <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />

    Dis-moi si tout colle =P
    ClaryF
    ClaryF
    FémininAge : 34Messages : 138

    Dim 23 Mar 2014 - 15:21

    Tout est parfait !
    Un grand merci, vraiment. Je n'oublie bien sûr pas le crédit ! ~
    Anonymous
    Invité

    Dim 23 Mar 2014 - 15:21

    Nickel =D
    Bonne continuation alors Wink
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 22:57