Poner los Temas y Vistos de lista de subforos en cajitas

Bueno...yo.

Seguí el tuto de modificar la lista de los foros y hay alguna cosita donde fallo y la he liado. Mi idea es poner los Vistos y temas en cajitas rollo así:



Pero en algo fallo porque me queda anormal. He conseguido desacoplarlo pero si le doy formato "cuadro" a las cajitas (el div de posts y de views) se me amontonan. Además de la nada me aparece un VISTOS que no se de donde sale XD



En el CSS tengo esto referente a los foros de este template:

Código:

/* Listado de Temas */

/* Columna 2 */
.coso2 {
    height: 45px;
    padding: 10px;
    width: 350px;
    border: 1px solid #000;
}

.coso2 a.topictitle {
    font-family: montserrat;
    font-size: 15px;
    display: block;
}

/* Columna 3 */
.coso3 {
    width: 100px;
    height: 35px;
   padding: 20px;
  border:2px solid #000000;

}
/* Columna 4 */
.coso4 {
    height: 35px;
    padding: 20px;
    width: 260px;
    border: 1px solid #000;
}

.coso4 .lastpost {
    width: 200px;
    font-size: 10px;
}

.posts , .views  {
   font-size:13px;
  display: block-inline;
 background-color: #000000;
  color: #ffffff;
}

Y en el template esto:

Código:

<!-- END table_sticky -->

 <li class="row {topics_list_box.row.ROW_ALT_CLASS}"<!-- BEGIN line_sticky --> style="margin-top:5px;"<!-- END line_sticky --> >
 <dl class="icon" style="background-image:url('{topics_list_box.row.TOPIC_FOLDER_IMG}');">
 <dd class="dterm" title="{topicrow.TOPIC_FOLDER_IMG_ALT}" {topics_list_box.row.ICON}>
 

<table><tbody><tr>
<td><div class="coso1">
                                        {topics_list_box.row.NEWEST_POST_IMG}
 {topics_list_box.row.PARTICIPATE_POST_IMG}
 {topics_list_box.row.TOPIC_TYPE}</div></td>
<td><div class="coso2">
<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
    <span class="span-tab">{topics_list_box.row.L_BY} <strong>{topics_list_box.row.TOPIC_AUTHOR}</strong></span></div></td>
<td><div class="coso3">
<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree --><br />
<div class="posts">{topics_list_box.row.REPLIES} Respuestas</div> <div class="views">{topics_list_box.row.VIEWS} Vistas</div><br /></div></td>
<td><div class="coso4">
<dd class="lastpost">
<span>{topics_list_box.row.LAST_POST_AUTHOR}&nbsp;<dfn>{L_LASTPOST}</dfn>
{topics_list_box.row.LAST_POST_IMG}<br style="clear:left;" />{topics_list_box.row.LAST_POST_TIME}</span>
</dd></div></td>
</tr></tbody></table>


<!-- BEGIN single_selection -->

En fin...gracias de antemano!

EDITO: También me pasa que al quitar la barra esa de busqueda el texto me sale debajo del botón de Nuevo tema:



¿Como puedo arreglarlo? Gracias de antemano!

Bueno Bella, para empezar creo que te hicieron falta más elementos en tu CSS para editar esta parte, por eso no te sale como quieres (como la imagen que dejaste).

Primero tienes que ver en el HTML los elementos que necesitas para el resultado que quieres, tu pusiste un div contenedor coso3 y dentro vienen 3 elementos: el listado de paginas, y 2 divs uno para posts y otro para views (Por cierto el br sale sobrando aquí, al usar divs puedes poner espacio debajo con margin).

Código:

<td><div class="coso3">

<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE_NEW}<!-- END nav_tree --><br />
<div class="posts">{topics_list_box.row.REPLIES} Respuestas</div>
<div class="views">{topics_list_box.row.VIEWS} Vistas</div>

</div></td>

Entonces viendo el HTML, puedes darte cuenta que tienes 3 bloques dentro de un div, por lo que te saldran uno encima del otro (sin editar el CSS). En la imagen que dejaste, el listado de paginas salia junto al titulo del tema y autor, asi que te recomendaría quitarlo o bien agregarlo en otra columna de la tabla (que este solito).

En el CSS vi que tenias esto:

Código:


/* Columna 3 */
.coso3 {
    width: 100px;
    height: 35px;
   padding: 20px;
  border:2px solid #000000;

}

.posts , .views  {
   font-size:13px;
  display: block-inline;
  background-color: #000000;
  color: #ffffff;
}


Si te fijas le pusiste un width de 100 al div contenedor, y una altura de 35, pero no editaste medidas para el posts y el views; te recomiendo ponerle medidas a cada uno. También, si quieres que el texto de "respuestas" o "vistas" sea diferente al de los numeros, debes colocarle un span personalizado para que sean tamaños de letra diferentes, etc. Otra cosita que note: colocaste display: block-inline; ese valor no existe, es inline-block.

Entonces tu HTML (para esa parte) debería quedarte así:

Código:

<div class="coso3">

<div class="posts">{topics_list_box.row.REPLIES} <span>Respuestas</span></div>
<div class="views">{topics_list_box.row.VIEWS} <span>Vistas</span></div>

</div>

Y tu CSS:

Código:

/* Columna 3 */
.coso3 {
  width: 144px;
  padding:4px;
  border:2px solid #000000;
}

.coso3 .posts, .coso3 .views  {
  width:50px;
  height:50px;
  padding:10px;
  font-size:17px;
  display: inline-block;  
  background-color: #000000;
  color: #ffffff;
}

.coso3 .posts span, .coso3 .views span {
  font-family: arial;
  font-size:8px;
  display:block;
}

Muchas gracias por tomarte el tiempo de ayudarme XD Lo cierto es que tienes razón referente a lo de meter tanta cosa. Ni se me habia pasado por la cabeza anda que menuda burrada la mia. Con razón XD lo del display... mira que me lio, siempre les cambio el orden, cachis....XD Generalmente cuando no me va uno pruebo a cambiar el orden. En este caso igual no vi nada porque estaba todo amontonado o igual ensé que lo habia probado y nop.

Ya está casi solucionado. Me falta una cosilla mas. Me sigue saliendo la palabra VISTOS duplicada:



Realmente si entras al foro ni se ve porque la letra es banca pero claro... quisiera saber como solventar eso y que no quede la palabra suelta por ahí. he puesto a buscar Views en el template ya que el Inspeccionador de elementos me dirige a un dd term de Views pero me salen varias cosas y no se si deba tocar alguna.

Y esta me ha salido ahora nueva pero como es de la misma zona aprobecho y te la pregunto por aquí porque esto fijo es una gilipuertez como un pino. Como ves la linea de enlaces está debajo del botón de Nuevo tema. Quité el search box y se me puso así. No logro devolverla a su estado natural XD



Gracias ^^

Hola Bella, me alegro que te sirviera, y bueno mi recomendacion es que le cambies el nombre de .views a otra cosa nose .vistas o algo así, probar con eso y si no pues no sé que pueda generar ese error.

¡Gracias! Descubrí que tenia que añadir unos codigos en display none :P