Im using php to display data from mysql. Here are my css statements:
<style type=”text/css”>
table {
margin: 8px;
}
th {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
background: #666;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
border: 1px solid #000;
}
td {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
border: 1px solid #DDD;
}
</style>
They are used for displaying table, tableheader, tabledate.
Im new to php css, so im just wondering how to use the above css style in php displaying codes:
<?php>
echo "<table>";
echo "<tr><th>ID</th><th>hashtag</th></tr>";
while($row = mysql_fetch_row($result))
{
echo "<tr onmouseover=\"hilite(this)\" onmouseout=\"lowlite(this)\"><td>$row[0]</td> <td>$row[1]</td></tr>\n";
}
echo "</table>";
<?>
I guess you have your css code in a database & you want to render a php file as a CSS. If that is the case...
In your html page:
<html>
<head>
<!- head elements (Meta, title, etc) -->
<!-- Link your php/css file -->
<link rel="stylesheet" href="style.php" media="screen">
<head>
Then, within style.php file:
<?php
/*** set the content type header ***/
/*** Without this header, it wont work ***/
header("Content-type: text/css");
$font_family = 'Arial, Helvetica, sans-serif';
$font_size = '0.7em';
$border = '1px solid';
?>
table {
margin: 8px;
}
th {
font-family: <?=$font_family?>;
font-size: <?=$font_size?>;
background: #666;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
border: <?=$border?> #000;
}
td {
font-family: <?=$font_family?>;
font-size: <?=$font_size?>;
border: <?=$border?> #DDD;
}
Have fun!
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language.
more info : http://en.wikipedia.org/wiki/Cascading_Style_Sheets
CSS is not a programming language, and does not have the tools that come with a server side language like PHP. However, we can use Server-side languages to generate style sheets.
<html>
<head>
<title>...</title>
<style type="text/css">
table {
margin: 8px;
}
th {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
background: #666;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
border: 1px solid #000;
}
td {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
border: 1px solid #DDD;
}
</style>
</head>
<body>
<?php>
echo "<table>";
echo "<tr><th>ID</th><th>hashtag</th></tr>";
while($row = mysql_fetch_row($result))
{
echo "<tr onmouseover=\"hilite(this)\" onmouseout=\"lowlite(this)\"><td>$row[0]</td> <td>$row[1]</td></tr>\n";
}
echo "</table>";
?>
</body>
</html>
Just put the CSS outside the PHP Tag. Here:
<html>
<head>
<title>Title</title>
<style type="text/css">
table {
margin: 8px;
}
</style>
</head>
<body>
<table>
<tr><th>ID</th><th>hashtag</th></tr>
<?php
while($row = mysql_fetch_row($result))
{
echo "<tr onmouseover=\"hilite(this)\" onmouseout=\"lowlite(this)\"><td>$row[0]</td> <td>$row[1]</td></tr>\n";
}
?>
</table>
</body>
</html>
Take note that the PHP tags are <?php and ?>.
Try putting your php into an html document:
Note: your file is not saved as index.html but it is saved as index.php or your php wont work!
//dont inline your style
<link rel="stylesheet" type="text/css" href="mystyle.css"> //<--this is the proper way!
//save a separate style sheet (i.e. cascading style sheet aka: css)
I didn't understood this Im new to php css but as you've defined your CSS at element level, already your styles are applied to your PHP code
Your PHP code is to be used with HTML like this
<!DOCTYPE html>
<html>
<head>
<style>
/* Styles Go Here */
</style>
</head>
<body>
<?php
echo 'Whatever';
?>
</body>
</html>
Also remember, you did not need to echo HTML using php, simply separate them out like this
<table>
<tr>
<td><?php echo 'Blah'; ?></td>
</tr>
</table>
Absolute easiest way (with your current code) is to add a require_once("path/to/file") statement to your php code.
<?php
require_once("../myCSSfile.css");
echo "<table>";
...
Also, as an aside: the opening <?php tag does not have a > on the end, and the closing ?> php tag does not start with <. Weird, but true.
You can also embed it in the php. E.g.
<?php
echo "<p style='color:blue; border:2px red solid;'>CSS Styling in php</p>";
?>
hope this help for anyone in the future.
I don't know this is correct format or not. but it can solved my problem with removing type="text/css" when insert css code in html/tpl file with php.
<style type="text/css"></style>
become
<style></style>
Example
css :hover kinda is like js onmouseover
row1 {
// your css
}
row1:hover {
color: red;
}
row1:hover #a, .b, .c:nth-child[3] {
border: 1px solid red;
}
not too sure how it works but css applies styles to echo'ed ids
I had this problem just now and I tried the require_once trick, but it would just echo the CSS above all my php code without actually applying the styles.
What I did to fix it, though, was wrap all my php in their own plain HTML templates. Just type out html in the first line of the document and pick the suggestion html:5 to get the HTML boilerplate, like you would when you're just starting a plain HTML doc. Then cut the closing body and html tags and paste them all the way down at the bottom, below the closing php tag to wrap your php code without actually changing anything. Finally, you can just put your plain old link to your stylesheet into the head of your HTML. Works just fine.
This is the easiest:
require_once("../myCSSfile.css");
as elbrant mentioned.
I had to add <style> at beginning of myCSSfile.css and </style> at the end (normally not needed in a CSS file).
Related
I want to add CSS that is dependent on some PHP variables in the code that is generated before a WP_Query loop. Basically I want to use uniqid and apply the ID to some elements and then add some media query rules for these elements, possibly as <style> tags. I've tried the following, but I'm not sure if style tags that are put in the <body> are ignored or not since this is not working.
$id = uniqid();
<style>
#<?php echo $id; ?> {
background: red!important;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
}
</style>
The tag is placed in the DOM, but it's ignored. So I'm either looking for a way to put CSS that is generated in the template, in the <head>. Or any other method for adding CSS other than inline on the element itself, since I can't use media queries that way. Just to be clear, the code above is put inside a loop, as I need the meta values from the post in order to generate the CSS.
Or is this just stupid?
Placing <style> tags within the <body> of your document is technically invalid, but in practice will work almost everywhere.
The problem I suspect you're running into is: the return value of uniqid() may begin with a number, and CSS identifiers cannot begin with numbers. So, if you generate an ID like "4b3403665fea6", your CSS might look okay, but it will be ignored.
You can fix this by passing a prefix to your call to uniqid(), like so:
$id = uniqid('id-');
...so that $id will be a value like "id-4b3403665fea6".
Sample demonstrating in-body <style>
<head>
<style>
#id-4b3403665fea6 {
background: blue;
}
</style>
</head>
<body>
<h1>Test</h1>
<div id='id-4b3403665fea6'>Style me!</div>
<style>
#id-4b3403665fea6 {
background: red!important;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
}
</style>
</body>
Note that the <div> winds up with a red background, not blue like the <head> style specifies.
Hope this will help you.
<?php
$id = uniqid('cnt-');
?>
<style>
#<?php echo $id; ?> {
background: red!important;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
}
</style>
<div id="<?php echo $id; ?>">Test Content</div>
i'm trying to export a data-table with mpdf and cannot get to work css-borders, i already tried a lot of things...
I also tried to apply borders for testing on a heading in this simple example:
<?php
require_once('vendor/autoload.php');
ob_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
#media(print)
{
h1
{
font-size: 16px;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,1);
}
table
{
width: 100%;
font-size: 13px;
border: none;
}
td
{
border: 1px black solid;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,1);
}
}
</style>
</head>
<body>
<h1>
Headline
</h1>
<table>
<tr>
<td>blabla</td>
<td>blabla</td>
<td>blabla</td>
</tr>
</table>
</body>
</html>
<?php
$content = ob_get_clean();
$mpdf = new \Mpdf\Mpdf();
$mpdf->SetHTMLFooter('<div class="footer"><span class="pagenum">Seite: {PAGENO} / {nbpg}</span></div>');
$mpdf->WriteHTML($content);
$mpdf->Output();
I also tried to put the css into a external stylesheet or apply it inline, but no success..
(Latest mpdf version installed via Composer)
The strange thing tough is that the font-size and background-styles are being applied o.O
Is there anything i missed?
Update:
I've updated the code, tried to apply box-shadows too, they are applied to the h1, but not the td-elements.. also it seems not a really clean solution for tables...
Correct CSS border definition as per specificaton is <br-width> || <br-style> || <color>
Code works as expected in mPDF when the CSS definition is
td {
border: 1px solid black;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/border
So far as I am dropping some lines, there is still something wrong with MPDF when dealing with table borders.
When you style <td> and add border there, what you can see in the output is just border left and border right, and no border top and border down. For me, so as to bypass the problem, I styled both <tr> and <td> to get all the borders, that is the top, bottom, right, and left borders. I just shared my solution in case someone would find it useful.
table td, table th, table tr {
border: 1px solid #c9c9c9 !important
}
http://code.stephenmorley.org/php/diff-implementation/#styling
I am following above link to test code.
I have put them together but in the browser but I am not seeing any nice color table just like author mentioned. I don't know how to include style code any idea on how to do that?
index.php
<?php
// include the Diff class
require_once './class.Diff.php';
// output the result of comparing two files as plain text
echo Diff::toTable(Diff::compareFiles('/tmp/foo1', '/tmp/foo2'));
?>
You need to include CSS on your page, either by embedding it in the <head> or by linking to an external stylesheet.
<!DOCTYPE html>
<html>
<head>
<!-- external CSS -->
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- embedded CSS -->
<style type="text/css">
.diff td {
vertical-align: top;
white-space: pre;
white-space: pre-wrap;
font-family: monospace;
}
</style>
</head>
<body>
...
The link you provided gives an example of the minimum CSS needed for each td:
.diff td {
vertical-align: top;
white-space: pre;
white-space: pre-wrap;
font-family: monospace;
}
It also explains what classes you can style: diffUnmodified, diffDeleted, diffInserted, and diffBlank.
This is the CSS from the example page you linked:
.diff td {
padding :0 0.667em;
vertical-align: top;
white-space: pre;
white-space: pre-wrap;
font-family: Consolas,'Courier New',Courier,monospace;
font-size: 0.75em;
line-height: 1.333;
}
.diff span {
display: block;
min-height: 1.333em;
margin-top: -1px;
padding: 0 3px;
}
* html .diff span {
height: 1.333em;
}
.diff span:first-child {
margin-top: 0;
}
.diffDeleted span {
border: 1px solid rgb(255,192,192);
background: rgb(255,224,224);
}
.diffInserted span {
border: 1px solid rgb(192,255,192);
background: rgb(224,255,224);
}
I am no beginner with HTML and CSS... but I am with PHP. I have a very tiny dynamically generated PHP page that creates a table and fills it with numbers. The CSS is working on random items, very weirdly and I'm not sure what is going on. The <body> tag CSS is not working at all. Not one property is being affected by it. The table.temps css is not working either, but if I remove it, then the <th> tag looses its styling. This is for a homework assignment and I know it's an easy fix, I've just been having the worst time with CSS and PHP lately.
It's all one page, and its relatively small, so here is the document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Lab 1</title>
<style type="text/css">
<!-- Declare document <body> styles -->
body{
background-color: #9FDBFF;
color: #333;
font-family: Helvetica, sans-serif;
font-size: .8em;
height: 100%;
width: 100%;
}
<!-- Declare document table styles -->
table.temps {
width: 50%;
height: auto;
min-height: 400px;
border: 2px solid black;
color: #333;
}
th {
background: blue;
color: #FFF;
height: 20px;
width: 100px;
}
.colorIt {
background-color: #CCC;
}
</style>
</head>
<body>
<?php
$intTableTotalWidth = 8;
$intTableTotalHeight = 8;
$intCount = 1;
print("<table class='temps'>");
print("<th>Farenheight</th>");
print("<th>Celcius</th>");
for ($intHeight = 0; $intHeight < $intTableTotalHeight; $intHeight++) {
print("<tr>");
for ($intWidth = 0; $intWidth < $intTableTotalWidth; $intWidth++) {
if ($intCount % 2 == 0){
print("<td class='colorIt'>" . $intCount ."</td>");
}
else {
print ("<td>" . $intCount . "</td>");
}
$intCount++;
}
print("</tr>");
}
print("</table>");
?>
</body>
</html>
EDIT: My fault people, I didn't even realize I was using HTML comments in the CSS. It's internal CSS so the CSS comments don't change color in the HTML document which was throwing me off. I fixed the issue. I appreciate your input!
You are using html comments in the style tag. This is not allowed. You should never use html comments in style and script tags.It's not allowed. Remove them and it will all work.
remove these lines
<!-- Declare document <body> styles -->
<!-- Declare document table styles -->
Your <th> tags should be embeded in <tr> tags: <tr><th>col1</th><th>col2</th></tr>.
You are outputing more cells / row than columns defined with <th>. If you want a <th> to contain two columns, you should use <th colspan="2">col1</th>.
much easier sollution: have session_start() at begining of .php file, put all your theme in a array and later, include stylesheet
session_start()
$theme=array("links"=>"#ff0000", "bkg"=>"#00ff00");
$_SESSION["Theme"]=$theme;
...
<link rel="stylesheet" type="text/css" href="default.php">
and your stylesheet look like this:
default.php
<?php session_start();
if (isset($_SESSION["Theme"])) {
extract($_SESSION["Theme"]);
header("Content-type: text/css");
} else {
// this part is for proper coloring the file, editor will see <style>
// but when loaded from main file <style> will be discarded
?>
<style>
<?php } ?>
a {
color:<?=$links?>;
}
body {
background-color: <?=$bkg?>;
}
I have a few pages which I'd like to have the same background across, so I figured an external style sheet would be the way to go. However, the background changes depending on the time of day, so I had to mix some PHP into the CSS. So now I have a file, background.php:
<html>
<style type="text/css">
body
{
background-image: url('<?php echo (day() == 1 ? 'images/day_sheep.jpg'
: 'images/night_sheep.jpg'); ?>');
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: silver
}
a {text-decoration:none;}
a:link {color:#ff0000;}
a:visited {color:#0000FF;}
a:hover {text-decoration:underline;}
</style>
</html>
Which is being called from two different pages. One page works perfectly fine, but the other page completely broke when I added the line require_once 'background.php', by which I mean nothing displays at all anymore. The offending page is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Penelope's Conquests</title>
<?php require_once 'background.php'; ?>
<style type="text/css">
table {
margin: 10px;
margin-left: 50%;
margin-right: 50%;
padding: 12px;
border: 10px;
text-align: center;
background-color: #fffb40;
border-style: ridge;
border-collapse: separate;
border-color: #9c6ad6;
outline-style: inset;
}
td.cap {
text-transform: capitalize;
font-variant: small-caps;
}
td.str {
font-weight: bolder;
font-size: 1.4em;
}
</style>
</head>
<body>
<h2>To date, Queen Penelope has destroyed:<br /><br /></h2>
<?php
require_once 'victims.php';
require_once 'mysqlSheep.php';
echo '<table border="3"
frame="box"
cellpadding="5">
<caption>Penelope\'s Victims.</caption>
<tr><th>Victim</th><th>Times Zapped</th>';
$hits = mysql_query("
SELECT *
FROM victims
ORDER BY amount
");
if( $hits )
{
while( $row = mysql_fetch_array($hits) )
{
echo '<tr><td class="cap">'.$row['victim'].'</td>
<td>'.$row['amount'].'</td></tr>';
}
}
else
{
echo '<p>' . mysql_error() . '</p>';
}
echo '</tr></table><br /><br />';
echo '<table border="3"
frame="box"
cellpadding="5">
<caption>Button Clicks.</caption>
<tr><th>Hour of day</th><th>Times Clicked</th>';
$time = mysql_query("
SELECT *
FROM time
ORDER BY hits
");
while( $row = mysql_fetch_array($time) )
{
print "<tr><td class='str'>".$row['hour']."</td>";
print "<td>".$row['hits']."</td></tr>";
}
?>
</body>
</html>
Why doesn't the page want to behave with the style sheet?
Another option is to attach your css file with the <link> attribute.
So in your background.php place
<?php
header("Content-type: text/css");
?>
body
{
background-image: url('<?php echo (day() == 1 ? 'images/day_sheep.jpg'
: 'images/night_sheep.jpg'); ?>');
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: silver
}
a {text-decoration:none;}
a:link {color:#ff0000;}
a:visited {color:#0000FF;}
a:hover {text-decoration:underline;}
And then call it using
<link rel="stylesheet" type="text/css" href="background.php" />
Placing this in 1 answer would get messy which is why I've added another one.
You've got an <html> tag inside your PHP stylesheet, which means you will get duplicate <html> tags.. not nice
Remove that and just use the <style> tags..
background.php
<style type="text/css">
body
{
background-image: url('<?php echo (day() == 1 ? 'images/day_sheep.jpg'
: 'images/night_sheep.jpg'); ?>');
background-position: 50% 50%;
background-repeat: no-repeat;
background-color: silver
}
a {text-decoration:none;}
a:link {color:#ff0000;}
a:visited {color:#0000FF;}
a:hover {text-decoration:underline;}
</style>
Ohhh, the issue is that the function day() is defined in a separate file, I forgot to move it over when I was reorganizing the site.
Come on Marko, it was super fantastic script!!! I used your way in order to set custom width inside an external css file and it works great.
I do all php stuff if needed any in here:
<?php
header("Content-type: text/css");
$width= $_COOKIE['scr_width']-10;
?>
then I use the variables below inside the css file like this:
width:<?PHP echo $width."px;";?>
and I have done the include like this:
<head>
<link rel="stylesheet" href="<?PHP echo myLocVars::$mySpacePath."style.php";?>">
</head>
Including CSS can be very tricky because unfortunately it doesn't throw an error (at least I don't know how to..), and it can be a trouble. That's why I give the full path because it is a local CSS included by a local file included itself from index.php.
If you are testing your site on localhost, then try
require_once(dirname(background.php) . "/background.php");
instead of require_once(background.php);