¿Y que pasa si quito todo el CSS de los nuevos comentarios?

No es que lo recomiende pero, sin duda, si quiero personalizar esa parte del blog, prefiero empezar desde cero antes que tratar de modificar las propiedades existentes ya que los desarrolladores de Google suelen ser poco eficientes a la hora de simplificar códigos y no me gusta andar emparchando cosas.

En estos casos, siempre hago lo mismo, olvidarme de lo que está y verlo al desnudo, sin propiedades, quitando márgenes, flotaciones, paddings, bordes y cualquier otra detalle para poder tener una idea básica de cómo están armadas la etiquetas que no son otra cosa que rectangulitos a los que luego podré manipular (o no).

Como no soy suicida, lo haré en un blog auxiliar.

Ni siquiera debo borrar cosas, busco:
<b:include name='threaded_comment_css'/>
y "lo comento" para que no se ejecute:
<!-- <b:include name='threaded_comment_css'/> -->
Tendré entonces los comentarios anidados sin detalles gráficos más allá de los definidos genéricamente en la plantilla y tal como los mostraría el navegador por defecto [ ver captura ]

Si miro el código fuente, los comentarios, incluyendo el formulario, están en un rectángulo cuyos atributos ID y class tienen el mismo nombre, se llaman comments. Arriba, una etiqueta H4 muestra el texto con la cantidad de comentarios y debajo, otro DIV con la clase comments-content sirve de contenedor genérico que, a su vez, tiene otro DIV interno llamado comment-holder y otro DIV más y otro y otro ... y recién luego está la etiqueta OL con el contenido de cada comentario en etiquetas LI:
<div id="comments" class="comments">
  <h4> XX comentarios: </h4>
  <div class="comments-content">
    <div class="comment-holder">
      <div id="bc_XXXXXX" kind="c">
        <div id="bc_XXXXXX">
           <div id="bc_XXXXXX" class="comment-thread" u="0" t="0" kind="r">
             <ol id="bc_XXXXXX">
                <li id="bc_XXXXXX" class="comment" kind="b"> ............ </li>
                ..................
                <li id="bc_XXXXXX" class="comment" kind="b"> ............ </li>
             </ol>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
Comienzo entonces, borrando todo el contenido del CSS que es lo que está en:
<b:includable id='threaded_comment_css'>
  <style>
    ....... borro todo .......
  </style>
</b:includable>
y allí, entre <style> y </style>, es donde agregaré las reglas de estilo que vaya definiendo.

Lo primero que haré será colocar las del contenedor general; si no se tiene idea del espacio real que ocupa ese rectángulo, puede ponerse un color de fondo aunque sea provisorio y si quiero establecer las propiedades del título, las colocaré en #comments h4 {} que suele estar definido en otra parte de la plantilla; en este ejemplo, las ignoraré:
.comments {
  clear: both;
  margin: 0;
  padding: 0;
}
Como voy a numerarlos, definiré el contador:
.comments .comments-content {
    counter-reset: contadorcomentarios;
    overflow: hidden;
    position: relative;
    width: 100%;
}
Todos esos DIVs internos no me sirven de nada así que estableceré las reglas de la lista OL LI, separando verticalmente estas últimas porque les quiero poner un color de fondo que permute (los impares tendrán un color y los pares otro):
.comments .comments-content .comment-thread ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.comments .comments-content .comment {
background-color: #F0F0F8;
  border-bottom: 1px solid #CCE;
  border-top: 1px solid #CCE;
  margin: 5px 0;
  padding: 10px;
}
.comments .comments-content .comment:nth-child(2n+1) {
  background-color: #E8E8F0;
}
Hasta acá, tendré algo como lo que muestra esta imagen.

