Descripción: Este MOD nos servirá para colorear las celdas del foro al pasar el cursor por encima.

Requisitos Previos: Para el funcionamiento de este MOD necesitaremos haber instalado en nuestro foro la librería jQuery. Para ello, bastará con dirigirnos a su página oficial. De ahí, descargaremos el código (preferentemente la versión "min", la "production"), lo alojaremos en nuestro espacio web y lo pondremos al principio de nuestra cabecera HTML del foro. Para ello emplearemos el siguiente código:

<script type="text/javascript" src="FICHERO"></script>

Cambiando, obviamente, FICHERO por la dirección del archivo de jquery.

Instalación: El código consta de tres partes. Dos de ellas son javascript y una tercera será la parte de CSS.

La primera parte constará de la función javascript para el coloreado:

function color(el,tt){
     if($(el).hasClass('tabla_texto_3')==true){
         $(el).removeClass(); $(el).addClass('tabla_texto_'+tt);
     }else{
         $(el).removeClass(); $(el).addClass('tabla_texto_3');
     }
 }

La segunda parte es la encargada de añadir los eventos para que se produzca dicho cambio de color.

$(document).ready(function(){
     $('tr.tabla_texto_1').hover(
      function(){ color(this,1); },
      function(){ color(this,1); }
      );

     $('tr.tabla_texto_2').hover(
      function(){ color(this,2); },
      function(){ color(this,2); }
  );

}

Si no disponemos de conocimientos, lo mejor será NO editar estas dos partes y ponerlas seguidas (en ese orden) entre las etiquetas:

<script type="text/javascript"> y </script>

(El código iría donde ahora está la y)

La tercera y última parte será la que deberemos personalizar nosotros. Exactamente se trata de la parte CSS que contendrá los colores, estilos, fuentes, etcétera, que tendrá la tabla cuando sea seleccionada. La CLASS que deberemos editar es tabla_texto_3. Un ejemplo sería:

<style type="text/css">
.tabla_texto_3{
 font-family: verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 background: #F6F5F0;
 color: #000000;
 border-top: 1px solid #FBFAF6;
 border-left: 1px solid #FBFAF6;
 border-right: 1px solid #E5E4DB;
 border-bottom: 1px solid #E5E4DB;
}

.tabla_texto_3 a, .tabla_texto_3 a:visited, .tabla_texto_3 a:hover{
 text-decoration:none;
 color: #707E33;
}
 </style>

Podemos observar que, en este ejemplo, estamos modificando los bordes, el color de fondo y de letra de la celda; así como el de sus enlaces. Las posibilidades son tan abiertas como las que nos permitan nuestros conocimientos sobre CSS.

Los códigos del MOD pueden ser pegados donde se desee, siempre y cuando estén por debajo del fichero jQuery. Se recomienda, para una carga más rápida, agrupar siempre los códigos javascript en un único fichero y alojarlo en el espacio web. Lo mismo para todos los estilos CSS.

Ejemplo: Podéis ver un ejemplo de este MOD en el índice del foro de los MODs al poner el cursor en algún subforo.