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

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>

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