Y ahora voy a tener que meterme en el contenido de cada etiqueta LI que también es bastante engorroso pero, allá vamos; tiene cuatro grandes secciones:
<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>
La imagen del comentarista a la izquierda; defiimos su tamaño máximo, bordes y detalles decorativos varios:
.comments .avatar-image-container {
  background-color: #FFF;
  border: 1px solid #88B;
  float: left;
  height: 45px;
  line-height: 45px;
  overflow: hidden;
  padding: 1px;
  text-align: center;
  width: 45px;
}
.comments .avatar-image-container img {
  max-height: 45px;
  /* eventualmente, usar max-width: 45px; */
}
El DIV inferior con la numeracion:
.comments .comment-block {
  position: relative;
}
.comments .comment-block:before {
  color: #00BFFF;
  content: counter(contadorcomentarios, decimal);
  counter-increment: contadorcomentarios;
  font-family: Helvetica;
  font-size: 30px;
  position: absolute;
  right: 0;
  top: 0;
}
El DIV comment-block inferior contiene tres partes; en comment-header está el nombre del comentarista y a fecha:
.comments .comment-header {
  height: 50px;
}
.comments .comments-content .user {
  padding: 10px 0 0 10px;
}
.comments .comments-content .user, .comments .comments-content .user a {
  color: #00BFFF;
  font-family: Tahoma;
  font-size: 18px;
  font-style: normal;
}
.comments .comments-content .datetime {
  color: #666;
  display: block;
  font-family: Arial;
  font-size: 11px;
  padding: 2px 0 0 60px;
}
Esa parte también incluye una etiqueta que, por ahora, no parece tener ningún uso:
<span class="icon user blog-author"></span>
Ya va tomando forma [ ver captrura ] pero sigo ,mañana

56 comentarios:

Adrián J. Messina  

Wow!!!!!!! Estoy sorprendido!!! El sistema de respuestas está excelente, es tremendamente vistoso. Estoy armando una plantilla nueva, seguro que implementaré este sistema. Seguire leyendo el tema.

Abrazo maestro.

Maiker  

yes

Responder
Papito Macho Montador  

Hola,ahora si que la he liado!!

Mira el espacio que hay entre el formulario de entrada de comentarios y el final del blog (he cogido unas entradas al azar)

http://descargaloquequieres.blogspot.com/2011/10/descargar-aguila-roja-4-temporada.html
http://descargaloquequieres.blogspot.com/2011/10/descargar-cuentame-como-paso-13.html
http://descargaloquequieres.blogspot.com/2011/12/descargar-inmortals-espanol-megaupload.html

Lo raro es que no pasa en todas las entradas, sino en algunas porque sino mira estas otras

http://descargaloquequieres.blogspot.com/2011/10/descargar-killing-1-temporada-espanol.html
http://descargaloquequieres.blogspot.com/2011/12/descargar-inmortals-espanol-megaupload.html

ayuda con esto por favor

Responder
JMiur  

Sólo hay que probar y ver que sale :-)

Responder
Unknown  

Papito Macho Montador NOD32 ha bloqueado tu blog, yo no puedo entrar: http://k02.kn3.net/28B2A2FA1.png

JMiur muy buenos todos estos cambios, lastima que en mi blog tengo Disqus desde hace unos años. :P

Responder
Anónimo  

JMiur, necesito tu ayuda, he notado que blogger ha cambiado y no sé como eliminar un blog, es urgente.

Responder
JMiur  

Papito Macho Montador:
Eso ocurre proque al atributo height del IFRAME del formualrio le has colocado una altura de 2150.

Brian Armendia:
No sé a qué cambios te refieres. Si quieres elimianr un blog, simplemente debes ir a Configuración y borrarlo.

Responder
Papito Macho Montador  

Dios!!!! eres el amo, muchas gracias

Responder
Anónimo  

Gracias me sirvio de mucho al fin logre colocar tal cual esta en tu blog...ahora vere si le pongo los emoticones

Responder
Chary Cirujano  

Genial ambos post. He hecho los cambios y ha quedado estupendo. Pero tengo algún problemilla :S funciona el contador, pero no los decimales y las respuestas las numera como comentarios. Evidentemente algo tengo mal, pero lo he revisado un montón de veces y no doy con ello ¡SOS!
Gracias por adelantado ;)

