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 :
Pokémon EV06 : où acheter le Bundle Lot ...
Voir le deal

    (Eerie) catégorie simple

    yooh
    yooh
    FémininAge : 32Messages : 143

    Dim 3 Juil 2016 - 20:21

    Rappel du premier message :

    Ma demande



    Bonsoir Never Utopien
    Si je viens vers toi ce soir c'est pour supplier ton talent de m'aider. Avec 4 amies on ouvre un forum et malgré le fait que de mon coté je touche un peu au codage, je suis loin d'être une pro. Les catégories étant un gros travail, je ne suis pas apte à le faire moi même, donc je viens te demander de l'aide.


    Schéma(s) et Eléments
    Schémas : Voici un schéma de ce qu'on aimerait :
    https://2img.net/r/hpimg15/pics/818041Sanstitre8.png

    Tailles des éléments : Je sais que le forum est en CSS à 85%
    Après voici un aspect du forum : http://the-dream-team.superforum.fr/ (il bouge mais ne t'en fais pas)

    Effets voulus : Tout carré/rectangulaire
    Version de votre forum :
    il est en PHPBB2

    Ressources
    Hormis les avatars, rien de spécial. Ce seront des avatars 200*320
    La bannière de haut de catégorie ( "San Francisco") est en cours de modification - dimension.
    Les dimensions seront hauteur : 109px / largeur : 795px (largeur du forum)
    Les titres seront graphés. En attendant met une image neutre pour ton codage.
    Les news / old les voici :
    https://2img.net/r/hpimg15/pics/695864424123new.png
    https://2img.net/r/hpimg15/pics/570040253120old.png
    https://2img.net/r/hpimg15/pics/7389046622.png


    Autres précisions ?
    La typo des titres de forum serait Godfeem.
    Les "messages & sujets" c'est en Imprint MT Shadow
    Notre typo classique c'est Verdana
    Pour les couleurs, c'est exactement celle du croquis.
    Pour les liens, la barre vertical à droite c'est une scrollbar qui se mettra quand on aura trop de lien. Pareil pour les descriptifs des forums, y instaurer un scrollbar si la description est trop longue.
    Les titres du dernier messages peut passer sur deux lignes si besoin
    Le gobelet de café apparaît seulement quand il y a un nouveau message.
    Le cadre qui se trouve partout est de 1px
    L'avatar est de 103px (hauteur) - 64px (largeur) sur une base de 200x320


    Voila je pense avoir tout dit, n'hésite pas si tu as besoin de quoi que ce soit.
    Merci d'avance et bonne soirée


    Dernière édition par yooh le Sam 9 Juil 2016 - 23:37, édité 1 fois
    yooh
    yooh
    FémininAge : 32Messages : 143

    Mar 19 Juil 2016 - 10:35

    Ralala comment tu es une déesse **
    Et vraiment désolé pour tes vacances, promis on t'embête plus après. :chomp:

    C'est parfait, juste à un détail. Est-ce possible que les parties "Bienvenue chez Eerie" et "Forum Test" soient un peu plus espacée ? Car le titre "Forum Test" est trop proche de la partie description du dessus ? :gene:
    Eerie Ange's
    Eerie Ange's
    FémininAge : 22Messages : 166

    Mar 19 Juil 2016 - 10:59

    C'est pas grave en vrai, j'ai pris une commande, je ferai de mon mieux pour vous satisfaire pleinement o/

    Oui oui c'est rectifié :3 (si c'est trop ou pas assez, vous changerez la valeur du margin qui est ligne 31 dans le template, vous avec les capacités en bidouillage pour ça uwu)

    ALLEZ LES CODES MAINTENANT o/

    Le template index_box

    Code:
     <link href='https://fonts.googleapis.com/css?family=Passion+One:400,700' rel='stylesheet' type='text/css'>
      <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
       <tr>
          <td valign="bottom">
             <!-- BEGIN switch_user_logged_in -->
             <span class="gensmall">{LAST_VISIT_DATE}<br />
             {CURRENT_TIME}<br />
             </span>
             <!-- END switch_user_logged_in -->
             <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
          </td>
          <td class="gensmall" align="right" valign="bottom">
             <!-- BEGIN switch_user_logged_in -->
             <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
             <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
             <!-- END switch_user_logged_in -->
             <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
       </tr>
    </table>
    <!-- BEGIN catrow --><!-- BEGIN tablehead -->
     
      <div class="cate-titre">{catrow.tablehead.L_FORUM}</div>
     
    <div class="cate_cadre">
     
       <!-- END tablehead -->

       <!-- BEGIN forumrow -->
     
        <table width="100%" cellspacing="0" cellpadding="0" style="margin:10px 0px; border-collapse: collapse; border-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px;">

        <tr>
        <td><div class="retvirg"><div class="cate_ssforums" id="subforums">
    {catrow.forumrow.LINKS}{catrow.forumrow.L_LINKS}
          </div></div>
          <script type="text/javascript">$('.retvirg').each(function(){$(this).html($(this).html().replace(/>, /g,"><br />"));});</script>


          </td>
         
          <td>
            <div class="cate_bloc cate_desc">
             
              <div class="forum_titre_forum_stats">
                <table width="100%"><tr><td width="60px"><img src="http://image.noelshack.com/fichiers/2016/29/1468837083-triangles-titre.png" /></td><td>
                   <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
      </td></tr></table>
              </div>
                <img src="http://image.noelshack.com/fichiers/2016/29/1468837083-separation-description.png" class="separateur_cate" />
                <div class="cate_desc_inside">{catrow.forumrow.FORUM_DESC}</div>
            </div>
            </td>
       
        <td>            <!-- BEGIN avatar --><div class="cate_bloc cate_avatar">
                <div style="width: 200px;"></div>
          <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}
            <img class="no_new_xxx" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span></div>
                <!-- END avatar -->
    <div class="cate_bloc cate_lastpost">
      {catrow.forumrow.TOPICS} sujets • {catrow.forumrow.POSTS} messages<br />
      <img src="http://image.noelshack.com/fichiers/2016/29/1468837083-separation-dernier-message.png" class="separateur_cate" />
      <span class="gensmall">{catrow.forumrow.LAST_POST}</span></div></td>
       
      </tr>
      </table>
     
       <!-- END forumrow -->
       <!-- BEGIN catfoot -->
           
       <!-- END catfoot -->
       <!-- BEGIN tablefoot -->
    </div>
    <!-- END tablefoot -->
     
      <!-- END catrow -->

    CSS
    Code:

    /*********************************CATE YOOH*****************************/

    .cate-titre {
      text-align:center;
    }

    .cate_cadre {
     background-color:#e6e5e5;
     width:795px;
      margin:auto;
      margin-bottom:20px;
      padding: 10px 0px;
      color: #a0a0a0;
      font-size:12px;
    }

    .cate_bloc {
      background-color:#f1f0f0;
      margin:5px;
      padding:10px;
    }

    .cate_ssforums {
      overflow:auto;
      text-align:center;
      padding:0px;
      padding-right:10px;
      height:111px;
      width:110px;
      margin-left:10px;
      margin-right:0px;
      line-height:7px;
    }

    .cate_ssforums a {
     background-color: #f1f0f0;
     line-height:16px;
      width:110px;
      display:block;
      font-size:11px;
      color: #a0a0a0;
      text-decoration:none!important;
    }

    .cate_ssforums a:hover {
     text-decoration: none!important;
    }

    .cate_desc {
      overflow:auto;
      text-align:justify;
      width: 370px;
      padding-top:10px;
      height:91px;
      margin-left:0px;
    }
    .separateur_cate {
    margin: 5px auto!important;
      display:block;
    }

    .forum_titre_forum_stats {
    position:absolute;
    margin-top: -25px;
      width: 380px;
      margin-left:-10px;
      overflow:hidden;
    }

    .forum_titre_forum_stats a { 
      display: inline-block!important;
      font-family: sans-serif;
      color: #e667a1!important;
      text-decoration: none!important;
      font-size: 18px;
    }

    .forum_titre_forum_stats a span {
     color: #25d2bb!important;
    }

    .forum_stats {
    font-family: 'Imprint MT Shadow', 'Passion One', sans-serif;
      font-size: 15px!important;
      font-weight:400;
      text-decoration:none!important;
      text-shadow: 0 0 5px #b5d2d1, 0 0 5px #b5d2d1, 0 0 5px #b5d2d1, 0 0 5px #b5d2d1, 0 0 5px #b5d2d1, 0 0 5px #b5d2d1, 0 0 5px #b5d2d1, 0 0 5px #b5d2d1, 0 0 5px #b5d2d1;
      color: #fffefe;
      text-transform : uppercase;
    }
    .forum_stats:hover {
      text-decoration:none!important;
    }

    .cate_avatar {
      width:73px;
      float:left;
      padding:0px!important;
      height:111px!important;
    }

    .lastpost-avatar {
      padding:0px;
    }

    .lastpost-avatar img {
      height:101px;
      width:63px;
      margin:5px 0px 0px 5px;
     -moz-border-radius: 0px;
     -webkit-border-radius: 0px;
      border-radius: 0px;
    }

    .no_new_xxx {
     position:absolute;
      z-index: 15;
      height:35px!important;
      width:28px!important;
      margin-left: -15px!important;
      margin-top: 80px!important;
    }

    .cate_lastpost {
     margin-left:89px;
      text-align:center;
      color: #a0a0a0;
      padding:5px;
      height:101px;
      margin-right:10px!important;
      width: 160px;
    }

    .cate_lastpost img {
      display: block!important;
      margin:auto;
    }

    .cate_lastpost a {
      color: #f87059;
      text-decoration:none!important;
    }

    .cate_lastpost a:hover {
      text-decoration:none!important;
    }

    Vous remplacerez les images parce que les miennes sont découpées à l'arrache hein, ça sera plus propre uwu
    Pareil pour les couleurs, vérifiez que c'est les bonnes (ce que je confirme ne pas être le cas partout)

    Les séparateurs pour la description et le dernier message et les triangles sont directement dans le template et l'image de nouveau message avec les triangles, c'est gestion des images avancée > mini icônes > lien dernière réponse - nouveau (lien dernière réponse à masquer du coup)

    Pour les titres de forum, mettez des balises
    Code:
    <span></span>
    autour de la partie à mettre en vert

    Revenez me taper dessus si j'ai oublié des précisions é-è
    yooh
    yooh
    FémininAge : 32Messages : 143

    Mar 19 Juil 2016 - 13:03

    Merci beaucoup pour ton travail c'est parfait et en effet si il y a besoin je bidouillerais mais ça m'a l'air parfait.
    Mille merci et désolé pour ces heures supp.
    Eerie Ange's
    Eerie Ange's
    FémininAge : 22Messages : 166

    Mar 19 Juil 2016 - 18:46

    De rien :3

    Bonne continuation allez o/
    yooh
    yooh
    FémininAge : 32Messages : 143

    Mar 19 Juil 2016 - 19:26

    Merci beaucoup !!!
    Contenu sponsorisé


      La date/heure actuelle est Lun 13 Mai 2024 - 6:26