在Wordpress中更改动态内容的边框颜色

Question

Sincere apologies if this has been asked before. To be honest I didn't know what terms to search for well enough to find relevant content.

Goal: My company has a press page that is built using some custom PHP built into Wordpress. The press page can be seen here: http://www.hospitalityq.com/press

My marketing manage would like to change the light gray border on the press to colors within our company palette. We would have 5 colors that we would like the press items to rotate throughout. Is it possible to color each press article with it's own color and have that done through adding on to our PHP script?

Below is a copy of our existing script.

I hope that makes sense. I'm happy to post a mockup if that's easier.

Best, Dan

<?php

$postID = get_the_ID();
$meta = get_post_meta($postID);
?>
  <!--pre>
  <?php
  //var_dump ($meta);
  ?>
  </pre-->
<?php
  if( has_post_thumbnail( $postID ) ):;
?>
  <div class="clear-after">
  <div class="post-image">
    <a
       href="<?php echo $meta['hq_news_articles_link'][0] ?>"
       class="vc_read_more"
       title="Read about <?php the_title_attribute(); ?>"
       target="_blank">
      <?php the_post_thumbnail($postID); ?>
    </a>
  </div>
<?php
  endif;
  $infoClass = 'post-info '. (!has_post_thumbnail( $postID ) ? 'no_image' : '');
?>
<div class="<?php echo $infoClass; ?>">
 <h4>
    <a
       href="<?php echo $meta['hq_news_articles_link'][0] ?>"
       class="vc_read_more"
       title="Read about <?php the_title_attribute(); ?>"
       target="_blank"
     >
      <?php the_title();?>
    </a>
  </h4>
      <h5>
        <?php the_date('F j, Y');?>
      </h5>
      <p><?php
          echo substr(get_the_excerpt(),0, 115);
          // echo wp_trim_words(get_the_excerpt(), 20);
          ?>&hellip;
        <br><a
       href="<?php $meta['hq_news_articles_link'][0] ?>"
       class="hq_press-read-more"
       title="Read about <?php the_title_attribute(); ?>"
       target="_self"
     >
       Read article
    </a>
   </p>
</div>
</div>

Answer 1

I would use CSS nth-child :

 .company { border: 1px solid black; } .company:nth-child(5n+1) { border-color: red; } .company:nth-child(5n+2) { border-color: green; } .company:nth-child(5n+3) { border-color: yellow; } .company:nth-child(5n+4) { border-color: blue; } .company:nth-child(5n+5) { border-color: purple; } 

 <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> <div class="company">company</div> 

Answer 2

This is what you need to do, to elaborate on the answer in the comment for using nth-child.

The example below targets what you need. This example targets every third element and applies this style. So in your case, using your 5 different colors, you would use: 1n+1, 2n+2, 3n+3, etc.

li.entry-hq_news_articles:nth-child(3n+3) {
  border: 1px solid #e31b12;
}