Volver al diseño de comentarios previo a las replies | Oloblogger Aquí vamos a ver dos cosas distintas. Una es anular el nuevo sistema de comentarios anidados con respuestas y la otra es una forma rápida d...

14 de enero de 2012

Volver al diseño de comentarios previo a las replies

Aquí vamos a ver dos cosas distintas. Una es anular el nuevo sistema de comentarios anidados con respuestas y la otra es una forma rápida de recuperar casi todo nuestro diseño anterior de comentarios manteniendo el nuevo sistema.

Llevo ya cuatro posts seguidos sobre el mismo tema, pero es que las preguntas se suceden y me cuesta menos redactar una entrada que contestar individualmente a cada uno. Además, si no lo hago así, todo lo que tengo visto se me olvida a mi también ;)

Siempre lo advierto cuando es así, pero es que las chapuzas que me evitan trabajar de más son mis favoritas y lo segundo que veremos es una de ellas. Así que ya va este aviso por delante.



Se supone que debería existir un opción en el escritorio para poder activar/desactivar los comentarios anidados y de hecho hay una nueva variable data que tiene toda la pinta de ser para ese fin: data:post.showThreadedComments. Pero de momento, o no sale en todos los blogs o a Blogger se le ha olvidado incluirla en dicho escritorio.

Por lo tanto para poder modificar eso ahora, no nos queda otro remedio que ir a la plantilla. Pero tranquilos, que dejar las cosas como estaban es sencillo.

Blogger gestionaba los comentarios tradicionales con una rutina llamada comments y lo que ha hecho ahora, ha sido introducir una nueva llamada threaded_comments para los nuevos. Ambas están ahora mismo en todas las plantillas y el que se vean o no, simplemente es cosa de un trozo de código que llama a una u otra.

En Insertar respuestas (replies) Blogger en plantillas modificadas precisamente explicamos el mecanismo inverso, que era habilitar los comentarios anidados. Pues para desactivarlos tenemos que hacer justo lo contrario. Dónde veamos un...

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

...sustituimos por un simple...

<b:include data="post" name="comments"/>

Con eso volveréis a tener los comentarios "normales". Cuando algún día incluyan la opción para quitar o poner los nuevos, mi recomendación es que se restituya el código original.



Y ahora el apaño que al menos a mí me ha dado resultado.

Podemos personalizar los nuevos comentarios con el CSS que incorpora ahora la plantilla, pero si tenéis prisa o no os aclaráis mucho con el CSS o con la maraña de clases y subclases, podéis hacer una sencilla conversión.

El resultado no será exactamente el mismo pero se aproximará bastante y no corremos peligro de cargarnos nada, ya que lo haremos todo desde la parte de estilo.

Partimos de la base de que teníais personalizados los comentarios clásicos. Para eso, necesariamente había una parte en la que a #comments-block, .comment-author y todas estas clases que se usaban anteriormente le teníais asignadas propiedades; las que venían de serie más vuestras propias modificaciones.

Pues bien, ahora lo que podéis hacer es añadir a la clase antigua la equivalente de entre las nuevas clases. Aquí es dónde el truco no funciona al 100% porque no todas tienen un equivalente exacto, pero haciendo esto podéis comprobar que si no igual, todo quedará casi igual que antes rápidamente. Luego es cuestión de terminar de ajustar si es necesario, pero en la mayoría de casos pienso que no lo será.

Para que varias clases tengan el mismo estilo sólo hay que ponerlas separadas por una coma. Así, cuando veamos un...

.claseantigua { propiedades }

...sólo tendremos que añadir una coma, un espacio y la clase nueva para que la cosa funcione:

.claseantigua, .clasenueva { propiedades }


Y estas son las equivalencias que yo he encontrado, figurando en la primera línea la clase antigua. Vosotros sólo tenéis que añadir las líneas sucesivas y dejar las propiedades tal y cómo estén.

.comment-form,
.comments .comments-replybox,
.comments .comment-replybox-single,
.comments .comment-replybox-thread { propiedades }

#comments h4,
.comments h4 { propiedades }

#comments-block,
.comments-content { propiedades }

