JMiur [E]

La numeración con estilo que publican en 456 Berea Street es interesante y muy simple de aplicar. Utiliza el pseudo-elemento :before y dos propiedades de las listas que usualmente no incluimos: counter-reset y counter-increment que nos permiten generar contenido de modo automático es decir, en este caso, numerar una lista.

Vamos al ejemplo que es una variante del mostrado en CSS Tricks.

El HTML:
<dl class="numeros">
  <dt>Morbi porta facilisis leo, ut pretium elit gravida sed.</dt>
    <dd>consectetur felis</dd>
  <dt>Pellentesque malesuada sapien quis quam tincidunt.</dt>
    <dd>fringilla sed risus</dd>
  <dt>Donec scelerisque nisi ultricies felis varius luctus.</dt>
    <dd>lectus ipsum</dd>
</dl>
Y el CSS:
<style>
  .numeros { /* el contenedor es la etiqueta DL */
    background-color: #000;
    border: 1px solid #444;
    counter-reset: nombre_contador; /* ponemos el contador a cero */
    margin: 0 auto;
    padding: 20px 20px 0;
    width: 500px;
  }
  .numeros dt {
    font-size: 18px;
    position: relative;
  }
  .numeros dt:before { /* este es el número */
    content: counter(nombre_contador, decimal);
    counter-increment: nombre_contador;
    left: 0;
    position: absolute;
    top: -8px;
    /* los detalles de la fuente son a gusto de cada uno */
    background-color: #444;
    border-radius: 4px;
    color: #FFF;
    font-family: Arial;
    font-size: 48px;
    padding: 0 10px;
  }
  .numeros dd {
    color: #FFF;
    margin: 0 0 30px;
  }
  .numeros dt, .numeros dd {
    padding-left: 55px;
}
</style>

Morbi porta facilisis leo, ut pretium elit gravida sed.
consectetur felis
Pellentesque malesuada sapien quis quam tincidunt.
fringilla sed risus
Donec scelerisque nisi ultricies felis varius luctus.
lectus ipsum

¿Y para qué podría servir?

Justamente, elijo este demo porque usa las etiquetas DL DT y DD en lugar de las tradicionales etiquetas de lista (UL LI) ya que los comentarios de Blogger están armados con estas etiquetas así que, si quiseramos numerar los comentarios, podríamos utilizar este mismo esquema ya que todas estas propiedades funcionan en cualquier navegador, incluyendo IE8.

Si esa parte de nuestra plantilla tiene el código original y no hemos cambaido demasiadas cosas, bastaría agregar estas reglas antes de </b:skin>:
#comments-block {
  counter-reset: contadorcomentarios;
}
#comments-block dt {
  position: relative;
}
#comments-block dt:before {
  content: counter(contadorcomentarios, decimal);
  counter-increment: contadorcomentarios;
  position: absolute;
  right: 0;
  top: 0;
   /* las propiedades de la fuente del número */
  color: #888;
  font-family: Arial;
  font-size: 30px;
}
Y si hemos "manoseado" mucho esa parte de la plantilla, no hay problema, podemos hacer lo mismo e ir viendo qué otras propiedades debemos agregar o cambiar; en mi caso, funcionó perfectamente sin otro agregado y ahora, está aplicado a los comentarios del blog así que la numeración no depende ya de un script sino que es puro CSS.

36 comentarios:

Jorge Ruiz  

Me lo guardo.
Siempre me ha gustado darle un poco de estilo a las listas. Creo que esto también se podría aplicar a otras cosas, no solo a los números de los comentarios.
Gracias.

Responder
Karla Castañeda  

Me gusta ;)

Se ve cool, moderno, buena idea, gracias JMiur.

Buenas Noches!

Pd. el maldito formulario de comentarios incrustado no funciona en tu blog, tampoco en el mío y quizas tampoco en el de muchos otros...

Responder
JMiur  

