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);
Related
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'm trying to set up a universal navigation bar. I'm using include to import menu.php into index.php. When I do, it works fine; however, when I add something after the menu.php include, the menu's CSS rules carries on.
index.php
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Home | Website</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test</p>
</body>
</html>
menu.php
<head>
<title>Menu | Website</title>
<style>
// menu-only styles...
</style>
</head>
<body>
Home
</body>
<?php return; ?>
You're essentially including an HTML page within an HTML page doing it your way.
To get your CSS to target only your menu, keep it in your style.css file, but make your div have a "menu" class.
Something like this should do what you're looking for, I believe.
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Dare Network | Home</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test</p>
</body>
</html>
style.css
html,body {
padding: 0;
margin: 0;
background-color: #777777;
}
.menu {
/* padding: top&&bottom left&&right; */
padding:10px 0;
background-color: #7786ff;
text-align: center;
}
.menu a {
/* merge transitions into one line to make both functional */
transition: background-color .25s ease-in-out, padding-bottom .25s ease-in-out;
background-color: #b20000;
color: #ffffff;
text-decoration: none;
/* padding:top right bottom left */
padding:10px 10px 5px 10px;
}
.menu a:hover {
background-color: #cc0000;
padding-bottom: 10px;
}
menu.php
<div class="menu">
Home
</div>
This is not a PHP issue
Your CSS in menu.php comes later in the DOM than your actual stylesheet and therefore is being overwritten. Either scope your menu.php styles with some containing element or put your menu CSS code earlier in the DOM (like before style.css)
You are almost a bit closer to what you code. A HTML page can have only one html,head,title,body tag.
Just remove these html,head,title,body tags from menu.php
index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel=stylesheet href="css/style.css" />
<title>Dare Network | Home</title>
</head>
<body>
<?php include 'menu.php'; ?>
<p>Test
</body>
</html>
style.css
html,body {
padding: 0;
margin: 0;
background-color: #777777;
}
menu.php
<style>
body {
padding-top: 10px;
padding-bottom: 10px;
background-color: #7786ff;
text-align: center;
}
a {
transition: background-color .25s ease-in-out;
transition: padding-bottom .25s ease-in-out;
background-color: #b20000;
color: #ffffff;
text-decoration: none;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
a:hover {
background-color: #cc0000;
padding-bottom: 10px;
}
</style>
Home
<?php return; ?>
I was following this tutorial to learn about the include and include_once functions in PHP.
The following files work just fine:
index.php:-
<?php
include_once 'header.php';
echo 'variable';
header.php:-
<h1>My Page's Header</h1>
But when I try to include the following .php file into my index.php, it does not produce the desired result. The header rather overlaps and thus completely hides the 'variable'
What I want is that after I include the header from an external file, My page should start underneath the header. The header included from external file should not be considered included in my page, so none of the elements are overlapped or such. How can I achieve that?
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.top-bar {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding: 5px;
}
.logo {
display: inline-block;
vertical-align: top;
color: white;
}
</style>
</head>
<body>
<div class="top-bar">
<img src="https://www.google.com.pk/images/srpr/logo11w.png" alt="Logo" class="logo" >
</div>
</body>
</html>
<?php
include_once 'header.php';
?>
<div id="parent_div" >
<script>
function getHeaderHeight() {
return document.getElementById("top-bar").height(); //top-bar is in header.php
}
document.getElementById("parent_div").style.padding-top="getHeaderHeight()";
</script>
<h1>Heading</h1>
</div>
That's because your header is set to position: fixed;. It is taken out of the document flow and will follow you as you scroll arround.
When you want it to not stick to the client top, change your css to this:
.top-bar {
position: relative;
background: #000029;
padding: 5px;
}
If you like your header to be fixed, you may also set a padding to the body of the document, that equals the height of your header.
Here you see your current problem: http://jsfiddle.net/Lc3W8/
Solution 1: http://jsfiddle.net/Lc3W8/1/
body
{
margin:0;
padding:0;
height: 3000px;
/*new:*/
padding-top: 30px;
}
.top-bar
{
position: fixed;
left:0;
right:0;
top:0;
height: 30px;
background-color: blue;
}
Solution two: http://jsfiddle.net/Lc3W8/2/
body
{
margin:0;
padding:0;
height: 3000px;
}
.top-bar
{
height: 30px;
background-color: blue;
}
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).
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?>;
}