Problème avec l'affichage d'un code pour l'apparence de la liste des sujets

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème avec l'affichage d'un code pour l'apparence de la liste des sujets

Message par Shiya le Ven 26 Aoû 2016 - 3:47

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 26 Août 2016 (Date d'ajout du code)
Lien du forum : http://ms-test.forumactif.org/f1-votre-1er-forum

Description du problème

Bonjour bonjour ♪

Je viens vous demander un coup de main pour un code qui me pose problème. Je m'explique :
J'essaie d'assembler un ensemble de codes pour faire un nouveau design pour un forum, tout se passait bien jusqu'à ce que je récupère un code pour la liste des sujets. Je copie/colle le code tel qu'il était et surprise, sur mon forum l'affichage n'est pas le même...

Liste normale
Liste au passage de la souris

Techniquement, la totalité de la liste en censée être comme le premier sujet (et non un sur deux) et il n'y a aucune trace de hover dans le css, ce qui fait que je ne comprends pas ce changement au passage de la souris...

Je ne sais pas s'il y a moyen d'arranger ce petit souci, mais dans le doute j'aime autant mettre directement le css et la template, dans l'espoir que quelqu'un puisse m'aider x_x

Merci d'avance

CSS :
Code:
.bloc_sujets
{
  width: 860px;
  margin: auto;
  padding: 5px;
 
    -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius:0px;
}
.sujets
{
  background:#6e9cce;
  padding: 3px;
    box-shadow: 0px 0px 5px #5786ba;
  -moz-box-shadow: 0px 0px 5px #5786ba;
  -o-box-shadow: 0px 0px 5px #5786ba;
  -htm-box-shadow: 0px 0px 5px #5786ba;
  -webkit-box-shadow: 0px 0px 5px #5786ba;
      -moz-border-radius: 0px 0px 0px 0;
  -webkit-border-radius: 0px 0px 0px 0;
  border-radius:0px 0px 0px 0;
    border-bottom:#5786ba 8px double;
}
.topictitle
{
  font-variant: small-caps;
  letter-spacing:1px;
  font-size: 12px;
}
.sujets_auteur
{
  display: block;
  width: 180px;
  font-size: 11px;
}
.sujet_last
{
  display: block;
  width: 170px;
  height: 30px;
  background: #e7f0fa;
  border:1px dotted #5786ba;
  border-left: 1px dotted #5786ba;
  border-right: 1px dotted #5786ba;
  padding-top: 10px;
  font-size: 11px;
  margin-right:10px;

}
.sujets_stats
{
  width: 860px;
  text-align: right;
  margin-bottom: 5px;
  text-align:center;
  -moz-border-radius:0 0 0px 0px;
  -webkit-border-radius:0 0 0px 0px ;
  border-radius:0 0 0px 0px;
  background-color:#e7f0fa;
  border-bottom: 2px solid #5786ba;
}
.sujets_stats_contenu
{
  font-size: 10px;
  letter-spacing:2px;
  color: #5786ba;
}

Template :
Code:
<!-- BEGIN topics_list_box --><!-- BEGIN row --><!-- BEGIN header_table --><!-- BEGIN multi_selection -->
<script type="text/javascript">
function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
  var all_checked = true;
  for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
        all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
      }
  }
  document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
}
function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
  for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
      if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
        document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
      }
  }
}
</script>
<!-- END multi_selection -->

<div class="bloc_sujets">
      <!-- BEGIN multi_selection -->
      <span align="center" nowrap="nowrap" width="20"><input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /></span>
  <!-- END multi_selection -->
 
  <!-- BEGIN pagination -->
      <span align="right"><span class="gensmall">{PAGINATION}</span></span>
  <!-- END pagination -->
 
  <!-- END header_table --><!-- BEGIN header_row -->
<!-- END header_row -->
 
<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
 
 
    <table class="sujets"><tr>
      <!-- BEGIN single_selection -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20"><input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
      <!-- END single_selection -->
      <td><span class="icones_sujets"><img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" /></span></td>
      <!-- BEGIN icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
      <!-- END icon -->
                <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
        <div class="topictitle">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title">
              <a class="topictitle2" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
        </div>
        <!-- BEGIN switch_description -->
        <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
        </span>
        <!-- END switch_description -->
        <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
        <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
      </td>

      <td class="row3" align="center" valign="middle"><span class="sujets_auteur"><i>par {topics_list_box.row.TOPIC_AUTHOR}</i></span></td>
      <td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap"><span class="sujet_last">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span></td>
<!-- BEGIN multi_selection -->
      <td class="row2" align="center" valign="middle"><span class="postdetails"><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></span></td>
  <!-- END multi_selection -->
  </tr></table>
  <div class="sujets_stats"><span class="sujets_stats_contenu">Ce sujet a été vu {topics_list_box.row.VIEWS} fois et a reçu {topics_list_box.row.REPLIES} réponse(s).</span></div>
  <!-- END topic --><!-- BEGIN no_topics -->
  <table><tr>
      <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
          </tr></table>
  <!-- END no_topics --><!-- BEGIN bottom -->

  <br /><br />
<div class="pages"><span class="gensmall">{PAGINATION}</span>
  <span><a href="#top">{L_BACK_TO_TOP}</a> </span></div>
 
<!-- END bottom --><!-- BEGIN footer_table -->
</div><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->


Dernière édition par Shiya le Ven 26 Aoû 2016 - 23:05, édité 3 fois

Shiya
**

