CODEWITHSUNDEEP
phphtmlcsswordpress
MrDevRI
MrDevRI

Reputation: 243

Can't figure out how to set color for specific div's in the loop

On the front page of my site I have 3 posts being pulled, with a div underneath each that is a link. I need each of the 3 divs to be a different color. New posts in this category are going to be displayed here as they are posted, but it will just display the most recent three. I need to make it so that the three "hear more >" divs are always the same color. Below are pics and the code.

How is it currently: enter image description here

How I need it to be: enter image description here

HTML:

<?php 
  $args = array(
    'post_type' => 'success',
    'posts_per_page' => 3,
    'order' => 'ASC'
  );

  $query = new WP_Query($args);
?>

<?php while ($query->have_posts()) : $query->the_post(); ?>
  <div class="success-stories-div">
    <div class="success-stories-text">
      <p style="font-size: 120%;">Success Story</p>
      <?php the_content(); ?>
    </div>
    <a href="<?php the_permalink(); ?>">
      <div class="success-stories-link">Hear More >
      </div>
    </a>
  </div>
<?php endwhile; wp_reset_query(); ?>

CSS:

.success-stories .success-stories-link {
  margin-top: 1em;
  width: 465px;
  height: 50px;
  background-color: #F4B147;
  padding: 12px 0 0 15px;
}

Upvotes: 1

Views: 243

Answers (2)

Maduro
Maduro

Reputation: 725

I think that the problem is that you are not calling the other colors: I would try something like this: What I am doing here is that I am creating a variable $i and make it $i=0 then inside the while loop I increment $i and so I can add a number at the end of the css class and it will look like this: class="success-stories-link<?php echo $i; ?>"

<?php 
$args = array(
'post_type' => 'success',
'posts_per_page' => 3,
'order' => 'ASC'
 );

 $query = new WP_Query($args);
?>

  <?php  $i = 0;
    while ($query->have_posts()) : $query->the_post(); ?>
  <div class="success-stories-div">
   <div class="success-stories-text">
    <p style="font-size: 120%;">Success Story</p>
  <?php the_content(); ?>
</div>
<a href="<?php the_permalink(); ?>">
  <div class="success-stories-link<?php echo $i; ?>">Hear More >
  </div>
</a>
  </div>
   <?php $i++; endwhile; wp_reset_query(); ?>

in the css I would add different background-color:

.success-stories .success-stories-link0 {
 margin-top: 1em;
 width: 465px;
 height: 50px;
 background-color: #F4B147;
 padding: 12px 0 0 15px;
 }
 .success-stories .success-stories-link1 {
 background-color: another-color;
 }
  .success-stories .success-stories-link2 {
 background-color: another-color;
 }

I haven't test this code. Also, I am looking at the pictures How I need to be: Also, there might be a better solution to it...but this should save your life for now =)

Upvotes: 1

Jah
Jah

Reputation: 1006

you can use selector

example:

    <style>
div{
  margin-top: 1em;
  width: 465px;
  height: 50px;
  padding: 12px 0 0 15px;
}

div.success-stories-link:nth-child(1) { 
    background: green;
}
div.success-stories-link:nth-child(2) { 
    background: yellow;
}
div.success-stories-link:nth-child(3) { 
    background: red;
}

</style>

<div class="success-stories-link"><a href="">1</a></div>
<div class="success-stories-link"><a href="">2</a></div>
<div class="success-stories-link"><a href="">3</a></div>

Upvotes: 3

Related Questions