.comment-author,
.comments .comments-content .user { propiedades }

.comment-body,
.comment-thread li { propiedades }

.comment-timestamp,
.comments .comments-content .datetime { propiedades }

Las clases para los avatares y para el pie del bloque de comentarios continúan con la misma denominación.

Si queréis dar un estilo distinto a las respuestas con respecto a los comentarios principales, para las replies podéis incorporar la clase .comment-thread li li con las propiedades que queráis. Por si acaso, el doble li no es un error ;)

Suerte.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

26 comentarios :

  1. Excelente Oloman, yo por mi parte soy de los que quiero poner los comentarios anidados en mi plantillas, pero no he podido, me parece que hay algún conflicto de scripts pero no lo sé aún, ya que es de una plantilla adaptada.
    Saludos.
    Gabriela

    ResponderEliminar
    Respuestas
    1. Sólo hay un conflicto que haya podido comprobar hasta el momento y es con la librería scriptaculous. Todo funcionará bien, pero el enlace Responder no reaccionará cuando se le haga clic. El resultado es que tendrás el sistema pero no se podrán anidar los comentarios.

      Puedes probar y una vez que veas que el aspecto es el nuevo, anula momentáneamente scriptaculous para definitivamente comprobar que todo funciona.

      Finalmente, decide entre si dejar o no la librería mientras no se encuentra una solución... si la hay. Esto último ya es cosa particular tuya.

      Eliminar
    2. Si tienes algún gadget de twitter quítalo. A mi me funcionó. :)

      Eliminar
  2. A mí el truco de Vagabundia para poder usar el Scriptaculous me funcionó... en los comentarios, pero me hizo modificaciones en otras cosas así que lo quité. De cualquier manera, funcionar, funciona.

    No he logrado hacer estos cambios que propones, Oloman, no sé en qué me estoy equivocando.

    La verdad, tengo tantas modificaciones en mis comentarios que me da mucha pena perderlas. Por ejemplo: la firma en mis comentarios, diferentes colores para pares e impares, el texto y una imagen que tenía en la caja de comentarios, comentar con el formulario antiguo, uso cufon para los nombres de usuario y otros detalles, la numeración (aunque sé que eso seguro lo enseñarás pronto porque tú lo solucionaste ya).

    Por ahora me quedo como estoy, no tengo tantos comentaristas que me valga la pena tanta pérdida :P Diferente es un caso como el tuyo en el que lo veo realmente práctico.

    Saludos y muchas gracias por el esfuerzo!!!

    ResponderEliminar
    Respuestas
    1. No todas las cosas son útiles para todos y siempre digo que hay que sopesar las ventajas e inconvenientes que reportan a cada uno para decidir. De nada :)

      Eliminar
  3. Parece que voy consiguiendo algo. Al menos se parece más a lo que tenía antes; pero sí, digamos que lo que se consigue es una opción intermedia entre lo que teníamos antes y lo que blogger "coloca" por defecto.

    Lo único que veo extraño es la hora de los comentarios. ¿Alguna idea de por qué salen con otra zona horaria en vez de la del resto del blog? ¿Hay alguna forma de arreglarlo o de quitarlo?

    Gracias :)

    ResponderEliminar
    Respuestas
    1. Creo que de momento no. En teoría deberían poderse configurar desde el Escritorio, pues hay una opción específica para ello. Pero lo cierto es que no responde a lo que se le indica y tiene pinta de que se olvidaran de ese "detalle" en la actualización.
      Mi opción ha sido ocultarlos:
      .comments .comments-content .datetime {display:none;}

      Eliminar
  4. Gracias a uno de tus posts he conseguido poner los comentarios anidados pero este post no lo entiendo y no puedo aplicarlo, no sé si las clases nuevas las tengo que añadir en la parte css
    Muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Esto es sólo para los que anteriormente tuvieran personalizados los comentarios y quieran conservar aquel estilo que consiguieron. Realmente es un apaño para hacerlo rápidamente de momento, aunque luego deberán usar las clases que publiqué en el anterior post para hacer un ajuste "fino". Si no tenías personalizado nada anteriormente, ahora tampoco tienes que hacer nada.

      Eliminar
    2. Si están personalizados los comentarios (mientras trasteaba puse una plantilla normal), pero ya ví el problema e intento solucionarlo poco a poco.
      Me aperecen con el formato de las quotes por lo que con un poco de suerte, creo que lo puedo dejar más o menos como estabas
      Gracias por tu trabajo, me está sirviendo de mucho!

      Eliminar
    3. ¿Con comillas? Supongo que las creaste configurando BLOCKQUOTE. Si es así, ponle delante .post-body

      Quedaría así en la parte CSS:
      .post-body blockquote {propiedades}

      De esa manera ne se te mostrarán en los comentarios.

      Eliminar
  5. Hola olo,

    ¿cuál es la nueva clase para #comments-block .avatar-image-container.avatar-stock?

    Gracias como siempre ^^

    ResponderEliminar
    Respuestas
    1. Creo que no hay. En vez de eso blogger rellena con una imagen desde esta url: "http://img1.blogblog.com/img/blank.gif".
      Así que lo único que tienes que hacer es sustituir la anterior clase por: ".comment .avatar-image-container img[src="http://img1.blogblog.com/img/blank.gif"]".

      No se si esto es válido para todos, pero debería.

      Eliminar
    2. Muchas gracias Emilio, era justo lo que necesitaba saber.

      Un abrazo ^^

      Eliminar
    3. Aunque creo que va a funcionar igual, exactamente es .comments .avatar-image-container, con una "s" final en "comment". Más info. Por cierto, me encanta cuando entre vosotros solucionais las cosas :)

      Eliminar
  6. hola yo queria saber como puedo hacer para que aparezca de nuevo la tabla de emoticones que tenia. Con el nuevo sistema, aparece si nadie comenta, ya al comentar desaparece y las caritas tambien. Sabrias que hacer?

    ResponderEliminar
    Respuestas
    1. Pues nunca he visto ese código pero creo que lo podrás arreglar si simplemente lo desplazas de sitio. La llamada al script, no el código JavaScript. Este último lo dejas dónde está (supongo que antes de /head) y la llamada es la que tienes que mover dónde termina el código de los comentarios.

      El problema es que ahora el formulario de comentarios va cambiando de sitio según si es respuesta o nuevo comentario ¿dónde ponemos los emoticonos ahora?

      Eliminar
  7. Oloman, no sé si ya te lo preguntaron, pero una vez habilitado los comentarios anidados al entrar al post te lleva directamente al último comentario publicado.
    ¿conocés alguna forma de evitar eso?
    Gracias por tu ayuda!

    ResponderEliminar
    Respuestas
    1. Alguien me lo ha dicho, pero yo no aprecio eso en ningún sitio. No sé si serán problemas "locales" de la configuración del navegador.

      Eliminar
    2. Es rarísimo porque incluso, me pasa aquí en tu blog. le doy un clic al título de esta entrada y me trae directamente a este ultimo comentario en lugar de quedarse arriba para leer la nota

      Eliminar
    3. Desde luego extraño ¿qué navegador usas?

      Eliminar
    4. Pues es cosa de ese navegador, porque con la versión 8.0 sí que me pasa. Hmmmm.... Mal rollito.

      Eliminar
  8. Me vino muy util amigo, gracias :D

    ResponderEliminar
  9. Me crea error cuando realizado el primer cambio que propones y me salen los textos de los comentarios enormes, y no sale quien es el autora de dichos comentarios. No se porque podra ser, necesito ayuda :s Hay alguna opcion para solo quitar el boton responder de los comentarios ?? con eso me valdria de sobra ??

    ResponderEliminar
    Respuestas
    1. Hola Maiki. Que te de error es incompatible con que te salgan los textos enormes. Cuando ocurre lo primero (error) no se cambia nada, así que si te salen grandes es porque si te aceptó el cambio. No veo claro qué te ocurre.

      De todas formas, si con eliminar el botón de responder tienes bastante, añade esto al CSS de tu plantilla:
      .comment-actions {
      display: none !important;
      }

      Eliminar