php - Changing Table Background Colour With Value Stored in DB Table Field?
Question
UPDATE. Table id styling :
#card {
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="styles/all.css" />
<link rel="stylesheet" href="styles/formbacks.css" />
<link rel="stylesheet" href="styles/slideshow.css" />
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<link href='//fonts.googleapis.com/css?family=Economica:700,400italic' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Voltaire' 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="index.php">Trading Card Generator</a></p>
<p class="disclaimer">DC vs Marvel <br />
Card Back Face<br />
This is a non profit website.</p>
<ul id="navigation">
<li><a href="#">create</a><ul>
<li><a href="backfacecreate.php">back face</a></li>
<li><a href="bcardscreate.php">business</a></li>
<li><a href="comicscreate.php">comics</a></li>
<li><a href="predatorscreate.php">predators</a></li>
<li><a href="tenniscreate.php">tennis</a></li>
</ul></li>
<li><a href="#">edit</a><ul>
<li><a href="backfaceedit.php">back face</a></li>
<li><a href="bcardsedit.php">business</a></li>
<li><a href="comicsedit.php">comics</a></li>
<li><a href="predatorsedit.php">predators</a></li>
<li><a href="tennisedit.php">tennis</a></li>
</ul></li>
<li><a href="register.php">register</a><ul>
</ul></li>
<li><a href="#">themes</a><ul>
<li><a href="backfacedisplay.php">back face</a></li>
<li><a href="bcardsdisplay.php">business</a></li>
<li><a href="comicsdisplay.php">comics</a></li>
<li><a href="predatorsdisplay.php">predators</a></li>
<li><a href="tennisdisplay.php">tennis</a></li>
</ul></li>
<li><a href="logout.php">logout</a></li>
<li><a href="contact.html">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 & Villains</td>
</tr>
<tr>
<td class="tcgimagecell"><img class="imgsize" alt="" src="uploads/Darkseid.png" /></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="#card" class="downloadbtn">Download</a></div>
</div>
<div id='loader'><img src="images/ajax-loader.gif" alt="loader"/></div>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var $loading = $('#loader').hide();
$('#carddownload').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="'.$img_paths[$i].'" />'; ?></td>
</tr>
<tr>
<td><p class="author">Created by <?php echo $author[$i];?></p></td>
</tr>
</table>
4 answers
solution1
0 ACCPTED 2014-08-01 19:00:14
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]; ?>;"
solution2
0 2014-08-01 19:04:18
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"
solution3
0 2014-08-01 19:11:33
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.
solution4
0 2014-08-01 20:42:12
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]; ?>">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.