Categorias y subcategorias.

[David_dfd]

Saludos a todos he buscado en el foro y no localizo la solucion.

Tengo las categorias de la siguiente forma

Principal 1
- Subcategoria 1
- Subcategoria 2

Principal 2

Principal 3
- Subcategoria 3
- Subcategoria 4

El tema es que en la plantilla no aparecen asi, en forma de ¿Arbol?, y me gustaria saber como puedo hacerlo para que aparescan de esa forma.

Gracias

[metacortex]

La estructura HTML existe por defecto (listas dentro de listas). Lo que resta es que le definas los estilos mediante CSS.

Debes mirar el código fuente para enterarte de las clases asignadas a las listas generadas. De esa forma podrás asignarles estilos. Fíjate en este ejemplo en el cual elaboré el mapa del sitio sólo con list_categories. El grueso del trabajo correspondió a la parte del CSS.

[David_dfd]

Muchas gracias por tu respuesta.

Mi themes crea la lista de la siguiente forma:

Código PHP:

  <div class="SR">
 <div class="SRL">
 <div class="Categories">
   <h2><strong>Categories</strong></h2>
   <ul>
        <li class="cat-item cat-item-1"><a href="" title="">Principal 1</a></li>
    <li class="cat-item cat-item-14"><a href="" title="">Principal 2</a>
 
<ul class='children'>
    <li class="cat-item cat-item-25"><a href="">Sub 1</a></li>
    <li class="cat-item cat-item-6"><a href="">Sub 2</a></li>
</ul>
        <li class="cat-item cat-item-X"><a href="" title="">Principal 3</a></li>
   </ul>
   </div> 
   

El codigo que usa en el css para dar forma es este:

Código PHP:

  /* Right Column */
.SR { float: right; width: 369px; margin-left: 21px; padding-bottom: 4px; background: #eaf4ff url(./images/SRBkg.gif) no-repeat left bottom;}
.SR h2 { font-size: 14px; letter-spacing: -1px; padding: 5px 0px; margin: 0px; border-bottom: solid 1px #d4e3f4; color:#323740;}
.SR ul { padding: 0px; margin: 0px;}
.SR li { padding: 0px; margin: 0px; list-style-type: none;}
.SR li a { padding: 2px 0px 3px 8px; color: #003366; text-decoration: none; border-bottom: solid 1px #d4e3f4; background: url(images/CategIco.png) no-repeat left top; width: 152px; display: block;}  
.SR li a:visited { color: #003366; text-decoration: none; border-bottom: solid 1px #d4e3f4;} 
.SR li a:hover { text-decoration: underline; color: #000033; border-bottom: solid 1px #d4e3f4;} 
 
/* Right - First Column */
.SR .SRL { float: left; width: 160px; padding: 15px 0px 15px 15px; margin-right: 11px; background:  url(./images/SRLBkg.gif) no-repeat left top;}
 
/* Right - Second Column */
.SR .SRR { float: right; width: 170px; padding: 15px 10px 15px 0px; background: url(./images/SRRBkg.gif) no-repeat right top;}
 
 
.Categories { margin-bottom: 20px;}
.Links { margin-bottom: 20px;}
.Archives { margin-bottom: 20px;}
.Meta {}
.Calendar {}
.Calendar caption { background: #d4e3f4; padding: 5px 0px;}
.Calendar table { width: 170px; border: solid 1px #d4e3f4;}
.Calendar table th { text-align: center; letter-spacing: -1px; border-bottom: solid 1px #d4e3f4; padding: 3px 0px;}
.Calendar table td { text-align: center; padding: 3px 0px; font-size: 11px;} 
   

Segun creo entender deberia añadir algo como:

Código PHP:

  ul ul.children {
    padding-left: 0;
    padding-right: 4px;
} 
   

Pero no se cual es el codigo añadir para que los ul con la etiqueta "children" tengan la funcion "padding-right: 4px;".

¿Me podeis ayudar? Muchas gracias

[metacortex]

Muy bien, pero veo que estás fijando la izquierda en cero (que es lo que necesitas). Recuerda que <ul> es un contenedor en sí, por lo cual puedes aplicar el margen sin problemas:

Código css:

ul.children {
  margin-left: 20px;
}
 

Creo que en el foro de CSS podrán ayudarte mejor. Movido desde Wordpress.

[David_dfd]

Muchas gracias, justo funciono.

Gracias de nuevo por tu ayuda.