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.

-24%
Le deal à ne pas rater :
PC Portable Gaming 15.6″ Medion Erazer Deputy P40 (FHD 144Hz, RTX ...
759.99 € 999.99 €
Voir le deal

    Structure FA : Les problèmes les plus fréquents et leur solution

    Angelusia
    Angelusia
    FémininAge : 38Messages : 1159

    Jeu 2 Mai 2013 - 13:25

    Bonjour bonjour :)

    Voilà le petit article promis ^^

    Il est en cours. Si vous voyez des manquants, n'hésitez pas à le dire :)

    Les problèmes les plus souvent rencontrés et leur solution.


    Vous êtes nombreux a tenter de coder vous-même votre forum de A à Z ou utiliser un des tutoriels qui sont à votre disposition. Cependant, malgré votre bonne motivation, bonne volonté, il vous arrive fréquemment de rencontrer des problèmes. Certains plus coriaces que d'autre. Vous venez donc, comme beaucoup d’entre vous, demander de l'aide dans la partie Adéquate.

    Pour vous faciliter la vie et gagner du temps, car on le sait tous, fouiller les archives, ce n'est pas une affaire d'une seconde, cette article est né. Il aura pour but de vous répertorier les problèmes que vous rencontrez le plus souvent et d'apporter la solution.

    Voici le petit listing des Thèmes Abordés.

    I : Les forum sur deux colonnes
    > les sous-forums ne s'affichent pas
    > titre de catégorie qui ne veut pas changer ou se centrer
    > image No new/New/Lock qui sortent du fond
    > forums qui se collent aux catégories
    > catégories qui refusent obstinément de se centrer

    II : Affichage du titre quand celle-ci est une image
    > conserver l'image sur l'index et uniquement sur lui
    > image qui ne s'affiche pas
    > affichage erreur dans l'index des catégories et forums
    > image qui élargit le forum

    III : Des catégories en onglet
    > changer la police des onglets
    > centrer les onglets

    IV : Qeel avec effet de Zoom
    > carré de couleur qui n'a rien à y faire
    > vide au dessus du qeel

    V : Page d'accueil en accordéon
    > image qui va en dessous
    > écrire un texte au dessus de l'accordéon
    > mettre des images à la place de l'écriture

    VI : Personnaliser les phrases de son QEEL
    > les membres connectés sous 24h
    > les anniversaires

    Maintenant, passons aux explications des problèmes. Vous verrez bien que parfois, ce sont vraiment des choses minimes qui ont causé bien des tracas et cheveux en moins.

    I : Les Forums sur Deux Colonnes

    1) Les sous-forums ne s'affichent pas

    La disparition des sous-forums n'est pas en elle-même un problème de codage, elle se range dans la catégorie des manipulations oubliées. Lorsque vous suivez le tutoriel pour mettre vos catégories sur deux colonnes, vous devez faire attention au paragraphe qui parle des sous-forums.

    Il indique bien qu'après l'installation de votre templates vous devez faire :

    Affichage > Structure & Hiérarchie > Liens vers les niveaux inférieurs > Oui / Oui

    2) Titre de catégorie qui ne veut pas changer ou se centrer

    Pour parvenir à centre vos titres de catégorie qui vous résiste au grand dam de votre patience, il faut que vous alliez dans votre templates Index_box que vous recherchez ceci.

    Code:
    <div class="cate_titre"><span class="catetitre_bloc"></span>
      <span class="catetitre_content">{catrow.tablehead.L_FORUM}</span></div>

    Vous remplacez par

    Code:
    <div class="cate_titre"><span class="catetitre_bloc"></span>
      <div class="catetitre_content">{catrow.tablehead.L_FORUM}</div></div>

    Ensuite, pour votre css, vous cherchez la class catetitre_content

    Code:
    .catetitre_content
    {
    position: absolute;
    z-index: 2;
    display: block;
    width: 950px;
    margin-left: auto;
      margin-right: auto;
      margin-top: -40px;
    text-align: center;
    padding: 2px;
     
    }

    Que vous remplacerez par

    Code:
    .catetitre_content
    {
    z-index: 2;
    width: 100%;
    margin-top: -40px;
    text-align: center;
    padding: 2px;
    }

    3) Image No new/New/Lock qui sortent du fond

    S'il s'avère que votre image est bien trop grande, vous constatez que le rendu finale est loin d'être beau. Il est même assez mauvais.  Ce que vous devez faire c'est quelques modifications sur le templates.

    En premier, vous cherchez dans votre templates index_box ceci

    Code:
    <div class="forum_contenu">
        {catrow.forumrow.FORUM_DESC}<br />
      
        <div class="icone_stats"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone" /></td>
          <td><span class="stats_lastpost">
            <span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
            <span class="lastpost">{catrow.forumrow.LAST_POST}</span>
            </span></td>
          </tr></table></div>
      
      </div>

    Vous remplacez par

    Code:
    <table><tr><td> <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icone_stats" /></td>
          <td><span class="stats_lastpost">
            <span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span>
            <span class="lastpost">{catrow.forumrow.LAST_POST}</span>
            </span></td>
          </tr></table>

    Ensuite, vous cherchez dans votre css la class icone_stats

    Code:
    .icone_stats
    {
      width: 300px;
      margin: auto;
      margin-top: -30px;
    }

    Et vous remplacez par

    Code:
    .icone_stats {
      width:  mettez votre largeur;
      display: block;
     height: mettez votre taille;
    position: relative;
    }

    Vous n'aurez qu'à régler ensuite votre placement avec bottom, top, left ou right.

    4) Forums qui se collent aux Catégories

    Pour corriger ce problème, vous devez chercher dans votre css

    Code:
    .catetitre_content
    {
    position: absolute;
    z-index: 2;
    display: block;
    width: 950px;
    margin-left: auto;
      margin-right: auto;
      margin-top: -40px;
    text-align: center;
    padding: 2px;
     

    Et le remplacer par

    Code:
    .catetitre_content
    {
    z-index: 2;
    width: 100%;
    margin-top: -40px;
    text-align: center;
    padding: 2px;
    }


    5) Catégorie qui refusent obstinément de se centrer

    En premier, vous devez vous chargez de faire :

    Affichage  > Structure & hiérarchie. Choisissez de séparer les catégories sur l'index en niveau moyen.  

    Ensuite, pour que ça puisse fonctionner, vous devez aller dans

    Général  > Catégorie & Forum.  

    Et vous mettez vos titres de catégories comme ceci (Les gros en bleu foncé et gras)

    Code:
    <span class="catetitre">Votre 1ère catégorie</span>

    II : Affichage du titre quand celle-ci est une image

    1)  Conserver l'image sur l'index et uniquement sur lui

    Il est tout à fait possible d'avoir vos titres de catégorie en image sur l'index et avec du texte dans le forum.

    En premier, il faut que vous alliez sur l'index de vos forums et catégories qui se trouve ici.

    Général > Catégorie et Forum (les catégories étant ceux en gras)

    Vous faites modifier. Puis

    Code:
    <img src="lien de votre image"style="display:none;" /><span class="titre">Votre titre</span>

    Et vous mettez ceci dans votre css

    Code:

    th.secondarytitle h2 img { display: inline!important; }
    th.secondarytitle h2 .titre { display: none; }

    2)  Image qui ne s'affiche pas

    Si votre image ne s'affiche pas, il faut que vous vérifiez si la syntaxe est correctement orthographiée et qu'aucune balise n'est ouverte ou qu'il ne vous manque un " ou une ;.

    3) Affichage erreur dans l'index des catégories et forums

    Pour enlever l'erreur en rouge, il faut que vous mettez dans votre image de catégorie un :  alt="votre catégorie"

    4) Image qui élargit le forum

    Il s'avère souvent que vous voyez un élargissement au niveau de l'intérieur de vos forums, vis à vis de l'image de catégorie. Pour éviter ce détail gênant, vous mettez dans votre css ceci.

    Code:
    a.nav img
    {
    width: votre largeur;
    }

    III : Des catégories en onglet

    1)  Changer la police des onglets

    Il est possible de changer la police de caractère en rajoutant dans la class css onglet ceci

    Code:
    font-family: nom de la police;

    2) Centrer les onglets

    Pour centre les onglets, il faut  que vous cherchez la class qui contrôle vos onglets. Et que vous rajoutez :

    Code:
    margin : auto;



    IV : Qeel avec effet de Zoom

    a)  Carré de couleur qui renvoi au row1

    Comme vous avez pu le constater, souvent, lorsque vous passez sur votre forum sous le navigateur Google Chrome, un rectangle de couleur s'affiche juste en dessous des anniversaires. Ce petit souci disgracieux est en fait normal. Il s'agit de la teinte de votre row1, votre première colonne. Il est possible d'y remédier avec une petite manipulation.

    Vous devez aller dans vos templates et éliminer tous les row1. Voici l'astuce donné par Neva.

    Il faut donc éliminer tous les row1 des autres templates en leur donnant une autre classe si tu veux pouvoir changer cette couleur de fond. Comme ça ça a l'air laborieux mais, en fait, il suffit de copier/coller le template dans un logiciel qui a la fonction rechercher/remplacer et ça te remplace automatiquement tes "row1" par ce que tu veux

    Ensuite, il ne te reste plus qu'à donner les propriétés de row1 à ta nouvelle classe !

    Ou vous pouvez aussi mettre ceci dans votre css
    Code:

    .colonne td
    {
     background-color: transparent;
    }

    2) Vide au dessus du qeel

    Le vide qui apparaît au dessus de vos trois blocs qui se zoom n'est autre que la place prévue pour l'image. Si vous souhaitez l'enlever et remonter les trois blocs vous devez chercher dans votre feuille de style css la class

    Code:
    .qeel
    {
      width: votre largeur;
      height: votre hauteur;
      background: url(#);
    }

    Que vous remplacez par.

    Code:
    qeel
    {
      width:  votre largeur;
      height: votre hauteur;
    margin-top: -50px;
      background: url(#);
    }

    Vous allez ensuite dans votre templates index-body et vous supprimez ceci.

    Code:
    <div class="qeel_titre"></div>


    Et dans le css vous enlevez ceci

    Code:
    .qeel_titre
    {
      width: 600px;
      height: 100px;
      background: url(#);
    }

    V : Page d'accueil en accordéon

    1) Image qui va en dessous

    L'image qui se place en dessous vient juste d'un

    Code:
    <embed>
    mal placé. Vérifiez bien qu'il se situe juste en dessous de la div suivante.

    Code:
    <div id="accueil">

    2) Ecrire un texte au dessus de l'accordéon

    Pour pouvoir écrire au-dessus de votre accordéon, vous devez chercher dans le html de votre page d'accueil ceci.

    Code:
    </div>
    <!-- Merci de ne PAS enlever le crédit ! Il est fait pour être en petit, de la couleur de vos liens, en dessous de l'accordéon, il ne fera pas fuir vos membres  et il permet de remercier le créateur du code que vous utilisez pour votre propre forum [Sparrow-style] -->
    <span class="credit"><a href="http://www.never-utopia.com">(c) par Never-Utopia</a></span>

    Et vous rajoutez juste au dessus du code suscité plus haut

    Code:
    <div="votre class">blabbla blabbla blabbla blabbla blabbla blabbla blabbla blabbla</div>

    Il ne reste plus qu'à faire une class dans votre css et la personnaliser à votre goût.

    3) Mettre des images à la place de l'écriture => lui

    Si vous souhaitez mettre une image à la place de votre écriture, vous devez chercher dans votre html

    Code:
    <span class="titre">Titre partie 1</span>

    Et faire en sorte de changer votre class pour chaque fois que vous la verrez. Le premier sera titreun. Le deux titredeux. Etc. Vous faites cette manipulation pour tous vos onglets.

    Ensuite, vos créez vos class pour chacun d'entre eux.

    En dernier, vous cherchez dans votre templates index_body le javascript

    Code:
    $("#pa div.partie .titre").click(
      function ()
      {
          $(this).parent().siblings().find("div.content").slideUp("normal");
      
          if($(this).parent().hasClass("current"))
          {
            $("#pa div.partie").removeClass("current");
          }
          else
          {
            $("#pa div.partie").removeClass("current");
            $(this).parent().toggleClass("current");
        
          }
            $(this).next().slideToggle("normal");
          return false;
      }
    );

    Et vous le remplacez par.

    Code:
    var tab = ["Titreun", "Titredeux", "Titredeux", "TitreToutCeQu'ilVeut"];
    var i = 0;

    while (i < tab.length)
    {
      $("#pa div.partie "+tab[i]).click(
    $("#pa div.partie .titre").click(
      function ()
      {
          $(this).parent().siblings().find("div.content").slideUp("normal");
      
          if($(this).parent().hasClass("current"))
          {
            $("#pa div.partie").removeClass("current");
          }
          else
          {
            $("#pa div.partie").removeClass("current");
            $(this).parent().toggleClass("current");
        
          }
            $(this).next().slideToggle("normal");
          return false;
      }
    );
     
      i = i + 1;
    }

    Et la petite explication de Shino :)

    Pour l'explication c'est :

       On définit un entier ( qu'on appelle 'i' mais il pourrait très bien s'appeler patate) auquel on donne la valeur zéro. Parce que le premier élément d'un tableau il est à l'index 0.
       On crée une boucle "tant que" notre valeur i est inférieur à la longueur du tableau. Dans mon exemple, 'i' aura les valeurs : 0, 1, 2 et 3.
       Dans cette boucle on fout tout son code. Il ne faut pas oublier de concatener (avec l'opérateur +) les phrases "#pa div.partie" et le titre qui se trouve à la position 'i' du tableau. L'opérateur + permet de créer une seule phrase en fait (qui va varier en fonction du mot du tableau qu'on regarde).
       A la fin de la boucle on oublie pas d'ajouter 1 à la valeur de 'i' parce que sinon on toujours appliquer du code au même titre contenu dans le tableau, et là c'est pas bon signe Razz

    VI : Personnaliser les phrases de son QEEL

    1) Les membres connectés sous 24h

    Pour pouvoir changer les phrases, il faut que vous utiliser ceci.

    Code:
    <table id="conmem"><span class="qeel_contenu">{L_CONNECTED_MEMBERS}</span></table>
                <script type="text/javascript">
                jQuery('#conmem span.gensmall').html(jQuery('#conmem span.gensmall').html().replace('Membres connectés au cours des 48 dernières heures :' , 'votre texte'));
                </script>


    2) Les anniversaires

    Pour les anniversaires, vous devez utiliser ceci.

    Code:
         <span class="qeel_contenu">{L_WHOSBIRTHDAY_TODAY}</span>
          <span id="whosbirthday"></span>
          <span class="qeel_contenu">{L_WHOSBIRTHDAY_WEEK}</span>
    <script type="text/javascript">
      document.getElementById('whosbirthday').parentNode.innerHTML=document.getElementById('whosbirthday').parentNode.innerHTML.replace(/Aucun membre ne fête son anniversaire/,"votre texte").replace(/Aucun membre ne fête son anniversaire/,"votre texte");
     </script>
    Illeanëlia
    Illeanëlia
    FémininAge : 37Messages : 404

    Mer 5 Juil 2017 - 14:12

    Merci pour ses explications de problème rencontré c'est très instructif et utile.

      La date/heure actuelle est Ven 29 Mar 2024 - 7:53