Responder
JMiur  

No estoy seguro si te refieres a que los comentarios se muestran de manera correlativa, sean estos respuestas o no. Si es así, no hay error, funciona de esa manera. Las respuestas también son comentarios. Si miras el demo, verás lo mismo.

Responder
Chary Cirujano  

Si, era eso ;) ¿No hay manera de que las respuestas lleven el mismo número del comentario pero con una letra o similar?
Gracias

Responder
JMiur  

Hay varias alternativas, Charly. Prometo publicar una entrada hoy mismo así te las muestro.

Responder
Chary Cirujano  

Gracias :))

Responder
Anónimo  

Nada aun no se por donde empezar para tener nuevamente este diseño de los coemntarios anidados, bueno sera de segir tocando los CSS, garcias por los tutos si logre colocar los emoticones.

Responder
Alicia Vivancos  

Hola JMiur, tengo un problema con las fechas de los comentarios, intenté poner las fechas relativas pero solamente funcionan en los post, decidí dejar la fecha normal y no solo no puedo cambiar el formato de fecha sino que me sale la hora mal.

Tengo puesta correctamente la zona horaria con este formato:
viernes, 17 febrero, 2012
hago un comentario a las 17;04 y en el comentario sale esto

Feb 17, 2012 08:04 AM

Responder
JMiur  

¿En que blog ves ese problema? En http://eltemplodeartemisa.blogspot.com/ veo que está implementado en los comentarios.

Si se trata de los nuevos comentarios anidados, allí, la fecha que manda Blogger es errónea siempre porque parece que no han contemplado ese detalle y continúa errado y en inglés.

Responder
Alicia Vivancos  

no, en ese lo tengo puesto desde hace tiempo y funciona perfecto. Es en una nueva plantilla que estoy modificando y al llegar a la parte de los comentarios, me he dado cuenta de ese error.

Bueno, esperemos que los de blogger le den solución, gracias por responder.

Saludos.

Responder
JMiur  

Si es una plantlla nueva y usa los comentarios anidados, entonces no hay mucho que hacer porque es Blogger quien la muestra con ese formato.

Responder
Alicia Vivancos  

Siempre que hago una nueva plantilla, empiezo a remodelar la minima de blogger, partiendo con esa plantilla le doy luego el diseño que quiero, al principio tenia que ponerle los avatares a los comentarios porque no aparecian, después aun usando esa plantilla empezaron a salir los avatares por si solos, y ahora salen los comentarios anidados.

Bueno, esperemos que los de blogger le den solución a esa parte y no sigan dandonos dolores de cabeza.

Como siempre, gracias por responder. Un saludo.

Responder
JMiur  

Si no quieres usar ese modelo, simplemente busca el código y cámbialo como se muestra en esta entrada y d esa forma, seguirás usando el modelo normal

Alicia Vivancos  

Perdon por no comentar antes. Gracias por responder, además acabo de ver lo bonitos que han quedado tus comentarios y la nueva opcion de ponerlos, voy a ponerme a ello a ver que tal resultado me dan.

Saludos.

JMiur  

Adelante, Alicia, todo es cosa de probar :D

Responder
Anónimo  

Buenas, en mi plantilla no puedo encontrar el siguiente código:



Es decir el CSS de los comentarios, no está. ¿Donde debo colocarlo para que haga efecto? Ya que lo he intentado pero no lo consigo, gracias de antemano.

JMiur  

No se muestra el código en el comentario.

Responder
Unknown  

Jmiur, vengo atrasada, no consigo encontrar el código

JMiur  

¿Qué código te falta?

Unknown  

<b:include name='threaded_comment_css'/>
perdón me olvidé de pasarlo a texto plano :(

JMiur  

Lo que ocurre es que eso fue cambiado. El CSS ya no está allí sino que se carga directamente.

Si me preguntas ... sugeriría usar el otro sistema porque es más fácil de personalizar.

Unknown  

Bien, seguí los pasos, me da error, lo intento y después te cuento, muchas gracias :)

