Comentarios anidados: Los estilos paso a paso (1)

¿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, en este caso, en uno de pruebas donde hay una plantilla mínima para que sea lo más genérico posible y donde importé alguna entrada con viejos comentarios fuera de contexto pero que sirven para experimentar.

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