Foros despleglables 2.

Rapaig · #1 (**permalink**) 17/12/2008, 02:24

Hola a todos.

Llevo buscando una idea hace tiempo para esto, pero creo que hoy se me ha ocurrido. El punto es que no se com aplicarlo correctamente, ya que aún soy un usuario inicial en esto.

Lo que pasa es que tengo un foro que tiene categorías y en cada categorías los subforos, y el foro es tan grande, que cuesta encontrar la información.

Basándome en la idea del menú desplegable vertical con CSS, me gustaría hacer lo mismo para los foros.

El siguiente segmento de código corresponde a la siguiente captura, que representa una categoría con dos foros.

Código:

 <div class="forabg"> 
                          <div class="inner"><span class="corners-top"><span></span></span> 
                            <ul class="topiclist">
                              <li class="header"> 
                                <dl class="icon">
                                  <dd class="dterm"> 
                                    <div class="table-title"> 
                                      <h2>Relaciones Exteriores de la Confederación</h2>
                                    </div>
                                  </dd>
                                  <dd class="topics">Argumentos</dd>
                                  <dd class="posts">Mensajes</dd>
                                  <dd class="lastpost"><span>Últimos Mensajes</span></dd>
                                </dl>
                              </li>
                            </ul>

                            <ul class="topiclist forums">

                              <li class="row"> 
                                <dl class="icon" style="background-image: url(../hitskin.com/themes/11/31/75/i_folder_big.png); background-position: 10px 50%;">
                                  <dd class="dterm"> 
                                    <div style="display: block; margin : 0 0px 0 45px;"> 
                                      <h3 class="hierarchy"><a href="halo-embajada-f3/index.html" class="forumtitle">Halo 
                                        Embajada</a></h3>
                                      <br />
                                      <p></p>
                                      <table VALIGN="middle">
                                        <tr> 
                                          <td><a href="halo-embajada-f3/index.html"><img src="../img522.imageshack.us/img522/1926/cascohalocopy2vr7.png" border="0" alt="" /></a></td>
                                          <td><strong>Bienvenidos a la Alianza 
                                            Halo, si tienes algún pacto que proponernos, 
                                            indícalo aquí.</strong></td>
                                        <tr> 
                                      </table>
                                      <br />
                                      <strong></strong> </div>
                                  </dd>
                                  <dd class="topics">3 <dfn>Argumentos</dfn></dd>
                                  <dd class="posts">10 <dfn>Mensajes</dfn></dd>
                                  <dd class="lastpost"><span><a href="halo-embajada-f3/halo-t6.htm#14" title="Halo">Halo</a><br />
                                    Sáb Nov 22, 2008 8:45 pm<br />
                                    <strong><a href="login66b0.html?mode=viewprofile&amp;u=5" class="gensmall" rel="nofollow">Rapaig</a></strong><a href="halo-embajada-f3/halo-t6.htm#14" class="last-post-icon"><img src="../hitskin.com/themes/11/31/75/i_icon_latest_reply.gif" alt="Ver el último mensaje" title="Ver el último mensaje" /></a></span></dd>
                                </dl>
                              </li>
                              <li class="row"> 
                                <dl class="icon" style="background-image: url(../hitskin.com/themes/11/31/75/i_folder_big.png); background-position: 10px 50%;">
                                  <dd class="dterm"> 
                                    <div style="display: block; margin : 0 0px 0 45px;"> 
                                      <h3 class="hierarchy"><a href="embajada-de-la-republica-de-jedis-y-siths-ojs-f4/index.html" class="forumtitle">Embajada 
                                        de la República de Jedis y Siths (O.J.S)</a></h3>
                                      <br />
                                      <p></p>
                                      <table VALIGN="middle">
                                        <tr> 
                                          <td><a href="embajada-de-la-republica-de-jedis-y-siths-ojs-f4/index.html"><img src="../img88.imageshack.us/img88/6360/luke70bt7.png" border="0" alt="" /></a></td>
                                          <td><strong>Bienvenidos a la Alianza 
                                            O.J.S, si tienes algún Pacto o Sugerencia, 
                                            éste es el lugar a expresarlo.</strong></td>
                                        <tr> 
                                      </table>
                                      <br />
                                      <strong></strong> </div>
                                  </dd>
                                  <dd class="topics">0 <dfn>Argumentos</dfn></dd>
                                  <dd class="posts">0 <dfn>Mensajes</dfn></dd>
                                  <dd class="lastpost"></dd>
                                </dl>
                              </li>
                            </ul>
                            <span class="corners-bottom"><span></span></span></div>