JMiur  

Paciencia, paciencia, paciencia.

Responder
Juvinao  

jmiur como puedo modificar el tamaño de los avatares para que ocupe todo el cuadro

JMiur  

No sé exactamente a que te refieres; muéstrame un ejemplo.

Responder
Husky  

Hola JMiur, por ahí leí que te llamas Jorge. El mío es Gerardo. Te escribo porque en esta entrada encontré parte de lo que quiero tener luego de haber colocado los códigos de Felipe y tuyos, pero hay códigos que señalas acá para encontrar y remplazar que yo no encuentro en mi blog de prueba : http://pruebacrochetporelmundo.blogspot.com/, espero lo puedas ver y decirme que tengo mal o que me está faltando. Busco específicamente llegar a tu formato de comentarios, numeración, el botón "responder" y la caja "¿Quiere dejar un comentario?" He seguido los pasos de lo hecho por Felipe y tus funciones y no logro que queden estáticas en pantalla y bue.... la numeración y etc.
Pido poco verdad? Si, mamá siempre me decía nunca te tires a menos, siempre a ganar.- Gracias por lo que puedas hacer.

JMiur  

Vuelvo a repetir. Los comentarios que hay en ese blog de pruebas que indicas, no son los mismos que utilizo en este blog. En este, uso el otro esquema que es al que se refiere Felipe. Son completamente distintos y no son compatibles entre si.

Lo que usas en tu blog es esto que se describe acá y en los otros enlaces que te indiqué y deben ser leidos en orden porque Blogger cambió y sigue cambaindo, la forma en que se manejaban. Este tipo de comentario es mucho menos flexible ya que depende de scripts y estilos que Blogger inserta de modo automático.

El estilo descripto completo en la segunda parte corresponde al demo online. El tema de la numeración para ese modelo de comentarios se explica en esta otra entrada.

Husky  

Trataré de buscar cual es el primero y ver como siguen, es mucho lo escrito sobre este tema y lugares diversos por eso quizás mis errores. Si puedes me dices como es el orden y si no NO PROBLEM buscaré y veré como salgo. Gracias por tu ayuda.

Responder
pvillegasy  

Hola Jmiur, tengo una pregunta, disculpa mi ignorancia. el código de los comentarios anidados depende de la plantilla que uno esté utilizando, porque busco el código que me dices y no lo encuentro en la plantilla.

www.aguaysig.com

Muchas gracias!!

pvillegasy  

Hola Jmiur, se me olvidó indicar que el código que no encuentro es este: ... te agradezco

JMiur  

Es un sistema que ya ha sufrido varias modificaciones por parte de Blogger (1, 2).

pvillegasy  

Hola Jmiur!, magnifico, lo implementé en mi blog de prueba y funcionó. solo me quedan algunas dudas.. en el botón "Respuestas" el texto no queda centrado, al parecer ocupa dos líneas ¿sería una buenas opción ocultarlo con dsplay:none?. Lo otro es como se haría para que solo apareciera un solo botón "Responder", lo digo porque cuando hay respuestas a los comentarios aparece "Responder" debajo del comentario inicial y al final de las réplicas, sería bueno que cuando existan replicas solo aparezca debajo de ellas,.. bueno no se si me expliqué.. Solo resta decir muchas gracias, pues lo comentarios quedan muy bien!!

JMiur  

Lo primero queda a tu criterio, no lo he visto así que desconozco si tiene solución o no. Lo segundo, modificar la estructura de este sistema es imposible ya que es un código (un script) que agrega Blogger por su cuenta y no puede cambiarse.

Responder
Pavelkapaz  

Hola Jmiur. He estado metiendo manos en un blog de prueba con la misma planilla de mi blog, y pasa que no tengo ninguna de las etiquetas LI, imagino porque de partida no tengo el INCLUDABLE: threaded_comment_css
Te agradecería se me dieras una mano
Saludos
Pavel

