php - Changing Table Background Colour With Value Stored in DB Table Field?


Keywords:php 


Question: 

UPDATE. Table id styling :

 {
position:absolute;
border-spacing:0;
border-collapse:collapse;
background-color:6e97db;
height:720px;
width:100%;
}

EDITED

HTML source :

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<link rel="stylesheet" href="" />
<link rel="stylesheet" href="" />
<link rel="stylesheet" href="" />

<script type="text/javascript" src=""></script>

<link href='' rel='stylesheet' type='text/css'>
<link href='' rel='stylesheet' type='text/css'>
<link href='' rel='stylesheet' type='text/css'>

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

<title>Trading Card Generator</title>
<meta name="Description" content="Trading Card Generator - Create Your Own Comics, Predators & Tennis Trading Cards" />
<meta name="Keywords" content="Trading Card Generator, trading card maker, top trumps trading cards" />

<script>
$(function(){
$(document).click(function(){  
$('.messagebox').hide();
});
});
</script>

<style> 
@font-face {
font-family:TCG;
src: url(xirod.ttf);
}

@font-face {
font-family:TCGHEADING;
src: url(GearsOfPeace.ttf);
}

@font-face {
font-family:TCGAUTHOR;
src: url(kenyancoffeerg.ttf);
}

@font-face {
font-family:TCGPN;
src: url(GearsOfPeace.ttf);
}

div {font-family:TCG;}
div {font-family:TCGHEADING;}
div {font-family:TCGAUTHOR;}
div {font-family:TCGPN;}
</style>

</head>

<body id="bodyform">

<p class="header"><a href="">Trading Card Generator</a></p>

<p class="disclaimer">DC vs Marvel&nbsp;<br />
Card Back Face<br />
This is a non profit website.</p>

<ul id="navigation">
<li><a href="">create</a><ul>
<li><a href="">back face</a></li>
<li><a href="">business</a></li>
<li><a href="">comics</a></li>
<li><a href="">predators</a></li>
<li><a href="">tennis</a></li>
</ul></li>
<li><a href="">edit</a><ul>
<li><a href="">back face</a></li>
<li><a href="">business</a></li>
<li><a href="">comics</a></li>
<li><a href="">predators</a></li>
<li><a href="">tennis</a></li>
</ul></li>
<li><a href="">register</a><ul>
</ul></li>
<li><a href="">themes</a><ul>
<li><a href="">back face</a></li>
<li><a href="">business</a></li>
<li><a href="">comics</a></li>
<li><a href="">predators</a></li>
<li><a href="">tennis</a></li>
</ul></li>
<li><a href="">logout</a></li>
<li><a href="">contact</a></li>
</ul>

<div class="previouscard"></div>

<div class="bouncein">

<table id="card">
<tr>
<td style="background-color:211e1e"></td>
</tr>
<tr>
<td><p class="tcg">Trading Card Generator</p></td>
</tr>
<tr>
<td class="tcgnamecell">DC vs Marvel<br/> Heroes &amp; Villains</td>
</tr>
<tr>
<td class="tcgimagecell"><img class="imgsize" alt="" src="" /></td>
</tr>
<tr>
<td><p class="author">Created by M B Mehdi</p></td>
</tr>
</table>
</div>

<div class="nextcard"></div>
<div class="currentcard">Card 1 of 1</div><br><br>
<div class="currentcard"><a id="carddownload" href="" class="downloadbtn">Download</a></div>
</div>

<div id='loader'><img src="" alt="loader"/></div>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
var $loading = $('loader').hide();
$('download').on('click', function() {
showimage(); 
});
$(document)
.ajaxStart(function () {
$loading.show();
})
.ajaxStop(function () {
$loading.hide();
});
function showimage(){
html2canvas([document.getElementById('card')], {
onrendered: function(canvas)
{
var img = canvas.toDataURL()
$.post("save.php", {data: img}, function (file) {
window.location.href ="downloadbusinesscard.php?path="+ file}); 
}
});
}
</script>
</body>
</html>

I have a form that allows users to create a design for the back of a card. Users enter the title, their name, background colour and upload a small image. This is then displayed back inside a table and looks like a large playing card with a small image in the middle and the text above and below.

I use a fetch array to loop through the results and store them as arrays :

$result = mysql_query("SELECT * FROM tcgbackface JOIN tcgbackfaceimages ON tcgbackface.id = tcgbackfaceimages.id WHERE tcgbackface.username='$user' ORDER BY tcgbackface.id")
or die(mysql_error());
$count = mysql_num_rows($result);
while($row = mysql_fetch_array($result)){
$theme[]= $row['theme'];
$subheading[]= $row['subheading'];
$author[]= $row['author'];
$bgcolour[]= $row['bgcolour'];
$img_paths[] = $row['path'];
}

Then display them back to the user inside a table but when I echo the background colour it doesn't display and the background colour that is set by default in css remains :

<table id="card">
<tr>
<td style="background:<?php echo $bgcolour[$i]; ?>">
</tr>
<tr>
<td><p class="tcg">Trading Card Generator</p></td>
</tr>
<tr>
<td class="tcgnamecell"><?php echo $theme[$i]."<br/> ".$subheading[$i];?></td>
</tr>
<tr>
<td class="tcgimagecell"><?php echo '<img class="imgsize" alt="" src="" />'; ?></td>
</tr>
<tr>
<td><p class="author">Created by <?php echo $author[$i];?></p></td>
</tr>
</table>

http://thetradingcardgenerator.com/images/Predators_Back.png![Display Background Colour?][1]


4 Answers: 

try

style="background-color:<?php echo $bgcolour[$i]; ?>"

--EDIT--

I think your $bgcolour[$i] might be empty or is not a valid Hex value for a color.

--EDIT2--

Try adding a fixe height to your <td> element just to see if its height is equal to 0. because it seems empty.

style="height:50px;background-color:<?php echo $bgcolour[$i]; ?>;"
 

I believe the issue is that your CSS sheet is trumping your Style="" code. To be sure, add the following:

style="background:<?php echo $bgcolour[$i]; ?> !important"
 

Assuming your code you've shown here is your actual code, it's invalid.

<td style="background:<?php echo $bgcolour[$i]; ?>">

has no closing

</td>

It should be

 <td style="background:<?php echo $bgcolour[$i]; ?>"></td>

It's not an issue with needing to use !important, because inline styles will always trump a stylesheet. You won't need to use background-color because CSS is smart enough to know.

Are you storing FFFFFF in the database or just FFFFFF? If you aren't storing the in the database then you'll need to have that in your output.

 

Thank you to everyone for their help. I should have listed the table id style and explained I was using that for styling instead of the td element.

<table id="card" style="background-color:<?php echo $bgcolour[$i]; ?>">