El código CSS que estoy ocupando:

Código:

/*Foros desplegables*/

ul.topiclist forums
{
    list-style:none;
}


ul.topiclist forums, dd.dterm
{
   display:none;
   list-style:none;
} 

ul.topiclist li:hover > dl, dd 
{
   display:block;
}

Traté de aplicar el CSS, tal cual (y las variaciones que he hecho), me presenta lo siguiente.

Ahora lo que me gustaría es que mostrara, por lo menos el nombre de la categoría y luego al pasar por la categoría se desplegara todo el contenido de la categoría.

Que se viera en este caso : "Relaciones Exteriores de la Confederación"

Saludos
Iván

Rapaig · #2 (**permalink**) 17/12/2008, 09:35

He probado, mediante ensayo y error corregir el error.. y no he tenido resultados positivos, siempre lo mismo. Se termina ocultando todo...

Saludos
Iván

Triby · #3 (**permalink**) 17/12/2008, 16:44

Esto es mas o menos sencillo:

Estructura:

Código:

<script>
function show_hide( divToHide ) {
	var elem, vis;
	if( document.getElementById ) // this is the way the standards work
		elem = document.getElementById( divToHide );
	else if( document.all ) // this is the way old msie versions work
		elem = document.all[divToHide];
	else if( document.layers ) // this is the way nn4 works
		elem = document.layers[divToHide];
	vis = elem.style;
	if(vis.display == 'block') {
		vis.display = 'none';
	} else {
		vis.display = 'block';
	} 
}
</script>
<titulo de categoria 1><a href="javascript:show_hide('fcat1');">Ocultar</a>
<div id="fcat1" style="display:block;">
    Aqui todos los foros que pertenecen a la categoria
</div>

<titulo de categoria 2><a href="javascript:show_hide('fcat2');">Ocultar</a>
<div id="fcat2" style="display:block;">
    Aqui todos los foros que pertenecen a la categoria
</div>

Rapaig · #4 (**permalink**) 17/12/2008, 20:40

Hola Triby.

Gracias por responder, pero no puedo ocupar tu código, porque ello implica editar el código del foro. Y es lo que no puedo hacer, porque el foro ya viene hecho de cierta manera. Uno crea las categorías y foros en un pánel de administración.

Por ende no pueado agregar la línea:

Cita:

<a href="javascript:show_hide('fcat1');">Ocultar</a>

Porque no puedo editar el código fuente.

Las cosas que puedo hacer, es colocar un java o manipular el CSS.

Saludos
Iván

Triby · #5 (**permalink**) 18/12/2008, 13:15

Si el foro es PHPBB, vBulletin, Invision, PunBB, etc. y tienes acceso al codigo fuente, por supuesto que puedes modificarlo, a menos que no sepas PHP.

1- Respalda el archivo antes de modificarlo
2- Modifica libremente y ve si funciona
3- Si hay algun error, vuelve a colocar el archivo original

Rapaig · #6 (**permalink**) 18/12/2008, 18:38

Cita:

Iniciado por Triby

Si el foro es PHPBB, vBulletin, Invision, PunBB, etc. y tienes acceso al codigo fuente, por supuesto que puedes modificarlo, a menos que no sepas PHP.

1- Respalda el archivo antes de modificarlo
2- Modifica libremente y ve si funciona
3- Si hay algun error, vuelve a colocar el archivo original

Pues me pillas mal. Porque no se dónde puedo editar el código fuente del foro.

El servidor del foro, es www.foroactivo.com.

Y la página del foro que tengo es halo-ojs.activoforo.com

Saludos
Iván

Triby · #7 (**permalink**) 18/12/2008, 18:51

Ok, estando en un foro de hosting gratuito va a ser dificil que tengas acceso al codigo fuente, pero aun puedes modificar la plantilla header.tpl para agregar el scritp y forum_index.tpl (segun creo) para agregar el boton (preferiblemente) que oculte o muestre categorias.

Rapaig · #8 (**permalink**) 18/12/2008, 18:58

El script lo puedo agregar sin problemas. Pero lo único que puedo editar es la CSS. del foro. Por eso era que buscaba una alternativa de ocultar y mostrar los foros, mediante el método del menú de despliege vertical.

Saludos
Iván.

PD: esos archivos, solo los veo, cuando descargo el foro de internet y lo manejo en mi PC. Pero arriba no tengo como verlo.