JMiur [E]

Respondiendo a Chary Cirujano y otros visitantes que preguntan cosas parecidas, esta es una de las formas de modificar la numeración de los comentarios para que las "respuestas" anidadas se ven un poco distintas o se numeren de otro modo.

La primera opción es la más simple: hacer que el contador de respuestas tenga un estilo diferente, por ejemplo, un color o una fuente; para eso, agregaríamos esta regla:
.comments .comment-replies .comment-block:before {
  color: #08C;
  font-size: 20px;
}
dependiendo del orden en que tengamos las reglas, puede requerir el agregado de la palabra !important; por ejemplo:
color: #08C !important;
La segunda opción lo que hará es resetear el contador de respuestas de tal modo que los comentarios tendrán numeraciones distintas:
.comments .comment-replies {
  counter-reset: contadorcomentarios;
}
.comments .comment-replies .comment-block:before {
  color: #08C;
  font-size: 20px;
}
La tercera opción combina ambas cosas, acá se agrega un segundo contador y se muestran ambos:
.comments .comment-replies {
  counter-reset: contador_reply;
}
.comments .comment-replies .comment-block:before {
    color: #08C;
    font-size: 20px;
    content: counter(contadorcomentarios, decimal) " [" counter(contador_reply, decimal) "]";
    counter-increment: contador_reply;
}
En este último caso, lo que hacemos es armar la salida visible, uniendo los datos y cualquier otro carácter.

20 comentarios:

Marian  

Hola JMiur, como ya sabes mi plantilla es de las nuevas, pero he hecho varias modificaciones en los comentarios, como añadirle marcos, cambiar fuentes, colores, etc, y no me funcionan los comentarios anidados. Si restablezco plantillas de artilugios a los valores predeterminados supongo que perderé todas las modificaciones que hice en los comentarios y se verán como al principio, ¿no?
Por lo que veo es incompatible una cosa con la otra... ¿o no?
Saludos

Responder
Mia  

Hola,
Este no es el lugar correcto para esta consulta pero como es sobre el nuevo sistema de comentarios...
Mi problema es que a raiz del cambio la hora de los comentarios ha cambiado, en mi caso me pone que son 9 horas menos de las que son (me imagino que es el horario del pacífico pues yo estoy en España). He escrito un comentario en tu blog de "pruebas surtidas" y también pone la misma hora. ¿Hay alguna manera de corregir la hora o es un problema de Blogger? Gracias.
Me gusta mucho tu blog y es de agradecer toda la información que nos das, gracias por tu trabajo :)

Responder
Unknown  

Ya veo que estás probando con jQuery :)
A ver cuánto tardamos en verlo en este blog.

Responder
Adrián J. Messina  

Oh sí, me quedo con la segunda opción.! :D

Responder
JMiur  

Marian
Para que funcione el nuevo sistema, tal vez te falta el código correspondiente. Fíjate en esta entrada pero, el CSS deberá ser modificado porque el sistema es completamente distinto.

Mia
Nunca lo había notado y acabo d mirar. Es verdad,, la hora dice cualquier cosa así que imagino que no han tenido en cuenta los usos horarios pero, no tengo idea cómo corregir eso con facilidad; sin duda: es otro problema de Blogger

Responder
Anónimo  

JMiur, te queria hacer una consulta, como veras que desde hoy todos los comentarios antiguos, como los que tenemos vos, yo y muchos otros, se achicaron los avatares y se subieron los contadores de comentarios. Esto tiene algo que ver con la implementacion del nuevo sistema de Blogger es obvio, pero hasta el dia de hoy iva todo bien si vos no los activabas como explicas en entreadas anteriores, por eso me parecio raro y veo que a vos tmb te paso. Yo trate de toquetear los padding y margin de las distintas partes del comentario en si, como el body el header o el footer y nada, espero que sea una boludes y se te ocurra algo para arreglarlo ya que se ve horrible. Muchas gracias y saludos!

Responder
Chary Cirujano  

Ainssssssssssss!!! Eres un Sol, pero grandísimo ;)) Modificado esta ya.
Pero el contador total de comentarios, ya en la página, sigue sumando comentarios y respuestas. La verdad es que hace días que no he publicado nada y es posible que sea por eso ¿no? de todas maneras lo comprobaré entre hoy y mañana con una entrada nueva.
Por otro lado, tengo otra duda :S, ya sé que soy un poquito pesada, todo funciona bien salvo lo que te he comentado, y el diseño queda fantástico, pero el tema de modificar las listas que comentabas en la 1ª parte no tengo muy claro donde hay que hacerlo. La linea: div id="comments" class="comments" no me aparece ni en la plantilla ni en el código fuente ¿?
Gracias por todo, eres un profe genial ;) Besos

Responder
JMiur  

Chary:
¿En que entrada tienes un ejemplo de comentarios con respuestas? Así me fijo.
¿Qu é es lo que quieres modificar? Porque no hay nada que modificar en el HTML, sólo en el CSS.

Responder
JMiur  