JMiur  

Eso esp orque Blogger ha ido cambiando el sistema en sucesivas actualizaciones. Fíjate en estas entradas: 1 y 2

Responder
RafaMon  

Hola Jorge, estoy diseñando un portal de compras que correrá sobre php o asp con diseño css siguiendo tus enseñanzas y de otros, mi pregunta ¿ hay algún módulo de gestión de comentarios como el este de blog ver? Qu sea fácil de implementar

JMiur  

No conozco ninguno en especial pero, imagino que debe haber clases o paquetes en PHP para hacer eso. Hacerlo manualmente lo veo complicado proque requiere teer muy afinada la parte seguridad.

Tal vez, una forma sencilla es usar sistemas externos como Disqus.

Responder
Unknown  

Hola, si no seria mucho pedir, me revisarias la plantilla de este blog formula1d.blogspot.com
Se me eliminaron los comentarios, ayuda porfavor

JMiur  

Eso pasa porque hay una relga de estilo del CSS que los oculta:

#comments, #comments-body, .open-image {
display: none;
.......
}

Responder
Unknown  

Hola JMiur disculpa la ignorancia pero en estas "XXXXX"
"< li id="bc_XXXXXX" class="comment" kind="b">
< div class="avatar-image-container"> .......
< div id="XXXXXX" class="comment-block"> .......
< div id="bc_XXXXXX" class="comment-replies"> .......
< div id="bc_XXXXXX" class="comment-replybox-single"> .......
"
va algo en especial???? y en los ...... irían los estilos que nosotros queramos verdad?????
Desde ya muchas gracias, saludos y que andes de 10+iva!!!! :)

Responder
Unknown  

Disculpas de nuevo se me olvido en el mensaje anterior, ese fragmento desencaja en el código CSS porque lleva DIV, para no complicarte lo mucho esto... "< li id="bc_XXXXXX" class="comment" kind="b">
< div class="avatar-image-container"> .......
< div id="XXXXXX" class="comment-block"> .......
< div id="bc_XXXXXX" class="comment-replies"> .......
< div id="bc_XXXXXX" class="comment-replybox-single"> .......
" Donde va????

JMiur  

No va en ninguna parte; ese es el código que genera Blogger automáticamente y no puedes modificarlo.

Unknown  

Muchas Gracias JMiur!!!

Responder
Javier E.G. Andújar  

Gracias por la información. Estuve adaptando los formatos de comentarios en mi plantilla, pero no pude conseguir que desaparezca la numeración en cada comentario. Me refiero a los números que aparecen en la primera captura de pantalla que mostras. Sabes cómo puedo eliminarlos?
Gracias

JMiur  

Habría que ver tu ejemplo pero, simplemente eliminado la regla:
.comments .comment-block:before {}
y la propeidad counter-reset: contadorcomentarios;

Javier E.G. Andújar  

Hola JMiur, gracias por responder.
En realidad esa regla y propiedad que me mencionas hacen referecia a la nueva numeración de los comentarios, y quiero mantenerla. Lo que quiero eliminar es la numeración original que viene por defecto en los comentarios de blogger.
En esta entrada se aprecia bien como actualmente coexisten ambas numeraciones: http://finalescerrados.blogspot.com.ar/2013/01/entre-loria-y-miserere-por-ultima-vez.html

JMiur  

Por eso pedia ver tu ejemplo. Las etiquetas OL numeran los items por defecto y en tu blog, hay una regla que refuerza eso:

#main ol {
list-style: decimal outside none;
padding: 5px 40px;
}

Simplemente, elimina esa numeración de los comentarios agregando esto:

.comments ol {list-style-type: none !important;}

Javier E.G. Andújar  

Increíble! Ya quedó solucionado. Gracias por la pronta respuesta! Ahora salen perfectos los comentarios.

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