So lately I've realized I want to make my sites as simple as possible in certain ways, one of them is having as few files as possible. I've looked into linking for CSS-PHP files using query strings, similar to how XenForo does it.
<link rel="stylesheet" href="css.php?css=xenforo,form,public">
Now linking for a file is easy, but how would I add the CSS inside a PHP file without using the style tag? Can I just do something like the block below?
<?php
if(isset($_GET['form'])) {
?>
CSS HERE
<?php
}
?>
Add
<?php
header(Content-type: text/css");
?>
to the top of your php stylesheet.
eg:
<?php
header("Content-type: text/css");
?>
h1 {
color: blue;
}
<html>
<head>
<title></title>
<link rel="stylesheet" href="test.php">
</head>
<body>
<h1>test</h1>
</body>
</html>
Related
I have decided to utilize php with my css for better management. I have it set up so that I can incorporate variables within my "style.php" file and use them for my css code. With that said, I would also like the ability to display these variables through an echo statement. So in my main index, I want to pretty much be able to do "echo $body;" so that I can actually display the css. It will not allow me to do so.
this is my "style.php" file located in the styling folder
<?php
header("Content-type: text/css");
$body = '
background-color:red;<br>
margin:0 auto;<br>
';
?>
body{
<?php echo $body; ?>
}
this is my "index.php" file
<html>
<head>
<link rel="stylesheet" href="styling/style.php" media="screen">
<?php
include 'globals/vars.php';
?>
<title><?php echo $title; ?> - Home</title>
</head>
<body>
</body>
</html>
You are including HTML tags in the CSS. The PHP all works fine, but you don't need a <br> at the end of every line of CSS.
You can either include the CSS php script as inline CSS through an include or you can put the variables in a separate file, include them in your CSS page as well as your main page.
The reason you can't access $body in index.php, is because $body is declared in your CSS file which is never included in your index.php file. Instead, you are referencing the CSS file using HTML which will include only the output of that php script.
Alternatively, you can look into SASS or another CSS pre-processor which supports variables and other features for "easy management".
EDIT: Regarding what Chris just mentioned, if it's new lines in your CSS file that you're after, just use "\r\n" instead of <br>.
Why do you have <br/>in your code, you should use newline \n instead
Style.php:
<?php
header("Content-type: text/css");
include 'globals/vars.php';
?>
body{
<?php echo $body; ?>
}
Index.php:
<html>
<head>
<link rel="stylesheet" href="styling/style.php" media="screen">
<?php
include 'globals/vars.php';
?>
<title><?php echo $title; ?> - Home</title>
</head>
<body>
<?php echo $body; ?>
</body>
</html>
globals/vars.php:
$body = '
background-color:red;
margin:0 auto;
';
This should work, as you're now declaring the variable $body in the same scope that you are using it.
As the question suggests I have an index.php file with html in it and when I try to style it using external or internal css, it doesn't work. But inline css works. By the way I am using xampp on win7 to test the website. And the file structure looks like this c:/xampp/htdocs/test/index.php
Relevant html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width>
<!--<link rel="stylesheet" type="text/css" href="style.css">-->
<!--This css file contains the css shown below as internal css-->
<style>
body{
background-color: blue;
color: white;
}
.header{
color: white;
}
</style>
<?php
function somefuntion(){
/*I will be adding this function later once the html skeleton
is done.
This function will be calculating some numbers based on the
current date and echoing it.*/
}
?>
</head>
<body>
<section class="header">
<p>Spring</p>
</section>
<section class="body">
<p>Hello world</p>
</section>
</body>
</html>
Can someone also explain why internal css is not working?
Solution found by hRdCoder: missing " mark in the content attribute of meta tag.
<link rel="stylesheet" type="text/css" href="style.css"></link>
Only things to check for are that you add the closing tag and that the style.css file is in the same directory as your index.php.
Edit:
I just noticed that in your that you're missing the last set of quotation marks (") in the content attribute. Could that be affecting the rest of the page?
Also make sure you don't include the <style></style> tags in your external css file
Do one thing. open css file through xampp or wampp.. like
open browser -> search localhost/your folder and then open css or js file ,now copy that address and paste in href or src. hope this will help
the answer could be as simple as adding a class or id to the html tag like lets say there is a button tag like this..
<button>open</button>
and the code you wrote on external css is not working but inline does cuz there might be a class or id or the selector itself imposing the code without you knowing it so that's why it might not be working .That's why try adding a class or id to it like this..
<button class="btn">open</button>
<style>
.btn {
background-color:red;
}
</style>
it might just work..
there is something wrong with your path when linking your external css
is your index.php is in the same folder as your style.css?
<link rel="stylesheet" type="text/css" href="style.css">
try to put it in a separate folder named css
then link it as
<link rel="stylesheet" type="text/css" href="css/style.css">
you can also use firebug plugins for firefox or firebug lite plugin for chrome to check the errors
I have a php file that doesn't (for now) use any php code, that holds code for the header and main menu that will be used across all pages. The CSS file has no effect, even though I've created a style class for h1. The text "TEST" shows up, but the style is not applied. How do I properly include the CSS file?
mainMenu.php
<!--This code is included within the <head> of each page, and the stylesheet for the header and main menu are included here-->
<link href="styles/headerMenu.css" ref="stylesheet" type="text/css">
<!--Header and menu code-->
<div>
<h1>TEST</h1>
</div>
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>untitled</title>
<?php include ('./includes/mainMenu.php') ?>
</head>
<body>
</body>
</html>
The CSS file is not found. Double check the link and correct it:
<link href="menu.css" rel="stylesheet" type="text/css">
^- REL not REF
Also to prevent additional problems, remove the start and end tags of <head> and <body> from the code. The way you output the HTML elements, you would create wrong HTML if you keep those tags. Remove them and your page will be valid HTML again.
index.php:
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title>untitled</title>
<?php include ('menu.php') ?>
</html>
Valid HTML has the benefit that you can run it through a validator to spot errors early.
I think it may be because you have got your menu appearing inside your <head> tag.
The CSS needs to go inbetween the <head> and </head> but the rest needs to be inside the <body> tag
<link href="styles/headerMenu.css" rel="stylesheet" type="text/css">
This must be at <HEAD></HEAD>
<div>
<h1>TEST</h1>
</div>
This must be at <BODY></BODY>
You have to separate this file into 2 files and include them in Head and in Body..
Don't include your HTML code in HEAD part. Only include CSS and JavaScript files in HEAD section. and you need to prefix the css or images path in some php file.
E.g.
create new php file with name "conn_path.php"
<?php
define('SITE_PATH',$_SERVER['DOCUMENT_ROOT'].'siteName/');
define('SITE_HTTP_PATH','http://localhost/'siteName/');
define('CSS_PATH','http://localhost/siteName/styles/');
define('IMAGE_PATH','http://localhost/siteName/images/');
?>
And then you path will be like below:-
mainMenu.php
<?php include "conn_path.php" ?>
<link href="<?php echo CSS_PATH ;?>headerMenu.css" rel="stylesheet" type="text/css">
It will help you in whole project…
Create a template file, with your essential (and re-used) html. Also with <html>, <head> and <body> tags and anything you must have in all pages – As your stylesheets and menu.
Then add a content section with a single variable.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>untitled</title>
<link href="styles/headerMenu.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--Header and menu code-->
<div>
<h1>TEST</h1>
</div>
<?php echo $page_content; ?>
</body>
</html>
This way, any page content shoud be assigned to $page_content instead of echoed.
I have an .html file with a login form and wish to recreate it and save it as a .php file. However, I'm encountering difficulties with setting the background image and other CSS related stuff.
Below is my code for the .php which I'm sure it won't provide guidance to answering my question, but I don't know where to start. I've checked W3schools and many other sites.
A great start to helping me out would on how I would include a .CSS file in .PHP file. Perhaps giving me the a quick source code example. Also, the code to set a fixed background
image would be amazing.
<?php
$url = 'C:\Users\George\Documents\HTML\bg.jpg';
?>
<html lang="en">
<head>
<title>This is a test</title>
<style type="text/css">
body
{
background-image:url('<?php echo $url ?>');
}
</style>
</head>
<body>
<p>This is a test.</p>
</body>
</html>
I found my answer.
<?php
$profpic = "bg.jpg";
?>
<html>
<head>
<style type="text/css">
body {
background-image: url('<?php echo $profpic;?>');
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hey</title>
</head>
<body>
</body>
</html>
It's not a good coding to put PHP code into CSS
body
{
background-image:url('bg.png');
}
that's it
Your question doesn't have anything to do with PHP... just CSS.
Your CSS is correct, but your browser won't typically be able to open what you have put in for a URL. At a minimum, you'll need a file: path. It would be best to reference the file by its relative path.
You should consider have other php files included if you're going to derive a website from it. Instead of doing all the css/etc in that file, you can do
<head>
<?php include_once('C:\Users\George\Documents\HTML\style.css'); ?>
<title>Title</title>
</hea>
Then you can have a separate CSS file that is just being pulled into your php file. It provides some "neater" coding.
I have googled a lot but it seems that I am doing something wrong.
I want to do this:
<?php
include 'header.php';
include'CSS/main.css';
...
?>
However, my page prints the CSS code.
Note: I want to use PHP to include the CSS file, and not use
I also do you want to rename my CSS file to a PHP file as some website mentioned.
Any clues?
Many thanks.
You have to surround the CSS with a <style> tag:
<?php include 'header.php'; ?>
<style>
<?php include 'CSS/main.css'; ?>
</style>
...
PHP include works fine with .css ending too. In this way you can even use PHP in your CSS file. That can be really helpful to organize e.g. colors as variables.
You are including the CSS code as text in your PHP page. Why not just link it in the traditional fashion?
<link rel="stylesheet" href="CSS/main.css" type="text/css">
you can use:
<?php
$css = file_get_contents('CSS/main.css');
echo $css;
?>
and assuming that css file doesn't have it already, wrap the above in:
<style type="text/css">
...
</style>
To use "include" to include CSS, you have to tell PHP you're using CSS code. Add this to your header of your CSS file and make it main.php (or styles.css, or whatever):
header("Content-type: text/css; charset: UTF-8");
This might help with some user's connections, but it theoretically (read: I haven't tested it) adds processor overhead to your server and according to Steve Souder, because your computer can download multiple files at once, using include could be slower. If you have your CSS split into a dozen files, maybe it would be faster?
Steve's blog post: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Source: http://css-tricks.com/css-variables-with-php/
<?php
define('CSSPATH', 'template/css/'); //define css path
$cssItem = 'style.css'; //css item to display
?>
<html>
<head>
<title>Including css</title>
<link rel="stylesheet" href="<?php echo (CSSPATH . "$cssItem"); ?>" type="text/css">
</head>
<body>
...
...
</body>
</html>
YOUR CSS ITEM IS INCLUDED
This is an older post, however as the info is still relevant today an additional option may help others.
Define a constant for the file path per Stefan's answer. The
definition can be placed at the top of the PHP page itself, or within
an included/required external file such as config.php.
(http://php.net/manual/en/function.include.php)
Echo the constant in PHP tags, then add the filename directly after.
That's it!
Works for other linked files such as JavaScript as well.
<?php
define('CSS_PATH', 'template/css/'); //define CSS path
define('JS_PATH', 'template/js/'); //define JavaScript path
?>
<!-- Doctype should be declared, even in PHP file -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="<?php echo CSS_PATH; ?>main.css">
<script type="text/javascript" src="<?php echo JS_PATH; ?>main.js"></script>
</head>
<body>
</body>
</html>
If you want to import a CSS file like that, just give the file itself a .php extension and import it anyway. It will work just fine :)
You can also do the following:
Create a php file in includes folder, name it bootstrap_css.php for example
paste the css code files to file created above
<?php
$minCss=' <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">';
$business = '<link href="bootstrap/css/modern-business.css" rel="stylesheet">';
echo $minCss;
echo $business;
?>
in the html header, include the css files as follows
<?php include_once 'includes/bootstrap_css.php'; ?>
You could do this
<?php include("Includes/styles.inc"); ?>
And then in this include file, have a link to the your css file(s).
I don't know why you would need this but to do this, you could edit your css file:-
<style type="text/css">
body{
...;
...;
}
</style>
You have just added here and saved it as main.php. You can continue with main.css but it is better as .php since it does not remain a css file after you do that edit
Then edit your HTML file like this. NOTE: Make the include statement inside the tag
<html>
<head>
<title>Sample</title>
<?php inculde('css/main.css');>
</head>
<body>
...
...
</body>
</html>
I solved a similar problem by enveloping all css instructions in a php echo and then saving it as a php file (ofcourse starting and ending the file with the php tags), and then included the php file.
This was a necessity as a redirect followed (header ("somefilename.php")) and no html code is allowed before a redirect.
Just put
echo "<link rel='stylesheet' type='text/css' href='CSS/main.css'>";
inside the php code, then your style is incuded. Worked for me, I tried.
This is the format of what I have which works:
<head>
<title>Site Title</title>
<?php include 'header.php'; ?>
</head>
Inside my header.php I have:
<!doctype html>
<html class="no-js" lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="assets/images/icon/favicon.ico">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
The file name must be something other than a .CSS index. Write the following:
<link rel="stylesheet" href="style.css" type="text/css" />
The best way to do it is:
Step 1:
Rename your main.css to main.php
Step 2: in your main.php add
<style> ... </style>
Step 3: include it as usual
<?php include 'main.php'; ?>
That is how i did it, and it works smoothly..
_trace its directory, I guess
echo css('lib/datatables_rqs/jquery.dataTables.css');