Jorge Ruiz:
Puede aplicarse a cualquier tipo de etiqueta y no sólo listas así que las opciones ya dependen de lo que uno quiera hacer. Da para mucho.

Karla:
Me alegra le guste :D
Es fácil de hacer y con fuentes especiales puede quedar muy interesante.

No he visto problemas en este momento; lo he estado usando sin dramas pero, no me extraña :D

Responder
Unknown  

Genial, tal vez lo implemente, justo ayer estaba probando algunos pseud-oelementos (lista).

Creo que es hora de usar el blog de pruebas, para evitarse disgustos :P

Responder
Alejandro  

La verdad es que me viene genial para una suerte de lista que hice para una maqueta web, donde cada LI de la UL cargaba una imagen '1, 2, 3...' :) muchas gracias!

Responder
Unknown  

Precioso Jmiur :P

Responder
Unknown  

Pshhhh hace unos días me estoy percatando de esos pequeños detalles, que has cambiado en el blog :D

Responder
Vinilocura  

¡Buenas! Me encanta el resultado y la función, pero....

...¿por qué me numera con un 1 todos los comentarios?

Quizá no entendí algo.

¡Gracias!

Responder
María José Moya  

J.Miur, perdona, no acabo de entender qué tengo que añadir y cómo, para que los comentarios me salgan numerados:

¿sólo a partir de: #comments-block { ? (una vez añadido, en vista previa no se ve ningún cambio en los comentarios...).

Responder
JMiur  

Graciela:
uno siempre anda entreteniéndose con esas cositas :-)

Vinilocura:
Eso, probablemente ocurra porque en tu CSS estás agregando etiquetas y eso está prohibido, hará que muchas reglas no funcionen. Fundamentalmente, lo que veo es que los comentarios del CSS están escritos así:
<!-- Fin RSS Icono -->
y eso es un error, no pueden usarse < ni >; los comentarios dentro del CSS se hacen de este modo:
/* Fin RSS Icono */
debes eliminar todo eso porque es probable que haya otras reglas que tampoco estén funcionando.

Mariajo:
Sólo eso, salvo que el blog donde lo pruebes no tenga la estructura normal de Blogger. Lo debes agregar entre <b:skin> y </b:skin> o entre etiquetas <style> </style>
En al vista previa no se verá ya que los comentarios sólo se muestran en las páginas individuales y la vista previa sólo muestra el home del sitio.

Responder
Vinilocura  

¡No lo sabía! Muchas gracias. De hecho lo que usaba en "Fin RSS Icono" dejó de funcionar jajaja. Sustituiré los

Responder
JMiur  

Vinilocura:
No sólo borres ese que es un ejemplo, elimina todos los otros que encuentres dentro del CSS.

Responder
Vinilocura  

Disculpe, mi anterior mensaje no salió completo (en él le daba también las gracias por los e-mails). Sí, ahora mismo estoy sustituyéndolos todos todos. Unos 50, trabajo de chinos :P La plantilla original venía así, yo añadí algunos pensando que era la manera correcta. Muchísimas gracias por sus indicaciones, como siempre :) Salud!

Responder
Vinilocura  

JMiur, seguí sus indicaciones (creo que correctamente) y mi blog ha quedado así: http://puu.sh/aack ¡Jajajaja! Menos mal que guardé copias de seguridad. ¿Hice algo mal? Por ahora lo dejaré como estaba. Salud!

Responder
JMiur  

Obviamante, has eliminado algo que no debías; es sencillo. te doy la lista exacta de lo que está mal:

<!-- Paginación -->
<!-- Fin Paginación -->
<!-- Hover en texto -->
<!-- Fin Hover en texto -->
<!-- RSS Icono -->
<!-- Fin RSS Icono -->

Responder
JMiur  

Algo más. No guardes la plantilla; usa la Vista Previa para verificar o, ante la duda, borras uno, usas Vista Previa, borras otro ... etc.

Responder
Vinilocura  

