Apply random colours to buttons, PHP, MySQL

[Andy]

Hi everyone,

I have a MySQL database that holds several records (image, title, description, button).
The records are fetched & displayed from the database using PHP.
Any styles are applied using CSS.

Currently all buttons display in a blue color, which is read from the CSS.
Is it possible to have different colors applied to the buttons randomly.

Button 1 could be a random color.
Button 2 could be another random color.
Button 3 yet another random color and so on?

My code so far:

HTML / PHP

[php]…<?php
$dbc = mysqli_connect(‘host’, ‘account’, ‘password’, ‘dbname’) or die(‘Error connecting to MySQL Server.’);

$query = “SELECT * FROM tableName ORDER BY id ASC”;
$result = mysqli_query($dbc, $query) or die(‘Error querying database.’);

while($row = mysqli_fetch_array($result))
{?>

• 
  
  

  <?php echo $row['title'];?>

  
  

  <?php echo $row['description'];?>

  
  <?php echo $row['button'];?>
  

<?php } mysqli_close($dbc); ?>...[/php]

CSS

[code].mainContent{
width: 70%;
margin: 0 auto;
margin-top: 3%;}

ul.grid {
list-style: none;
font-size: 0px;
margin-left: -6.5%; /* should match li left margin */}

ul.grid li {
display: inline-block;
padding: 10px;
margin: 0 0 2.5% 2.5%;
background: #fff;
border: 1px solid #dfdfdf;
font-size: 16px;
font-size: 1rem;
vertical-align: top;
box-shadow: 0 0 5px #dfdfdf;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;}

ul.grid li img {
max-width: 100%;
height: auto;
margin: 0 0 10px;}

ul.grid li h3 {
margin: 0 0 5px;}

ul.grid li p {
font-size: .9em;
line-height: 1.5em;
color: #999;}

ul.grid.columns-3 li {
width: 30.83%; /* this value + 2.5 should = 33% */}

.gridButtons{
border: 1px solid #48D1CC;
padding: 10px;
background: #48D1CC;
text-align: center;
color: #fff;
font-weight:bold;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
margin: 0 auto;
display:block;}[/code]

Any help would be great. Thanks, Andy

[ErnieAlex]

EVERYTHING is possible in programming. Just have to think out-of-the-box sometimes to solve it.

Well, if you want to use totally random colors and no limit on colors, you could use RGB() functions for the colors and
just randomly use 0-255 for the values. This will make every button different, but, might cause issues when you have the
same random color selected as the rest of the page. So, to do that, it would be something loosely like:

If you have a set number of random colors you are using, let’s say 10 colors in your CSS file and they are named something
like buttoncolor1, buttoncolor2…buttoncolor10, then you can use something like this to display them:

You basically just need to use the PHP code to create the random number of the button color and get it into the HTML where
it is needed.

Hope that helps!

[Andy]

Thanks ErnieAlex,

just getting back to this now and it worked perfectly.
Thanks for the detailed explanation with examples too.

Andy

[ErnieAlex]

Glad I could help! See you in the next problem…