How to change the background of posts in wordpress and leave each one with a different color?

Question

How to change the background of posts in wordpress and leave each one with a different color?

Navigation

#1 by (0 votes)

2

Hello, I'm having a problem. I'm trying to make each post have a different background color. I tried to use this code below in css but it leaves all the posts of a single color.

div.postagem > div:nth-child(1) {
    background: #edc333;
}

div.postagem > div:nth-child(2) {
    background: #000;
}

div.postagem > div:nth-child(3){
    background: #3e4095;
}

Here is the code I have in my posting area:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="col-md-4"><div class="postagem">

<div class="postagem-imagem">
<?php
if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'miniatura' );
} ?></div> 

<div class="titulo"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a></div>

</div></div>


<?php endwhile?>
<?php else: ?>
<h2>Nada Encontrado</h2><?php endif; ?>

This is the code I have in css.

.postagem {
    height: 340px;
    overflow: hidden;

}
.postagem img {
    opacity: 0.2;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.postagem-imagem img {
    opacity: 0.3;
}

.titulo {
    font-size: 17.473px;
    font-family: "Arial";
    color: rgb(254, 255, 254);
    font-weight: 900;
    padding: 20px;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: left;
    position: absolute;
    z-index: 111;
    top: 45px;

}

.titulo a {
    color: #fff;
}

Could anyone help? Thank you in advance!

php css wordpress

asked by anonymous 31.08.2018 / 19:08

1 answer

Error printing member of struct: request for member in something not a structure or union How to loop in R and save the results of a table of contents to a vector

score 0 · Answer 1

The problem is that the .postagem div is the only child of the .col-md-4 div, so the :nth-child(2) and :nth-child(3) CSS do not apply. If you change the class .postagem to the one where the class .col-md-4 already has to solve.

For your case, the following will work because the div.col-md-4 is that they are sisters , and you can focus on different using :nth-child , see below the example.

.container {
  margin: 20px;
}

.postagem {
  border: solid 1px #6c757d;
  padding: 10px;
}

.col-md-4:nth-child(1) > .postagem {
  background: #edc333;
}

.col-md-4:nth-child(2) > .postagem {
  background: #000;
}

.col-md-4:nth-child(3) > .postagem {
  background: #3e4095;
}

<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="postagem">1 de 3</div>
    </div>
    <div class="col-md-4">
      <div class="postagem">2 de 3</div>
    </div>
    <div class="col-md-4">
      <div class="postagem">3 de 3</div>
    </div>
  </div>
</div>

And in JSFiddle