Siento tantísima molestia y cómo agradezco sus indicaciones con tanto detalle, soy una lata cuando no doy con algo, peeero...

...como siempre aquí hay respuesta :D http://puu.sh/aanJ

¡Todo perfecto ya! Muchísimas gracias JMiur. Bravo.

Responder
Karla Castañeda  

Fíjate JMiur que ahora que leí tu artículo completo, me dí cuenta del potencial que tiene esto, que buen hack, me encanta poder prescindir del script para la numeración; no me había dado cuenta ya que al principio solo leí a medias y me centré en la imagen que pusiste como demo.

Buenísimo :D

Bueno, cambiando de tema, sabes que hace tiempo traigo "unas ganas" de poder suprimir el tamaño que Blogger asigna a las imágenes del Gadget de Entradas Populares, ya que a veces uso galería horizontal con este, y aunque las miniaturas sirven, para ciertos propósitos sería ideal un tamaño personalizado si se te ocurre algo me cuentas ;)

Responder
JMiur  

Vinilocura:
Mucho mejor :D
Ahí ya puedes ubicar el número usando right y top con valores negativos o positivos.

Karla:
:after :before y content son propiedades a las que vamos a tener que sacarles provecho, son poderosas y dan para mucho.
En cuanto a las Entradas Populares, ya me preguntaron sobre el tema y me da la impresión que debería ser posible hacer eso pero, sólo usando JavaScript ya que el dato que usa Blogger es ... extraño. La imagen que muestra es de tipo s72 y por eso el tamaño pero habría que tratar de leer es URL y luego cambiarla. Si se puede leer, se cambia con facilidad.
Prometí ver el asunto pero sigo en deuda :-$

Responder
Anónimo  

Me qedo espectacular, yo pense qe tenia todo toqueteado en mi plantilla, y agregue el ultimo CSS del post y andubo perfecto! Gracias!

Responder
JMiur  

Salvo cosas muy pero muy raras, con esas reglas del final de la entrada es suficiente ... menos mal :D

Responder
Iván  

JMiur se me corren los avatares de los comentarios al realizarlo asi, no estuve manoseando nada, simplemente copie el código css que nos diste.
Ayuda por favor. :)

Responder
JMiur  

Eso es debido a las reglas de estil ode tu plantilla, simplemente agrega esto y deebria solucionarse:

#comments-block .avatar-image-container left: 0 !important;}

Responder
Unknown  

JMiur, no quería sobrecargarte con tanta consulta pero necesito que me ayudes con la numeración de los comentarios, anidados incluidos. Hoy retiré de mi plantilla el script de Oloman que numeraba los comentarios y ahora quería introducir éste para que los anidados también entren en la numeración. Como me ha dicho él, tú usas listas hechas con dt/dd y yo no, entonces como mi plantilla es antigua y tiene el código independiente de anidados (seguí los pasos de tu otra entrada) ahora no sé cómo implementarlo. Si pudieras ayudarme a solucionarlo me vendría de escándalo para el blog. Las gracias por adelantado como siempre.

JMiur  

Las reglas de estilo básica serían algo así:

#comments-block3 {counter-reset: contadorcomentarios;}
#comment-header {position: relative;}
#comment-header:before {
content: counter(contadorcomentarios, decimal);
position: absolute;
right: 0;
top: 0;
counter-increment: contadorcomentarios;
}
.respuestas-comentarios {position: relative;}
.respuestas-comentarios:before {
content: counter(contadorcomentarios, decimal);
counter-increment: contadorcomentarios;
position: absolute;
right: 0;
top: 0;
}

Responder
Unknown  

Muchas gracias de verdad, funcionó a la perfección.

Responder
Oscar  

Gracias! Estaba buscando algo para mejorar los comentarios y realmente esto ha servido, ahora a ver que mas le puedo hacer...

Responder
♥ Ana  

JMiur, después de mirar tus entradas vengo a pedirte un favor, he visto en el blog de Oloman, un código muy sencillo de implementar en el blog para enumerar los comentarios, lo he puesto en mi blog pero no enumera los comentarios anidados
Mi intención era preguntar a Oloman sobre el tema para ver si me podía ayudar ya que la idea la vi en su blog pero, leyendo sus comentarios vi que le comentaba ésto a otra persona:
"No he "estudiado" ese script para generar los comentarios al margen del sistema de Blogger, así que si no te importa, pregunta a Jorge que seguro que se lo sabe de memoria y te dirá la solución enseguida"
Y , por eso vengo, te pongo el código que he añadido en mi blog y me gustaría saber si se le puede añadir o cambiar algo para que numere todos los comentarios correlativamente, incluidos los anidados
#comments-block {

counter-reset: contadorcomentarios;

}

#comments-block dt {

position: relative;

}

#comments-block dt:before {

content: counter(contadorcomentarios, decimal);

counter-increment: contadorcomentarios;

position: absolute;

right: 0;

top: 0;

color: #888;

font-family: Arial;

font-size: 30px;

}

Muchas gracias de antemano, un abrazo

JMiur  

Sí. es la misma idea que se muestra en esta entrada. Pero para aplicarlo a las respuestas debes hacer dos cosas; primero, buscar esta regla y agregarle position: relative;

.comment-body-thread {
...
position: relative;
}

Luego, creas otra regla para las respuestas:

.comment-body-thread:before {
color: #888888;
content: counter(contadorcomentarios, decimal);
counter-increment: contadorcomentarios;
font-family: Arial;
font-size: 30px;
position: absolute;
right: 0;
top: -30px;
}

que es igual que la que tienes pero, donde seguramente, debes ajustar los valores porque el diseño de esa parte es diferente de la otra. Por ejemplo, ahí puse top:-30px para que el número se vea más arriba; sino, se vería dentro del texto de comentarios.

♥ Ana  

¡¡Ya está hecho!!, le he cambiado el color, el tipo de fuente y le he puesto sombras a los números, me ha quedado estupendamente, a mi gusto

Una cosa más, todos éstos códigos nuevos que pongo y que van antes de ]]></b:skin>, para acordarme para que son los pongo por ejemplo, así:


/*Contador comentarios*/

............

..códigos...

............

/*Fin contador comentarios*/

¿Está bien hecho así?, antes no los señalizaba en la plantilla y luego no sabía para que era cada cosa, quiero señalizar poco a poco todo lo que he puesto

Perdón por tanta molestia, abrazos y mil gracias

JMiur  

Perfecto, Ana :D

Sí, la forma de hacer comentarios dentro del CSS es con ese tipo de sintaxis:
/* esto es un comentario */

♥ Ana  

¡¡Estupendo!! ¿ves?, al final hasta aprenderé algo, después de tanta pregunta igual no soy una mala alumna o será que tú eres muy buen profesor :D
Repito las gracias y, hasta la próxima pregunta que va a ser dentro de poco, jejeje

Responder
Husky  

Que tal JMiur, estoy con esto de la numeración y no puedo lograrlo. Los códigos que pones arriba como no dice donde van no tengo idea de donde debo ponerlos. Me gustaría si puedes revisar si me falta algo o sobra y en tu respuesta POR FAVOR me indiques donde y que debo hacer. Realmente estoy desorientado y quisiera poder terminar con este tema, con tu ayuda, si puedes. Gracias por tu paciencia.

Responder
Husky  

Perdón JMiur, olvidé dejarte la url: http://porelmundodelcrochet.blogspot.com/
Gracias y disculpa.

JMiur  

Como estás usando los comentarios anidados de Blogger, lo dicho en esta entrada no servirá. Debes mirar estas otras dos: 1 y 2 y tener en cuenta que ese tipo de comentarios es manejado totalmente por Blogger y que ciertas definiciones de estilo tal vez deban ser adaptadas.

En todos lso casos, el estilo o CSS se coloca entre <b:skin> y </b:skin>

Responder
.  

Oii, 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