Tópico alternando cores

Qual é minha questão:
Http://opiece-rpg.forumeiros.com/f1-acoes-da-staff

Gostaria que a cor de cada tópico fosse alternada: primeiro tópico seria cinza claro, o segundo, cinza escuro, depois cinza claro de novo, e cinza escuro, e depois claro, e por aí vai.

Exatamente como está aqui: http://www.onepiecerpg.com/f5-regras

Endereço do meu fórum:
http://opiece-rpg.forumeiros.com

Versão do fórum:
PHPBB2

Olá!
Aceda a Folha de Estilo CSS:

Painel de Controle Visualização Imagens e Cores Cores Folha de estilo CSS

Código:

Código:

.forumline .row1 {background-color: #f2efef;}
.forumline .row2 {background-color: #e0e0e0;}

e Valide!

Até mais.

Olá!

Aceda á "Folha de estilos CSS"
Painel de Controle Visualização Imagens e Cores Cores Folha de estilos CSS

Código:

td.row1,td.row3.over:hover{background-color:#f2efef}td.row1.over:hover,td.row2{background-color:#e0e0e0}td.row3{background-color:#000}

Valide.

Melhores cumprimentos,
Today

Então, o problema de usar CSS é que ele muda as cores de todas as tabelas que possuem a mesma classe. Então eu teria que adicionar IDs para os trs correspondentes, acho.

Meu template da visualização dos tópicos é este...

Código:

<!-- 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 id="jstable" class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <th colspan="{topics_list_box.row.header_table.COLSPAN}" align="center" nowrap="nowrap" class="secondarytitle"> {topics_list_box.row.L_TITLE} </th>
      <th align="center" nowrap="nowrap" width="65" class="secondarytitle"> {topics_list_box.row.L_REPLIES} </th>
             <th align="center" nowrap="nowrap" width="50" class="secondarytitle"> {topics_list_box.row.L_VIEWS} </th>
      <th align="center" nowrap="nowrap" width="170" class="secondarytitle" style="width: 180px;"> {topics_list_box.row.L_LASTPOST} </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"> <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="{topics_list_box.row.ROW_FOLDER_CLASS}" 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>
      <td></td>
      <td class="{topics_list_box.row.ROW_CLASS}" onmouseover="this.style.backgroundColor='#dadada'" onmouseout="this.style.backgroundColor=''" width="100%" style="line-height: 12px;" valign="middle">
         <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><br><span style="color: black; font-size: 10px; text-decoration: none!important; text-color: black!important;">por <b>{topics_list_box.row.TOPIC_AUTHOR}</b></span>
            </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="row2" align="center" valign="middle" style="border-left: 1px dotted black;"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>
                <td class="row2" align="center" valign="middle" style="border-left: 1px dotted black;"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td>
      <td class="row3Right" align="left" valign="middle" nowrap="nowrap" style="border-left: 1px dotted black;"><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></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>
   <!-- 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 footer_table -->
</table><!-- END footer_table --><!-- BEGIN spacer --><img src={SPACER}><!-- END spacer --><!-- END row --><!-- END topics_list_box -->

Resolvido.

Usei o ID jstable na tabela e apliquei esse código.

Código:

jQuery(function(){
jQuery("#jstable td").css('background','transparent');
});

jQuery(function(){
jQuery("#jstable tr:odd").css('background','#e9e9e9');
});

jQuery(function(){
jQuery("#jstable tr:even").css('background','#f2efef');
});