Colores diferentes para cada artículo del loop

  • Juan Anaya

    (@juan-anaya)


    hace 10 años, 8 meses

    Buenas tardes,
    a ver si se ocurre a vosotros algo porque yo ya no se donde mirar 😉

    Tengo un loop en el index que me muestra las tres últimas noticias. Cuando hice el boceto a cada una de esas noticias le di un color de fondo diferente.
    Como «ñapa» le he colocado una clase cuando creo la noticia, la penúltima «segunda» y antepenúltima «tercera».
    El caso que tengo que cambiarlo cada vez que subo una. Yo había pensado igual con javascript que cambiase automáticamente según su orden el color, pero no se como hacerlo. De hecho creo que así no se puede.

    Una ayudita por el amor de dio jajaja

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)
  • OsKar142

    (@oskar142)

    hace 10 años, 8 meses

    Yo creo que lo haría de la siguiente forma.

    Con pseudo-clases crearía 3 clases distintas correspondiente a cada uno de los elementos.

    Ej. CSS

    ul li:nth-child(1){
background-color: red;
}
ul li:nth-child(2){
background-color: green;
}
ul li:nth-child(3){
background-color: blue;
}

    El PHP,

    ...
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
...

    Esto hace que el elemento 1 sea rojo, el elemento 2 sea verde y el elemento 3 sea azul. Aunque está «anticuado», el manual de CSS avanzado de librosweb.es está bastante bien (http://librosweb.es/libro/css_avanzado/capitulo_3/selectores_de_css_3.html). Te dejo un ejemplo en http://jsfiddle.net/jn2uykpx/.

    Espero que te sirva 🙂

    Un saludo.

    Iniciador del debate Juan Anaya

    (@juan-anaya)

    hace 10 años, 8 meses

    Hola Oskar, gracias por contestar.

    Si, es lo primero que he hecho, crear estilos para esas subclases.
    El problema es que necesitaba que automaticamente añadiera esas subclases según el orden en el que aparecen en el loop.

    Al final he colocado un contador que añade una posición diferente en cada vuelta del loop relacionada con cada una de sus subclases.

    Tal que así:

    <?php query_posts(array( 'showposts'=> 8, 'cat' => 3) ); ?>
				<?php while ( have_posts() ) : the_post(); ++$contador;
                if ($contador == 2) $claseResaltado = " segundo";
                if ($contador == 3) $claseResaltado = " tercero";
				 if ($contador == 4) $claseResaltado = " cuarto";
                if ($contador == 5) $claseResaltado = " cuarto";
                if ($contador == 6) $claseResaltado = " tercero";
				if ($contador == 7) $claseResaltado = " segundo";
                ?>
    galussothemes

    (@galussothemes)

    hace 10 años, 8 meses

    Hola Juan,

    Puedes utilizar $wp_query->current_post, más sencillo y elegante. Me publicito: Saber cuál es el post actual que se está mostrando durante el bucle de WordPress

    Espero que te ayude. Saludos.

Viendo 3 respuestas - de la 1 a la 3 (de un total de 3)

El debate ‘Colores diferentes para cada artículo del loop’ está cerrado a nuevas respuestas.