PS3 Argento:
Sí, así es, no pasa en todos los blogs pero parece que se va extendiendo. Acabo de publicar una entrada explicando el problema y ahí hay una posible solución.

Responder
Anónimo  

Andubo perfecto, sos un capo! Gracias por ayudarnos! Saludos!!!

Responder
Mia  

Gracias, JMiur.
Esperemos que Blogger se de cuenta y lo cambie ;)

Responder
Chary Cirujano  

En la de "Déjame ser tu lienzo" además verás que el texto sale demasiado justo entre lineas. Anoche estuve haciendo pruebas y no consigo que salga normal.
No quiero modificar nada, solo colocar en el lugar correcto las cuatro lineas que comentas:

li id="bc_XXXXXX" class="comment" kind="b"
div class="avatar-image-container" ....... /div
div id="XXXXXX" class="comment-block" ....... /div
div id="bc_XXXXXX" class="comment-replies" ....... /div
<div id="bc_XXXXXX" class="comment-replybox-single" ....... /div
/li

Me estoy volviendo loca ;)
Besos

Responder
JMiur  

Me alegro que sirviera, PS3 Argento. Qué lio XD :D

Yo ya no creo en nada, Mia :D Es increíble que desarrolladores web hagan estas cosas.

Chary Cirujano
En esa entrada, no veo que haya problemas en el contador de respuestas ( captura )

En cuanto a la alineación vertical, podrías agregar esto:
.comments .comments-content { line-height: 1.2; }
con el valor que quieras; cuanto más alto sea, más separadas estarán las líneas: 1.3 1.4 etc

Ten en cuenta que Blogger ha vuelto a cambiar las cosas así que es probable que deban irse agregando más propiedades.

Responder
Chary Cirujano  

Ya te leído esta mañana :( Esto es de locos, empiezo a plantearme migrar a WP. Gracias profe eres un Sol ;) Voy a ello.
Besos

Responder
♥ Ana  

Hola JMiur
Me gustaría poder numerar los comentarios como los tienes tú, es decir, de manera sucesiva, sin distinguir los anidados de los otros pero no se si éstos trucos que pones aquí pueden hacerse con los comentarios anidados que puse sin el código de Blogger, antes de hacer nada en el blog, he preferido consultarlo contigo

Saludos

Responder
JMiur  

Lo que se muestra en esta entrada es, para los comentarios anidados de Blogger. Lo básico es lo que se muestra en esta entrada. Prueba y cualquier cosa me muestras tu ejemplo y me fijo.

Responder
wiLliam  

como puedo enumerar y encuadrar los comentarios como los tiene este blog porfaavor ayudame

JMiur  

Dependerá del sistema de comentarios que uses.

Responder
adm100388  

JMiur, tengo un nuevo problema, a ver si me puedes ayudar a saber por qué, porque hasta ahora no logro entenderlo, el problema es el siguiente: http://s2.subirimagenes.com/imagen/8734732dibujo.png

En la imagen se puede ver que el comentario numerado y anidado, está afuera, en realidad ése no es el problema, porque lo puedo alinear. El problema es que el primer comentario anidado respecto al resto de los anidados se encuentran dispuestos de forma diferente, es decir que, si modifico la posición, todos se van a mover la misma cantidad de px. Lo normal sería que todos aparezcan en la misma posición y de ahí sí los mueva a gusto, pero no entiendo por qué pasa esto, si es problema del primer comentario anidado o del resto. ¿Qué puede ser?

Dejo un extracto de donde lo estuve modificando:

.comment-thread ol
{
counter-reset: mbt-comments;
}

/*Número del comentario general*/
.comment-thread li:before
{
content: ""counter(mbt-comments) "";
counter-increment: mbt-comments;
font-size: 16px;
position: relative;
top: 88px;
font-weight: bold;
font-family: arial, georgia;
color: #C7C7C7;
left: -70px;
padding: 4px 8px;
}

.comment-thread ol ol
{
counter-reset: mbt-comments-sub;
padding-top: 20px!important;
margin-bottom: 25px;
}

/*Número del comentario anidado*/
.comment-thread li li:before
{
content: counter(mbt-comments) "." counter(mbt-comments-sub);
counter-increment: mbt-comments-sub;
font-size: 14px;
/*position: relative;
top: 75px;
left: -25px;*/
}

.comments .comments-content .comment-thread ol ol
{
padding: 0px 10px 40px 40px;
border: 1px solid #ddd;
box-shadow: 3px 4px 9px rgb(218, 218, 218);
margin-top: 10px;
}

.comments .comments-content .comment-thread ol ol li
{
margin-bottom: -40px;
}

No sé si llegue a aparecer todo el código tabulado, pero espero que se entienda. Falta otra parte que no la puse. Por lo menos me gustaría saber qué puede ser, porque hice toda clase de pruebas, float, margin, padding, clear, etc.

Gracias,

Responder
adm100388  

Solucionado, ignora mi mensaje anterior, JMiur.

¡Igualmente muchas gracias!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR