CODEWITHSUNDEEP
phpcolors
Barry McDaid1982
Barry McDaid1982

Reputation: 157

How to insert colors into rows and columns

I am working on a piece of code that displays a table that shows different drug details. I have a color coding system, red = danger, yellow = alert, green = safe.

However I am not happy with the colors that I am using. Is there any way of inserting brighter colors into this code below?

  <?php $row_class = "";
    while($row = mysql_fetch_assoc($dbResult1))
    {
          if($row['total_mai'] <= 2)
             $row_class = "success";
          else if($row['total_mai'] >= 5)
               $row_class = "danger";
          else if($row['total_mai'] >= 3 and $row['total_mai'] < 5)
               $row_class = "warning";

          // echo $row_class;
    ?>

Upvotes: 2

Views: 282

Answers (1)

Palu Macil
Palu Macil

Reputation: 1719

The colors actually aren't in your code here. The colors are defined in classes in your css. Somewhere in the header of your file, you'll need to look for a reference to a css file:

<link rel="stylesheet" type="text/css" href="mystyle.css">

It could also be in the actual html page between <style> tags.

<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>

Though there will be a lot there, you're probably looking for sections which look something like this:

.success {
    color: green;
}

.danger {
    color: red;
}
.warning {
    color: yellow;
}

There could be many other attributes defined too, but the .word "selector" tells the browser to render colors on the text with these classes you're adding. To change the colors, change the attributes. You might not see color names liek above. You could see hex colors (something like #d0e4fe;). The W3Schools page on CSS is a good place to get started. They also have a nice color reference for color names: enter image description here

There are other ways the CSS might reference the classes, so you might want to look at a tutorial on Selectors. For instance, they might use tr.danger { ... } to reference only danger classes which are applied to table rows.

If using Bootstrap

Then I'm not an expert, so I can only help so much, but Bootstrap pre-defines some of these styles for you. You could make new classes and use !important to override the classes with new colors. Important can get confusing since it's a "nevermind" to previous CSS, but you need it here if bootstrap is applying the background to cells individually. I just found some code on another answer here about doing this in Bootstrap:

.table tbody tr > td.success {
  background-color: #dff0d8 !important;
}

.table tbody tr > td.error {
  background-color: #f2dede !important;
}

.table tbody tr > td.warning {
  background-color: #fcf8e3 !important;
}

.table tbody tr > td.info {
  background-color: #d9edf7 !important;
}

.table-hover tbody tr:hover > td.success {
  background-color: #d0e9c6 !important;
}

.table-hover tbody tr:hover > td.error {
  background-color: #ebcccc !important;
}

.table-hover tbody tr:hover > td.warning {
  background-color: #faf2cc !important;
}

.table-hover tbody tr:hover > td.info {
  background-color: #c4e3f3 !important;
}

This would be in your own CSS file preferably. If you start modifying the Bootstrap css file, it could get frustrating if you need to upgrade Bootstrap to a new version. The "important" takes care of your settings being more, well... important.

You could also use the links I added above to learn how to make your own classes and then add your own classes instead of Bootstraps.

Upvotes: 3

Related Questions