Personnaliser Table rangée

[Amacky]

Rappel du premier message :

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://institut-de-medicis.forumactif.org/

Description du problème

Bonsoir à tous,

Voilà j'ai un petit soucis qui me turlupine depuis un petit moment déjà...

Mon forum à une belle apparence au niveau des catégories etc... Seulement voilà quand on clique sur un sous forum l'apparence est ignoble...

J'ai une bordure toute fine noire qui fait l'angle en bas à droite...

Je voulais savoir s'il était possible d'arrondir les angles, de séparé chaque sujet posté, et de regrouper le nombre de fois où le sujet a été vu et le nombre de réponse reçus?


Au lieu d'avoir:
Sujets Réponses Auteur Vues Derniers Messages

Avoir

Sujets Auteur Derniers messages
et en tout petit en dessous Vus et réponses?

Si c'est possible comment puis-je faire?


Merci par avance

[Amacky]

AU temps pour moi je n'avait pas ajouter le nouveau templates


Et ça marche Youpiiiiiiiiiiiiiiiiiiiiiiiiiiiiii

Pourrais-tu me dire à quoi corresponds les différente partie du code css?

[Amacky]

En fait quand on passe dessus les traits disparaissent et il n'y a plus le nombre de réponse et de vu! Est ce normal?

[Teurancher]

ÉDIT: J'ai rédigé ce message sans avoir vu le dernier. p:

Enfin ! ^^
J'ai remarqué quelques défauts, comme l'image de fond qui disparait au survol des différents éléments, l'espace entre chaque sujet ainsi que l'absence du nombre de vues et de réponses.

Remplacer le template topics_list_box par celui-ci:

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 -->

<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap">&nbsp;{topics_list_box.row.L_TITLE}&nbsp;</th>
      <th align="center" nowrap="nowrap" width="100">&nbsp;{topics_list_box.row.L_AUTHOR}&nbsp;</th>
      <th align="center" nowrap="nowrap" width="150">&nbsp;{topics_list_box.row.L_LASTPOST}&nbsp;</th>
      <!-- BEGIN multi_selection -->
      <th 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" /></th>
  <!-- END multi_selection -->
  </tr>
  <!-- BEGIN pagination -->
  <tr>
      <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
  </tr>
  <!-- END pagination -->
  <!-- END header_table --><!-- BEGIN header_row -->
  <tr>
      <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall">&nbsp;<b>{topics_list_box.row.L_TITLE}</b></span></td>
  </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
  <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 class="listesuj_row1" align="center" valign="middle" width="20"><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}" /></td>
      <!-- BEGIN icon -->
      <td class="listesuj_rowicon" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
      <!-- END icon -->
      <td class="listesuj_row2" 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="topictitle" 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>&nbsp;
        <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="listesuj_row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
      <td class="listesuj_row4" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

            <span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
        <div class="listesuj_repvues">{topics_list_box.row.REPLIES} réponses {topics_list_box.row.VIEWS} vues</div></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>
<tr><td style="width:100%;height:10px;background:transparent;"colspan="5"></td></tr>
  <!-- END topic --><!-- BEGIN no_topics -->
  <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>
  <!-- END no_topics --><!-- BEGIN bottom -->
  <tr>
      <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td>&nbsp;<span class="gensmall">{PAGINATION}</span></td>
              <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
            </tr>
        </table>
      </td>
  </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Dans le CSS, ajouter ceci:

Code:

.listesuj_repvues {
  color: #4e483c;
  font-family: Tahoma;
  font-size: 9px; }

Après confirmation, je rédigerai à la suite un récapitulatif avec les explications du code CSS, comme demandé.

[Amacky]

Les traits disparaissent encore! Mais sinon y a plus d'espace et les vus et réponses sont revenus!

[Teurancher]

En effet. Avant tout, dernier détail à régler;
Remplacer tout le code CSS concerné par celui-ci:

Code:

.listesuj_row1 {
    background-image: url("http://image.noelshack.com/fichiers/2015/32/1438876897-row1.png");
    height: 46px;
    padding-left: 5px;
    background-repeat: no-repeat;
}

.listesuj_rowicon {
    background-image: url("http://image.noelshack.com/fichiers/2015/32/1438876977-row2.png");
    height: 48px;
    background-repeat: repeat-x;
}

.listesuj_row2 {
    background-image: url("http://image.noelshack.com/fichiers/2015/32/1438876977-row2.png");
    height: 46px;
    background-repeat: repeat-x;
}

.listesuj_row3  {
    background-image: url("http://image.noelshack.com/fichiers/2015/32/1438876977-row2.png");
    height: 46px;
    padding-right: 10px;
    background-repeat: repeat-x;
}

.listesuj_row4  {
    background-image: url("http://image.noelshack.com/fichiers/2015/32/1438880279-row3-2.png");
    background-position: 100% 0%;
    background-repeat: no-repeat;
}

Remplacer l'intégralité du template par le suivant, les traits ne disparaitront plus:

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 -->