Féminin
Messages : 87
Inscrit(e) le : 28/12/2007

Shiya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec l'affichage d'un code pour l'apparence de la liste des sujets

Message par Neptunia le Ven 26 Aoû 2016 - 6:21

Bonjour ^^

Le fonctionnement que vous décrivez n'a rien d'anormal et est celui de n'importe quel forum phpBB2.
Les sujets alternent la class row1 et row2 à raison d'un sujet sur deux, avec effet au survol pour les sujets "impairs".
Ce qui se retrouve aussi bien dans le template de base que dans le vôtre.
Code:

      <!-- END icon -->
                <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
{topics_list_box.row.ROW_CLASS} -> prendra la valeur row1 pour les sujets impairs et row2 pour les sujets pairs.
L'effet de survol est présent dans ce bout de code.
onmouseover -> au passage de la souris la cellule prend la class row2
onmouseout -> lorsque le curseur n'est plus sur la cellule, cette dernière reprend sa class initiale.

Du coup si vous voulez que tous vos sujets aient l'apparence de vos sujets impairs, et sans effet au survol, il suffit de remplacer le bloc de code par :
Code:

      <!-- END icon -->
                <td class="row1" width="100%">
Si vous voulez au contraire que les sujets prennent modèles sur les sujets pairs il faudra ce code-ci

Code:

      <!-- END icon -->
                <td class="row2" width="100%">

Neptunia
+ Hyperactif +

Féminin
Messages : 10390
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec l'affichage d'un code pour l'apparence de la liste des sujets

Message par Shiya le Ven 26 Aoû 2016 - 7:16

Merci c'est exactement ce que je cherchais !
Ce code avait été installé sur mon autre forum et c'est là que je l'ai récupéré, mais il n'y avait pas ce truc du survol du coup j'étais complètement perdue...

Encore merci en tout cas !

Edit : Y aurait un moyen de faire apparaitre ou disparaitre ce trait sur tous les sujets ?

Shiya
**

Féminin
Messages : 87
Inscrit(e) le : 28/12/2007

Shiya a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec l'affichage d'un code pour l'apparence de la liste des sujets

Message par Neptunia le Ven 26 Aoû 2016 - 8:29

Alors là encore, c'est l'un des travers de phpBB2.

Ce que vous appelez un trait est en fait la cellule des icônes de sujets (comme le résolu ou Astuce de ce forum)
En phpBB2 la cellule s'adapte d'office à la taille de l'image. Si pas d'image vous avez ce truc pas très glamour.
La partie concernée du template :

Code:
      <!-- BEGIN icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
      <!-- END icon -->

Deux cas de figure :
- vous comptez utiliser les icônes de sujets et dans ce cas il faudra déplacer l'information ailleurs, par exemple juste avant le titre du sujet et l'icône éventuelle de participation au sujet.
- vous ne comptez pas utiliser ces icônes et dans ce cas il faut supprimer ceci :
Code:
      <!-- BEGIN icon -->
      <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
      <!-- END icon -->
Les sections BEGIN ... END ayant parfois un rôle bien précis, personnellement je ne virerais que la cellule (<td ... /td>) tout en laissant les commentaires BEGIN et END

Et généralement quand on supprime une cellule, il y a un colspan à modifier ailleurs.
Code:
<!-- BEGIN no_topics -->
  <table><tr>
      <td class="row1" colspan="{topics_list_box.row.COLSPAN}" align="center" valign="middle" height="30"><span class="gen">{topics_list_box.row.L_NO_TOPICS}</span></td>
          </tr></table>
  <!-- END no_topics -->
Sauf erreur de ma part, ce passage ne concerne que le cas ou un sous-forum ne contient encore aucun sujet. Donc si après avoir supprimé la cellule des icônes de sujets, vous avez un problème sur les sous-forums vides, il vous faudra remplacer {topics_list_box.row.COLSPAN} par un nombre correspondant au nombre de cellules normalement présent par ligne.
A vue de nez, 5 avec la colonne icône de sujet, 4 sans cette colonne.




Edité :

@Shiya a écrit:Edit : Y aurait un moyen de faire apparaitre ou disparaitre ce trait sur tous les sujets ?
Après relecture de la question je vous propose une autre solution.
Dans cette partie :
Code:
          <!-- BEGIN icon -->
          <td class="{topics_list_box.row.ROW_CLASS}" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
          <!-- END icon -->
Remplacez {topics_list_box.row.ROW_CLASS} par row1 ou row2 selon vos préférences.




@Shiya a écrit:Merci c'est exactement ce que je cherchais !
Ce code avait été installé sur mon autre forum et c'est là que je l'ai récupéré, mais il n'y avait pas ce truc du survol du coup j'étais complètement perdue...
Le problème peut aussi être contourné depuis le PA via la gestion des couleurs. Si vous attribuez la même couleur à
- Table Rangée Couleur 1 :
- Table Rangée Couleur 2 et surbrillance :
Il y aura toujours l'effet au survol mais vous ne le verrez pas. Ce qui était vraisemblablement le cas sur votre autre forum.

Neptunia
+ Hyperactif +

Féminin
Messages : 10390
Inscrit(e) le : 08/08/2010

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec l'affichage d'un code pour l'apparence de la liste des sujets

Message par Shiya le Ven 26 Aoû 2016 - 23:05

Tout est résolu, merci beaucoup pour ton aide !

Shiya
**

Féminin
Messages : 87
Inscrit(e) le : 28/12/2007

Shiya a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum