css - i want to change the background of the card div using PHP

View Original

I used the for loop to get the data dynamically from the database and displayed ,Now I have to display those cards in different colors using Php No javascript is needed

<div class="row gutter-xs">
     <?php
     foreach($dispcnt as $object)
     {
        ?><div  class="col-xs-3 col-md-3">
        <div class="card bg-info"> // card 
            <div class="card-values">
              <div class="p-x">
                <small><?php echo $object->qa;?> </small>
                <h3 class="card-title-l"><?php echo  $object->cnt;?> Counts</h3>
              </div>
            </div>
            </div>
     </div> // code of card ends here
     <?php }?>
     </div>

I want to change the color of the cards in PHP

I am excepting the cards to look like this

Solution A with CSS only

Actually, you don't need any PHP to do that, you could do it only with some CSS rules with the help of the :nth-child() selector.

Here's a little snippet for demo if you have 4 colors always repeating:

.container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 10em;
  height: 4em;
  margin: .5em;
  padding: .5em;
  color: white;
  background: #0298cf;
}

.card:nth-child(4n + 1) {
  background: #0298cf;
}

.card:nth-child(4n + 2) {
  background: #9b479f;
}

.card:nth-child(4n + 3) {
  background: #4e484e;
}

.card:nth-child(4n + 4) {
  background: #f70d1a;
}

<div class="container">
  <div class="card bg-info">
    <div class="card-values">
      <div class="p-x">
        <small>Small 1</small>
        <h3>1 Counts</h3>
      </div>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-values">
      <div class="p-x">
        <small>Small 2</small>
        <h3>2 Counts</h3>
      </div>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-values">
      <div class="p-x">
        <small>Small 3</small>
        <h3>3 Counts</h3>
      </div>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-values">
      <div class="p-x">
        <small>Small 4</small>
        <h3>4 Counts</h3>
      </div>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-values">
      <div class="p-x">
        <small>Small 5</small>
        <h3>5 Counts</h3>
      </div>
    </div>
  </div>  
  <div class="card bg-info">
    <div class="card-values">
      <div class="p-x">
        <small>Small 6</small>
        <h3>6 Counts</h3>
      </div>
    </div>
  </div>  
  <div class="card bg-info">
    <div class="card-values">
      <div class="p-x">
        <small>Small 7</small>
        <h3>7 Counts</h3>
      </div>
    </div>
  </div>  
  <div class="card bg-info">
    <div class="card-values">
      <div class="p-x">
        <small>Small 8</small>
        <h3>8 Counts</h3>
      </div>
    </div>
  </div>  
  <div class="card bg-info">
    <div class="card-values">
      <div class="p-x">
        <small>Small 9</small>
        <h3>9 Counts</h3>
      </div>
    </div>
  </div>  
</div>

Answer

Solution:

Here is a PHP-only solution. Just set an array with the desired colors and use modulo to cycle through them as you iterate over the cards. Put a style attribute on the card to set the background color.

<div class="row gutter-XS">
     <?php
  $colors = [
'#0298cf',
'#9b479f',
'#4e484e',
'#f70d1a',
];
$count = count($colors);
$i = 0; // increment this counter at the end of the foreach loop
  foreach ($dispcnt as $object)
     {
        ?><div  class="col-xs-3 col-md-3">
        <div class="card BG-info" style="background:<?php echo $colors[($i % $count)]; ?>"> <!-- card -->
            <div class="card-values">
              <div class="p-x">
                <small><?php echo $object->QA;?> </small>
                <h3 class="card-title-l"><?php echo  $object->CNT;?> Counts</h3>
              </div>
            </div>
            </div>
     </div> <!-- code of card ends here -->
     <?php $i++;}?>
     </div>

Source