<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
      <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap">&nbsp;{topics_list_box.row.L_TITLE}&nbsp;</th>
      <th align="center" nowrap="nowrap" width="100">&nbsp;{topics_list_box.row.L_AUTHOR}&nbsp;</th>
      <th align="center" nowrap="nowrap" width="150">&nbsp;{topics_list_box.row.L_LASTPOST}&nbsp;</th>
      <!-- BEGIN multi_selection -->
      <th 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" /></th>
  <!-- END multi_selection -->
  </tr>
  <!-- BEGIN pagination -->
  <tr>
      <td class="row1" colspan="7" align="right"><span class="gensmall">{PAGINATION}</span></td>
  </tr>
  <!-- END pagination -->
  <!-- END header_table --><!-- BEGIN header_row -->
  <tr>
      <td class="row3" colspan="{topics_list_box.row.COLSPAN}"><span class="gensmall">&nbsp;<b>{topics_list_box.row.L_TITLE}</b></span></td>
  </tr>
<!-- END header_row -->

<!-- BEGIN topic -->
{topics_list_box.row.END_TABLE_STICKY}
  <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 class="listesuj_row1" align="center" valign="middle" width="20"><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}" /></td>
      <!-- BEGIN icon -->
      <td class="listesuj_rowicon" align="center" valign="middle" width="20">{topics_list_box.row.ICON}</td>
      <!-- END icon -->
      <td class="listesuj_row2" 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="topictitle" 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>&nbsp;
        <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="listesuj_row3" align="center" valign="middle"><span class="name"><strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></td>
      <td class="listesuj_row4" align="center" valign="middle" nowrap="nowrap">
            <!-- BEGIN avatar -->
            <div style="width: 200px;"></div>
            <span class="lastpost-avatar">{topics_list_box.row.topic.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar -->

            <span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span>
        <div class="listesuj_repvues">{topics_list_box.row.REPLIES} réponses {topics_list_box.row.VIEWS} vues</div></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>
<tr><td style="width:100%;height:10px;background:transparent;"colspan="5"></td></tr>
  <!-- END topic --><!-- BEGIN no_topics -->
  <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>
  <!-- END no_topics --><!-- BEGIN bottom -->
  <tr>
      <td class="catBottom" colspan="{topics_list_box.row.COLSPAN}" valign="middle">
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td>&nbsp;<span class="gensmall">{PAGINATION}</span></td>
              <td align="right"><a href="#top">{L_BACK_TO_TOP}</a>&nbsp;</td>
            </tr>
        </table>
      </td>
  </tr>
<!-- END bottom --><!-- BEGIN footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><br class="gensmall" /><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

[Amacky]

y a plus les coins arrondis à gauche :/

[Teurancher]

Le code suivant n'est plus dans la feuille de style CSS:

Code:

.listesuj_row1 {
    background-image: url("http://image.noelshack.com/fichiers/2015/32/1438876897-row1.png");
    height: 46px;
    padding-left: 5px;
    background-repeat: no-repeat;
}

Il faut le replacer

[Amacky]

C'est tout bon


J'adore je te remercie mille fois Merci Merci Merci Merci :p

[Teurancher]

C'est normal ^^ Désolé du temps que ça a pris, la solution qui fonctionne est la dernière à laquelle j'ai pensé alors que c'est la plus simple, honte à moi.

Sinon, dernier ajout à faire dans le CSS, ça sera mieux visuellement pour les réponses & vues:

Code:

        .listesuj_repvues {
          color: #4e483c;
          font-family: Tahoma;
          font-size: 9px; }

N'hésite pas si tu as besoin d'aide pour autre chose, je tâcherais d'être plus rapide.

Bonne soirée ~

[Amacky]

Peux tu me dire à quoi correspond le code css s'il te plaît?


Et franchement je te remercie pour le temps que tu as passé à m'aider

[Teurancher]

Ah oui, j'ai failli oublier. Les explications complètes et assez détaillées (à mon goût \o/):

.listesuj_row1 (2, 3 et 4) { on applique à la classe suivante les changements suivants:
background-image: url("https://2img.net/image.noelshack.com/fichiers/2015/32/1438876897-row1.png"); on demande ici à mettre l'image suivante (@ le lien) en tant qu'image de fond
height: 46px; on demande à ce que la hauteur soit de 46 pixels
padding-left: 5px; on demande à laisser une marge de 5 pixels à gauche de l'élément
background-repeat: no-repeat; on demande à ce que l'image de fond ne se répète pas et qu'elle ne soit affichée qu'une seule fois
}

.listesuj_repvues { on applique à la classe suivante les changements suivants:
color: #4e483c; on applique la couleur #4e483c (marron foncé) au texte
font-family: Tahoma; on change la police du texte pour une police nommée "Tahoma"
font-size: 9px; on modifie la taille du texte à 9 pixels
}

N'hésite pas si tu souhaites avoir d'autres explications sur autre chose ou si elles ne sont pas assez claires. ^-^

[Amacky]

Merciiiiiiiiiiiiiiiiiiiii

[Teurancher]

Je t'en prie ^-^ Mettre l'icône serait un beau geste de remerciement \o/

[Amacky]

Je le fais immédiatement Merci