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.


    [CATE] (Elysia) Catégorie forum simple ?

    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Jeu 26 Fév 2015 - 5:48

    Ma demande



    Bonjour bonjour ! J'espère que vous allez bien ! Je suis ici aujourd'hui pour faire une demande de codage pour les catégories de mon forum. Mon schéma est similaire à certains trouvés sur internet et est bien simple mais malgré mes recherches, je n'ai pas trouvé exactement ce que je voulais. Honnêtement, je ne sais pas s'il est possible de mettre un cadre en ombrage comme sur mon schéma. Comme vous pouvez le voir, je me débrouille avec Photoshop mais niveau codage, je suis un gros moins zéro Sad Si jamais certaines choses ne sont pas possibles, n'hésitez pas à me le dire ! Ah, je précise aussi que mon schéma n'est pas un ''printscreen'' d'un forum. Il s'agit en fait de ma propre bannière et les catégories ont entièrement été faites sur Photoshop (juste au cas ou, pour préciser). Je compte aussi faire mes catégories en onglet puis je peux le faire moi-même mais si vous voulez tout de suite l'intégrer, je n'ai pas de problème avec ça.

    Schéma(s) et Eléments
    Schémas :
    Schéma juste ici !:
    Tailles des éléments : La largeur du forum est de 800px (je sais que mon schéma est un peu plus large, mais ce n'est pas grave.) La hauteur de chaque forum dans les catégories est de 100px, les icons et les boites à l'intérieur font 90px. L'image de fond du titre de catégorie fait 80px de hauteur. La distance entre les boitiers n'est pas égale sur le schéma mais je voudrais qu'elle le soit le plus possible.
    Effets voulus : Comme mentionné plus haut, j'aimerais beaucoup s'il était possible d'avoir le cadre en ombrage autour des catégories (celui à l'extérieur.. Bref, je crois que vous voyez bien de quoi je veux parler !) Je voudrais aussi savoir s'il est possible d'obtenir un effet similaire pour les titres à celui que j'ai mis. Je sais que photoshop et codage, ce n'est pas la même chose, mais je prends une chance. Si vous tentez votre chance avec les onglets, quelque chose de simple et fluide me suffit amplement ! J'aimerais pouvoir mettre les icons ''nouveau message'' et compagnie de la façon normale, via le panneau d'administration.
    Version de votre forum : PHPBB2


    Ressources
    Icon provisoire :
    Ici:
    , image de fond de catégorie :
    ici:

    Autres précisions ? Pour faciliter la tâche (en tout cas, je pense ?), voici les couleurs ! Fond : eceef6 Intérieur du cadre des forums : f7f7f9 Bordures et carrés des forums : ffffffPour les titres, dégradé de : d2d5e1 à 9198b5Le minuscule contours de texte et la bordure des description : ced2de et finalement la couleur du texte : b3b3b3 Ah j'oubliais aussi ! Je voudrais que les liens vers les sous-forums, qui sont automatiques, soient enlevés et que je puisse ajouter mes propres liens dans ''lien utile'' vers l'endroit que je souhaite !


    Je voudrais dire merci en avance à la personne qui va bien vouloir prendre le temps de faire ma commande. Je suis vraiment désespéré et évidemment, je suis près à attendre si cela veut dire que je vais pouvoir rendre mon forum plus beau ! Si quelque chose ne fonctionne pas, que vous avez besoin de précisions, n'hésitez surtout pas, aussi à m'informer si certaines de mes demandes sont impossibles, puisque je ne sais pas ce qui l'est ou pas. Merci encore !!


    Dernière édition par MxPrime2 le Sam 18 Avr 2015 - 20:51, édité 1 fois
    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Lun 2 Mar 2015 - 4:50

    Up :hug:
    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Ven 6 Mar 2015 - 3:31

    Toujours d'actualité ! :love:
    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Lun 9 Mar 2015 - 17:41

    Je suis toujours en vie ~ Very Happy
    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Ven 13 Mar 2015 - 18:59

    Up :friends:
    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Mar 17 Mar 2015 - 4:53

    Up... :ange:
    Lunayine
    Lunayine
    FémininAge : 26Messages : 55

    Mer 18 Mar 2015 - 16:37

    Coucou, ton schéma me plait bien, j'essaye de te faire quelque chose pour ce we =)
    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Mer 18 Mar 2015 - 16:45

    Oh ! Merci, vraiment beaucoup !!! J'ai hâte de voir ça, ne te presse pas surtout ! cheers
    Lunayine
    Lunayine
    FémininAge : 26Messages : 55

    Mer 18 Mar 2015 - 18:41

    Par contre je dois t'avertir que je n'arrive à faire fonctionner le dégradé de texte que sous Chrome :c
    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Jeu 19 Mar 2015 - 0:22

    Pas de problème ! Personnellement, j'utilise Chrome. S'il apparaît sur au moins un navigateur ça me va parfaitement :)
    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Mer 25 Mar 2015 - 21:47

    Toujours en cours :ange:
    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Mer 1 Avr 2015 - 3:02

    Toujours d'actualité !
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 11 Avr 2015 - 8:28

    Salut,

    On arrive à dix jours sans relance. C'est toujours d'actualité ici ?



    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Sam 11 Avr 2015 - 9:13

    C'est supposé l'être en tout cas !
    Elysia
    Elysia
    FémininAge : 24Messages : 139

    Lun 13 Avr 2015 - 4:54

    Bonsoir ou bon matin !

    Ta commande m'intéresse, j'ai juste quelques petites questions :
    → 800px étant la largeur de ton forum, faut-il que tes catégories soient légèrement plus petites ou égales à cette largeur ?
    → la police que tu souhaites utiliser est-elle Times New Roman partout ?
    → la taille de la police que tu désires est celle de ton schéma ?

    Je vais essayer de m'y mettre maintenant, et puis je continuerai mercredi certainement. :)

    EDIT: Ah, et ne t'inquiète pas, tout ce que tu demandes est faisable. Il y a juste les effets de dégradés et d'ombre interne dans les textes qui me paraissent compromis même si possibles théoriquement avec des bidouillages CSS. Reste à savoir si ça fonctionnera sur FA et même sur les différents navigateurs.



    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Lun 13 Avr 2015 - 5:59

    Salut !

    Tout d'abord, merci beaucoup beaucoup de bien vouloir t'occuper de ma commande ! Je n'ai jamais eu de nouvelles de l'autre personne finalement alors je suis bien content que quelqu'un d'autre la prenne en charge !

    Ensuite, c'est un bon point que tu soulèves là... L'image est plus large que 800px parce que c'est la bordure transparente autour des catégories qui élargit le forum. Je crois que mon schéma faisait quelque chose comme 818px de large incluant la bordure ou quelque chose du genre mais dans tous les cas, le forum n'a absolument rien dessus présentement donc même s'il est un peu plus large que 800px c'est pas bien grave, ma bannière est une bannière-fond de toute façon. Pour le moment oui, Times New Roman est la police que je préfère mais je sais comment la changer si jamais je change d'idée par la suite. Pour ce qui est de la taille des polices j'ai effectivement oublié de mentionner mais celle du schéma me va oui ! :)
    Elysia
    Elysia
    FémininAge : 24Messages : 139

    Lun 13 Avr 2015 - 9:35

    Oui, c'est parce que la personne ne répondait pas que j'ai décidé de m'y mettre, surtout que ce n'est pas la commande la plus exigeante. Donc je t'en prie, c'est un plaisir pour moi de coder. :)

    Je vais donc partir sur le fait que le bloc du titre de la catégorie (avec l'image de fond) fait 800px de largeur, et le cadre entourant chaque catégorie sera certainement de 820px ou quelque chose comme ça, sans compter l'ombre.
    C'est ok pour la taille du texte, il faudrat cependant peut-être faire plus petit pour le cadre du dernier message posté, je ne suis pas convaincue que ça rentre. Mais ce sont des details.
    Je peux déjà te dire que je suis parvenue, en farfouillant sur internet, à coder les deux textes avec effets spéciaux (ombre & dégradé internes). Du coup tu n'auras rien de plus à faire sur toshop ! ^^



    Elysia
    Elysia
    FémininAge : 24Messages : 139

    Mer 15 Avr 2015 - 23:45

    Bonsoir ! Je t'avais dit que je bosserai sur tes catégories aujourd'hui et c'est ce que j'ai fait. Je n'ai qu'un seul problème pour l'instant, c'est l'encadrement de la liste de tous les forums d'une seule catégorie, mais je cherche activement une solution. Il m'est venu une question ; tu n'as pas fait apparaître les statistiques des forums (x sujets, y réponses) dans ton aperçu, les souhaites-tu ? Si oui, où ?

    Edit: et, une autre interrogation, tu ne veux pas voir afficher le nom du sujet dans lequel a été postée la dernière réponse dans le bloc du dernier message ?



    Elysia
    Elysia
    FémininAge : 24Messages : 139

    Jeu 16 Avr 2015 - 18:26

    J'ai fini ! Je te montre ci-dessous ce que le code donne sur mon forum test. J'aimerais déjà que tu me dises si ça te convient, si tu veux ajouter des éléments ou même des effets (au survol par exemple). J'ai dû ruser pour les dégradé, désolée si ça ne fait pas exactement comme tu voulais, je trouve cependant que c'est assez ressemblant. Si tout est bon alors je nettoie le code, le commente et mets en place le système d'onglets. Voilà voilà, en attendant ta réponse. :)

    Aperçu :

    Largeur des catégories tout compris : 852px.



    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Ven 17 Avr 2015 - 23:10

    Salut, désolé de la réponse tardive !! Je ne reçois pas toujours de notifications et du coup j'ai oublié de venir faire un tour. J'enlève généralement la partie des statistiques oui ! Et pour le codage... C'est parfait, je crois que je vais pleurer de joie haha ! C'est vraiment excellent, je n'ai rien de plus à dire. Je suis vraiment content que tu aies réussis à mettre les effets sur les polices et j'apprécie aussi que tu aies pris la peine d'indiquer les tailles des icons (puisque bon j'oublie parfois et j'ai réalisé plus tard que j'avais rien mis pour les nouveaux messages). Merci beaucoup !! C'est certain qu'il a quelques petites différences d'avec mon schéma mais quand j'ai fais celui-ci, je n'étais même pas certain de pouvoir avoir quelque chose de complètement ressemblant. Pour moi tout me convient donc j'attends ça, désolé encore de ma réponse en retard !
    Elysia
    Elysia
    FémininAge : 24Messages : 139

    Sam 18 Avr 2015 - 2:39

    Je suis super ravie et flattée que ça te plaise ! Voici donc les codes, dis-moi si tu souhaites plus d'informations, j'ai tout de même essayé de mettre des noms de class assez explicites, donc si tu t'y connais un minimum, tu devrais pouvoir facilement te repérer. :)

    /!\ Avant tout, vérifie bien dans ton panneau d'administration que lorsque tu vas dans Affichage > Page d'accueil > Structure et hiérarchie, tu sois bien en mode "Séparer les catégories sur l'index : Moyen". Puis, sur la même page, plus en bas, tu peux mettre la longueur du titre du sujet affiché à 24 caractères.

    Template index_box entier (Page d'accueil - affichage des catégories) :
    Code:
    <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 -->
    <table border="0" cellpadding="0" cellspacing="0" cellmargin="0" style="width:auto; margin: auto;"><tr><td>
     
      <div class="cat_haut"></div><div class="cat_milieu">
      <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" cellmargin="0">
       
      <tr>
        <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      </tr>
    <!-- END tablehead -->
     
    <!-- BEGIN cathead -->
      <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
            <h{catrow.cathead.LEVEL} class="hierarchy">
                <span class="cattitle">
                  <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
                </span>
            </h{catrow.cathead.LEVEL}>
          </td>
          <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
      </tr>
    <!-- END cathead -->
     
    <!-- BEGIN forumrow -->
    <table class="forums" border-spacing="0" border="0" cellpadding="0" cellspacing="0" cellmargin="0" valign="middle"><tr><td>

      <tr class="forum_ligne1">
          <td border="0" cellpadding="0" cellspacing="0" cellmargin="0" colspan="2" nowrap="nowrap" width="100%" class="forumlink_block">
                <span class="forumlink">
                  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
          </td>
      </tr>
       
      <tr class="forum_ligne2">
          <!-- BEGIN inc -->
          <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
          <!-- END inc -->
          <td class="forum_description" valign="top">
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
          </td>
          <td class="forum_dernmess" align="center" valign="top">
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
            <div class="dernmess_contenu"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
          </td>
      </tr>
       
    </td></tr></table>
    <!-- END forumrow -->
     
    <!-- BEGIN catfoot -->
      <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
      </tr>
    <!-- END catfoot -->
       
    <!-- BEGIN tablefoot -->
      <div class="cat_marge_bas"></div>
       
      </table>
      </div>
     
      <div class="cat_bas"></div>
     
      <img src="{SPACER}" alt="" height="5" width="1" />
    <!-- END tablefoot -->
     
    <!-- END catrow -->

    Code à coller et à modifier dans la description d'un forum (contient les blocs de l'image, de la description et des liens personnalisables pour pouvoir les modifier indépendamment pour chaque forum) :
    Code:
    <table style="width: 100%; max-height:100px; margin-bottom: -12px;" cellpadding="0" cellspacing="0" border="0" border-spacing="0" valign="middle">
      <tbody>
          <tr>
               
            <td class="descr_img">
                <img alt="Image de description" src="http://nsm08.casimages.com/img/2015/04/16//15041606025519468513176454.png" />                   
            </td>
                                            
            <td class="descr_texte">
                <div class="descr_texte_contenu">
                  <div>
    <span class="d_texte_special">Lorem Ipsum</span>Aliquam quis nibh sed augue malesuada hendrerit. Maecenas ultrices scelerisque lectus nec molestie. Nulla suscipit, nibh sit amet viverra adipiscing, lacus eros dapibus magna, id mattis sapien tortor ac odio. Sed id libero porttitor, laoreet nisl eu, mattis nisi. Quisque lorem odio, accumsan et ipsum ac, vehicula commodo neque. Integer tempus nulla eget quam molestie, quis sodales diam rutrum. Vivamus dapibus lacus a magna tempor, id fringilla ligula ornare. Nunc consequat nibh orci, in pulvinar augue ascelerisque at. Duis volutpat pulvinar auctor. Vivamus nec augue mattis, feugiat turpis vitae, ultrices dui. Maecenas blandit vestibulum lorem, eget congue mi iaculis vel. Aliquam non molestie lacus. Curabitur sed enim diam. Morbi sed iaculis orci. Nunc et orci non arcu iaculis pellentesque.         
                  </div>
                </div>
            </td>

            <td class="descr_liens">
                <div><!-- ne pas mettre plus de 4 liens -->
                  <a href="URL DU LIEN">Lien 1</a><br />
                  <a href="URL DU LIEN">Lien 2</a><br />
                  <a href="URL DU LIEN">Lien 3</a><br />
                  <a href="URL DU LIEN">Lien 4</a><br />   
                </div>
            </td>

          </tr>
      </tbody>
    </table>

    CSS à coller dans la feuille de style du forum :
    Code:
    /********************* DEBUT CATEGORIES PAR ELYSIA DE NEVER UTOPIA *********************/

    /* _____ Reglages de base _____ */

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


    /* _____ Fonds categories en images _____ */

    .cat_haut
    {
      background: url('http://nsm08.casimages.com/img/2015/04/15//15041510472119468513174440.png') top center no-repeat;
      width: 852px;
      height: 20px;
      margin: auto;
      margin-top: 50px; /* espacement entre chaque categorie */
    }
    .cat_milieu
    {
      background: url('http://nsm08.casimages.com/img/2015/04/15//15041510494419468513174442.png') center repeat-y;
      width: 800px;
      margin: auto;
      padding: 0 26px 0 26px;
    }
    .cat_bas
    {
      background: url('http://nsm08.casimages.com/img/2015/04/15//15041510472019468513174439.png') bottom center no-repeat;
      width: 852px;
      height: 29px;
      margin: auto;
    }


    /* _____ Mise en forme titre de la catégorie _____ */

    .secondarytitle
    {
      width: 800px;
      height 80px;
      line-height: 80px;
      background : url('http://nsm08.casimages.com/img/2015/04/18//15041802332319468513180672.png') repeat; /* image fond titre categorie */
      border-bottom: 9px solid #fff;
    }
    .secondarytitle h2
    {
      color: rgba(213,215,242, 0.5);
      font-size: 40px;
      text-transform: uppercase;
      font-weight: normal;
      font-family: 'Times New Roman', serif;
      text-shadow: 1px 4px 5px #d2d5e1, 0 0 0 #000, 1px 4px 6px #d2d5e1, 0 0 1px #7d849c;
    }
    /* reglages pour selection */
    ::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
    ::selection { background: #5af; color: #fff; text-shadow: none; }


    /* _____ Mise en forme titre du forum _____ */

    .forums
    {
      width: 800px;
      padding: 0 10px 0 10px;
      background: #fff;
    }
    .forumlink_block
    {
      height: 25px;
      line-height: 25px;
      background: #edeff8;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
    }
    .forumlink a
    {
      font-size: 20px;
      color: rgba(213,215,242, 0.5);
      font-weight: normal;
      font-family: 'Times New Roman', serif;
      text-shadow: 0px 3px 3px #d2d5e1, 0 0 0 #000, 0px 3px 3px #d2d5e1, 0 0 1px #7d849c;
      display: inline-block;
      position: relative;
      left: 90px;
      top: 10px;
    }


    /* _____ Mise en forme forum _____ */

    .forum_ligne2
    {
      background: #f7f7f9;
      max-height: 100px;
    }

    /* Description (image + textes + liens) */

    .forum_description /* conteneur */
    {
      margin: 0;
      padding: 0;
      width: 80%;
      padding: 5px;
      height: 90px;
      overflow: hidden;
    }

    .descr_img img /* image perso */
    {
      width: 75px;
      height: 90px;
    }

    .descr_texte /* colonne texte */
    {
      padding-left: 5px;
    }
    .descr_texte .descr_texte_contenu /* conteneur texte */
    {
      padding: 2px;
      width: 410px;
      background: #fff;
      margin: 0;
    }
    .descr_texte .descr_texte_contenu div /* texte */
    {
      padding: 5px;
      border: solid 1px #ced2de;
      height: 74px;
      overflow: auto;
      font-size: 16px;
      color: #b3b3b3;
      text-align: justify;
    }
    .d_texte_special /* texte special du debut */
    {
      font-size: 18px;
      font-weight: bold;
    }
    .d_texte_special::after /* mettre point apres texte special */
    {
      content: " . ";
      font-size: 20px;
      font-weight: 900;
    }

    .descr_liens /* colonne liens persos */
    {
      padding-left: 5px;
    }
    .descr_liens div /* conteneur liens persos */
    {
      background: #fff;
      width: 98px;
      height: 90px;
      text-align: center;
      line-height: 23px;
    }
    .descr_liens div a /* liens persos */
    {
      display: inline-block;
      height: 25%;
      font-size: 16px;
      color: #b3b3b3;
    }
    .descr_liens div a::before /* mettre point avant lien perso */
    {
      content: ". ";
      font-weight: 700;
    }


    /* Dernier message du forum */

    .forum_dernmess {
      margin: 0;
      padding: 5px 5px 0 0;
      width: 20%;
      height: 90px;
    }

    .forum_dernmess img {
      width: 168px;
      height: 45px;
    }

    .dernmess_contenu
    {
      width: 100%;
      height: 40px;
      background: #fff;
      padding-top: 5px;
    }
    .dernmess_contenu img
    {
      display: none;
    }
    .dernmess_contenu .gensmall, .dernmess_contenu .gensmall a
    {
      line-height: 0.9em;
      font-size: 13px;
      color: #b3b3b3;
    }
    .dernmess_contenu .gensmall a
    {
      color: #838cb2;
    }


    /* _____ Marge interieure bas categories _____ */

    .cat_marge_bas
    {
      width: 800px;
      height: 10px;
      margin: auto;
      background: #fff;
    }

    /********************* FIN CATEGORIES PAR ELYSIA DE NEVER UTOPIA *********************/

    Voilà, donc si tu as bien suivi, tu auras compris que j'ai du mettre la majorité des éléments dans la description des forums afin que tu puisses modifier le contenu en fonction du forum. ^^
    Note aussi que j'ai (ré-)hébergé toutes les images sur mon compte casimages (fonds ombragés des catégories, fond marbré du titre des catégories) , elles ne sont pas prêtes de s'envoler, mais si tu préfères avoir la main dessus, ré-héberge les ! Tu peux modifier les images new/old/lock directement via le gestionnaire d'images du panneau d'administration de FA, comme tu as l'habitude de le faire. :)



    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Sam 18 Avr 2015 - 3:32

    C'est vraiment parfait, tout fonctionne ! Je suis vraiment satisfait ! Les onglets n'ont pas été ajoutés par croire je crois ?
    Elysia
    Elysia
    FémininAge : 24Messages : 139

    Sam 18 Avr 2015 - 3:33

    Oups, en effet, oubli de ma part, j'ai cru que j'avais terminé après avoir commenté le CSS haha /PAN/
    Je te fais ça tout de suite. :p



    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Sam 18 Avr 2015 - 3:45

    Pas de problème ! J'avais pas remarqué, j'ai viré le QEEL du coup et je trouve plus le code mais bon haha ! Prends ton temps :)
    Elysia
    Elysia
    FémininAge : 24Messages : 139

    Sam 18 Avr 2015 - 5:27

    J'ai utilisé le tutoriel de vic_le_faucheur afin de m'aider à l'intégration des codes qui ont quelques bugs sur FA. ^^
    Du coup je t'ai fait une petite mise en forme des onglets rappelant celle des catégories.
    Je profite du fait que je te donne le javascript des catégories pour te donner le javascript qui redirige vers le dernier message du dernier sujet actif lorsque l'on clique sur le lien du dernier sujet actif.

    Template index_box entier (Page d'accueil - affichage des catégories) :
    Code:
    <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>

    <div id="conteneur_onglets_cate">
      <div class="onglet_cate">Catégorie 1</div> •
      <div class="onglet_cate">Catégorie 2</div> •
      <div class="onglet_cate">Catégorie 3</div> •
      <div class="onglet_cate">Catégorie 4</div> •
      <div class="onglet_cate">Catégorie 5</div>
    </div>
     
    <div id="conteneur_cate">
     
    <!-- BEGIN catrow -->

    <!-- BEGIN tablehead -->
    <div class="categorie">
     
    <table border="0" cellpadding="0" cellspacing="0" cellmargin="0" style="width:auto; margin: auto;"><tr><td>
     
      <div class="cat_haut"></div><div class="cat_milieu">
      <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" cellmargin="0">
       
      <tr>
        <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      </tr>
    <!-- END tablehead -->
     
    <!-- BEGIN cathead -->
      <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
            <h{catrow.cathead.LEVEL} class="hierarchy">
                <span class="cattitle">
                  <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
                </span>
            </h{catrow.cathead.LEVEL}>
          </td>
          <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
      </tr>
    <!-- END cathead -->
     
    <!-- BEGIN forumrow -->
    <div class="cat_milieu"><table class="forums" border-spacing="0" border="0" cellpadding="0" cellspacing="0" cellmargin="0" valign="middle"><tr><td>

      <tr class="forum_ligne1">
          <td border="0" cellpadding="0" cellspacing="0" cellmargin="0" colspan="2" nowrap="nowrap" width="100%" class="forumlink_block">
                <span class="forumlink">
                  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
                </span>
          </td>
      </tr>
       
      <tr class="forum_ligne2">
          <!-- BEGIN inc -->
          <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
          <!-- END inc -->
          <td class="forum_description" valign="top">
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
          </td>
          <td class="forum_dernmess" align="center" valign="top">
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
            <div class="dernmess_contenu"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
          </td>
      </tr>
       
      </td></tr></table></div>
    <!-- END forumrow -->
     
    <!-- BEGIN catfoot -->
      <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
      </tr>
    <!-- END catfoot -->
       
    <!-- BEGIN tablefoot -->
        <div class="cat_milieu"><div class="cat_marge_bas"></div>
       
        </div>
        </table>
     
        <div class="cat_bas"></div>
     
      <img src="{SPACER}" alt="" height="5" width="1" />
    <!-- END tablefoot -->
    </div>
     
    <!-- END catrow -->
    </div>

    Les descriptions de forums ne changent pas.

    CSS :
    Code:
    /********************* DEBUT CATEGORIES PAR ELYSIA DE NEVER UTOPIA *********************/

    /* _____ Reglages de base _____ */

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


    /* _____ Onglets _____ */

    #conteneur_onglets_cate
    {
      width: 840px;;
      height: 50px;
      line-height: 50px;
      margin: auto;
      margin-top: 20px;
      margin-bottom: 30px;
      overflow: visible;
      background-color: transparent;
      box-shadow: 0 5px 5px #9a9faf;
      display: none;
      text-align: center;
      color: #9a9faf;
    }
    #conteneur_onglets_cate div
    {
      display: inline-block;
      color: #8a85ac;
      text-shadow: 0px 0px 3px #fff;
      font-size: 18px;
      margin-left: 5px;
      margin-right: 5px;
      font-family: 'Times New Roman', serif;
      transition: all ease 1s;
    }
    #conteneur_onglets_cate div:hover
    {
      color: rgba(213,215,242, 0.5);
      text-shadow: 0px 3px 3px #d2d5e1, 0 0 0 #000, 0px 3px 3px #d2d5e1, 0 0 1px #7d849c;
      transition: all ease 1s;
    }


    /* _____ Fonds categories en images _____ */

    .cat_haut
    {
      background: url('http://nsm08.casimages.com/img/2015/04/15//15041510472119468513174440.png') top center no-repeat;
      width: 852px;
      height: 20px;
      margin: auto; /*Permet de centrer la partie du corps*/
    }
    .cat_milieu
    {
      background: url('http://nsm08.casimages.com/img/2015/04/15//15041510494419468513174442.png') center repeat-y;
      width: 800px;
      margin: auto;
      padding: 0 26px 0 26px;
    }
    .cat_bas
    {
      background: url('http://nsm08.casimages.com/img/2015/04/15//15041510472019468513174439.png') bottom center no-repeat;
      width: 852px;
      height: 29px;
      margin: auto;
    }


    /* _____ Mise en forme titre de la catégorie _____ */

    .secondarytitle
    {
      width: 800px;
      height 80px;
      line-height: 80px;
      background : url('http://nsm08.casimages.com/img/2015/04/18//15041802332319468513180672.png') repeat; /* image fond titre categorie */
      border-bottom: 9px solid #fff;
    }
    .secondarytitle h2
    {
      color: rgba(213,215,242, 0.5);
      font-size: 40px;
      text-transform: uppercase;
      font-weight: normal;
      font-family: 'Times New Roman', serif;
      text-shadow: 1px 4px 5px #d2d5e1, 0 0 0 #000, 1px 4px 6px #d2d5e1, 0 0 1px #7d849c;
    }
    /* reglages pour selection */
    ::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
    ::selection { background: #5af; color: #fff; text-shadow: none; }


    /* _____ Mise en forme titre du forum _____ */

    .forums
    {
      width: 800px;
      padding: 0 10px 0 10px;
      background: #fff;
    }
    .forumlink_block
    {
      height: 25px;
      line-height: 25px;
      background: #edeff8;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
    }
    .forumlink a
    {
      font-size: 20px;
      color: rgba(213,215,242, 0.5);
      font-weight: normal;
      font-family: 'Times New Roman', serif;
      text-shadow: 0px 3px 3px #d2d5e1, 0 0 0 #000, 0px 3px 3px #d2d5e1, 0 0 1px #7d849c;
      display: inline-block;
      position: relative;
      left: 90px;
      top: 10px;
    }


    /* _____ Mise en forme forum _____ */

    .forum_ligne2
    {
      background: #f7f7f9;
      max-height: 100px;
    }

    /* Description (image + textes + liens) */

    .forum_description /* conteneur */
    {
      margin: 0;
      padding: 0;
      width: 80%;
      padding: 5px;
      height: 90px;
      overflow: hidden;
    }

    .descr_img img /* image perso */
    {
      width: 75px;
      height: 90px;
    }

    .descr_texte /* colonne texte */
    {
      padding-left: 5px;
    }
    .descr_texte .descr_texte_contenu /* conteneur texte */
    {
      padding: 2px;
      width: 410px;
      background: #fff;
      margin: 0;
    }
    .descr_texte .descr_texte_contenu div /* texte */
    {
      padding: 5px;
      border: solid 1px #ced2de;
      height: 74px;
      overflow: auto;
      font-size: 16px;
      color: #b3b3b3;
      text-align: justify;
    }
    .d_texte_special /* texte special du debut */
    {
      font-size: 18px;
      font-weight: bold;
    }
    .d_texte_special::after /* mettre point apres texte special */
    {
      content: " . ";
      font-size: 20px;
      font-weight: 900;
    }

    .descr_liens /* colonne liens persos */
    {
      padding-left: 5px;
    }
    .descr_liens div /* conteneur liens persos */
    {
      background: #fff;
      width: 98px;
      height: 90px;
      text-align: center;
      line-height: 23px;
    }
    .descr_liens div a /* liens persos */
    {
      display: inline-block;
      height: 25%;
      font-size: 16px;
      color: #b3b3b3;
    }
    .descr_liens div a::before /* mettre point avant lien perso */
    {
      content: ". ";
      font-weight: 700;
    }


    /* Dernier message du forum */

    .forum_dernmess {
      margin: 0;
      padding: 5px 5px 0 0;
      width: 20%;
      height: 90px;
    }

    .forum_dernmess img {
      width: 168px;
      height: 45px;
    }


    .dernmess_contenu
    {
      width: 100%;
      height: 40px;
      background: #fff;
      padding-top: 5px;
    }
    .dernmess_contenu img
    {
      display: none;
    }
    .dernmess_contenu .gensmall, .dernmess_contenu .gensmall a
    {
      line-height: 0.9em;
      font-size: 13px;
      color: #b3b3b3;
    }
    .dernmess_contenu .gensmall a
    {
      color: #838cb2;
    }


    /* _____ Marge interieure bas categories _____ */

    .cat_marge_bas
    {
      width: 800px;
      height: 10px;
      margin: auto;
      background: #fff;
    }

    /********************* FIN CATEGORIES PAR ELYSIA DE NEVER UTOPIA *********************/

    Javascript "Onglets catégories", activation sur l'index :
    Code:
    $('document').ready(function()
          {
          if($('.categorie').size() > 1)
            {
              $('#conteneur_onglets_cate').css( 'display' , 'block' );
              $('#conteneur_onglets_cate .onglet_cate').click(function()
              {
                change_categorie( $('.onglet_cate', '#conteneur_onglets_cate').index( this ) )
              });
           
            $('.onglet_cate:eq(0)').click();
        }
          });

          function change_categorie( index )
          {
              if( $('.categorie:eq(' + index + ')').size() != 0 )
              {
                $('#conteneur_cate').css( 'min-height' , $('.categorie:eq(' + index + ')').outerHeight() );

             
              $('.categorie').css( 'display' , 'none' );
                $('.categorie:eq(' + index + ')').fadeIn( 500 );
             
              $('.onglet_cate.actif').removeClass('actif');
                $('.onglet_cate:eq('+ index +')').addClass('actif');
              }
              else alert('Vous ne pouvez pas accéder à cette catégorie.');
          }

    Javascript "Redirection lien dernier message", activation sur l'index :
    Code:
    $(function(){
        $('.last-post-icon').each(function(){
            var link = $(this).attr('href');
            $(this).closest('span').find('a').eq(0).attr('href', link);
        });
    });



    Contenu sponsorisé


      La date/heure actuelle est Jeu 2 Mai 2024 - 20:57