I have a index PHP page where I include all PHP files like index.php?page=example. All pages are in another folder, here is the structure:
public_html/index.php
public_html/css/style.php
public_html/pages/
Index calls the CSS file from css/style.php.
Pages are called from index.php like (include pages/example.php) using GET function.
If I run index.php I get no problems with CSS, if I run only the included page like example.php I get CSS problems because the CSS is in index.php and obviously will not show the CSS correct.
But when I run the index.php and include the index.php?page=example then the index CSS show correct but the classes from the included pages does not work...
I suppose the include will only import the code but it seems like something is wrong with the server or I am doing something wrong?
Here is a example code of what I am using. This is index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<?php
include('pages/example.php');
?>
</body>
</html>
Index.php all css classes works fine but the style class from the included pages does not work they are just not styled
You shouldn't write your css code in a php file. Better create a css file and put your style directives in there. You can include css styles best by following conventions, create a basic html template like the following and link to your css file and include the php in there.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="part/to/file.css"> <!-- link your stylesheet here -->
</head>
<body>
<?php
include('path/to/file.php'); // include your php code here
?>
</body>
</html>
Make sure you have header("Content-type: text/css"); as your first line in php file so it renders correctly as css. Then do not include the file. Instead refrence to it like a normal css file only change the .css to .php. <link rel="stylesheet" href="part/to/file.php">. That should get you working. I am assuming your pulling data from a database to fill in your css, so make sure it is format correctly. Do not use something like .headertext{
color:<?=$row['headercolor'];?>; . Instead declare it in php tags. $color= $row['headercolor']; . Then in css part of php file call that variable. .headertext{
color:<?=$headercolor?>;. Hope that helps
Related
Recently I've been trying to do php includes for my html page.
I made the php file in Dreamweaver which looks like this
<li>Home</li>
<li>About</li>
<li>Contact</li>
filename: nav.php
Then I tried to include it inside my main html page:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<ul class="nav"><?php include("nav.php");?></ul>
</body>
</html>
filename: index.html
I also want to use css to style my php include, how do I do that?
Any help would be appreciated.
Here is the steps/structure you should follow.
1) Your file which needs to be included which you have given a name "nav.php" which is correct.
2) Your main file should also be php file. For eg. it's name should be something like "MyMain.php"
3) As you want to apply css. You can include external css in your main file (here i.e MyMain.php). Or else you can also write css in the same file (MyMain.php) in <style></style> tag.
To load or "include" CSS you can add this in your header:
<link rel="stylesheet" href="style.css" />
I'm building a site that allows users to make games within it. I wanted to know if the in the main .html file, could I have a set file that has all the scripts and stylesheets and then link that file in my main .html file? It's kind of like:
index.html
<head>
<link rel="???package???" href="package.php">
<title>Make a Game!</title>
</head>
package.php
<head>
<link rel="stylesheet" href="standard.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
... etc ...
</head>
My main reason for doing it in PHP is so I can control if the current developer is premium or not and if they are, give them a couple more libraries to work with.
looks like you just want to include one file in another so :
include 'package.php';
is all you need, remove the <head> </head> as you don't want them twice
You can use ajax you have to read that file with AJAX and set the output of ajax wherever you want in your html.
But for that you have to echo your whole php file.
I have a small PHP website with most of my pages of the form:
<?php include("heading.php"); ?>
<!-- Content of the page -->
<?php include("footing.php"); ?>
Where "footing" contains some stuff to put at the end of each file and "heading" a lot of stuff (including another include for the menu). The problem is: I'm starting to have a lot of php file sand I would like to put some of them in folders. The straightforward way to do it is to change the code for the files in the folder to:
<?php include("../heading.php"); ?>
<!-- Content of the page -->
<?php include("../footing.php"); ?>
But it doesn't work as the include literately copy the code instead of executing it in the original file's folder, so any include and css in heading.php won't be found unless I copy those files in the new folder.
Modify heading.php so that the paths to the files it loads are absolute. For example, if you load a CSS file from css/style.css use /css/style.css or http://example.com/css/style.css instead.
You also can edit the include path, either in php.ini or directly in your code:
//Must be called before every include, if not stated in your php.ini
$PATH=get_include_path();
set_include_path($PATH.":/absolute/path/to/your/include/folder/");
Then you can use your include this way, even if you are in a sub directory:
<?php
include "heading.php"; //no brackets
include "whatever.php";
?>
It sounds like you are just losing track of where you are in your directory structure. Using ../ takes you back one level and using ./ (or just /) takes you back to the root directory and ../../ takes you back two levels.
The trick is to know where you are in the directory structure and where the file is that you want to include. If you are including or linking to a file in your css folder but you are in a file that is located in the inc folder you have to go back to the root and then to css so you would put /css/filename.ext
However, if you are in the fonts/glyphicons folder and want to link to a font in the fonts/font-awesome folder you could just use ../font-awesome. Clear as mud?
What I do is create three (or more) folders. This helps keep the various files organized and with abbreviated lettering, namely:
css (for stylesheets like bootstrap.css, style.css, etc.)
img (for images, graphics, icons, etc.)
font (for fonts, glyphicons, font-awesome, etc.)
inc (for includes/'snippets' like your heading.php and footing.php)
js (for javascripts such as html5shiv.js, boostrap.js, etc.)
Then in my heading.html file (I use html for the header and footer) I include some items like so:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><?php echo $page_title; ?></title>
<meta name="Description" content="<?php echo $page_description; ?>">
<meta name="Keywords" content="<?php echo $page_keywords; ?>">
<meta name="Author" content="<?php echo $author_name; ?>">
<meta name="Viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="/css/quicksite-redsand.css" rel="stylesheet">
<link href="/img/mm.png" type="image/x-icon" rel="shortcut icon">
<!--[if lt IE 9]><script src="/js/html5shiv.js"></script>
<script src="/js/respond.min.js"></script><![endif]-->
</head>
<body>
Then in my pages such as the index.php (homepage) I set up some parameters for that particular page plus include some snippets such as header, menu(s), other body text items, and footer, like so:
<?php
$page_name = 'Homepage';
$page_author = 'My Name...';
$page_keywords = 'home, home page, homepage';
$page_description = 'This is the home page for the ...';
$active_home = 'class="active"';
$select_home = 'class="selected"';
include ('inc/config.php'); //common to all pages
include ('inc/header.html'); //common to all pages
include ('inc/menus.html'); //common to all pages
include ('inc/banner.html');
include ('inc/review.html');
include ('inc/footer.html'); //common to all pages
?>
Since in your index.php and probably most of your pages you are at root level, in the home directory so to speak, you only need inc without the /. Looks like PHP doesn't like unnecessary /'s as it gave me an error when I tried...
I know this is a long winded answer but thought I would illustrate for better understanding.
Ok not strictly an answer to your question, but try doing it the other way, have a layout file which has the header and footer included and include the main bit of content dynamically.
<html>
<head></head>
<body>
etc...
<?php include_once '/path/to/content.php'; ?>
etc...
</body>
</html>
I am not sure if I understand your problem properly , but I have the following answer
I think you should use relative css paths to your website address
for example if we have a css file it should be like that
<link ...src="/styles/somecss.css">
so where ever you put it in your application this would take the path
http://wesiteaddres/style/somecss.css
and you can set your include path to whatever directory you want
set_include_path() ;
Hope this would help
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');
I have menu.php, and in the <head> section of menu.php, I have menu.css as a link rel tag of course, both of which work perfectly fine.
Since menu.php is a 'menu', I've required it on pages that need a 'menu' in order to navigate around the website. However, whenever I require menu.php on a page that has its own CSS stylesheet, menu.php inherits the <body> font-size of the other stylesheet.
Here is what I'm trying to say: So if I require menu.php on profile.php, menu.php elements will become the size of profile.css, instead of what they really ought to be(menu.css). How can I fix the following problem? Currently, I am requiring menu.php BEFORE the <html> tag.
Should I put this within <head>? Somewhere else?
Thank you.
Some of the code from menu.php:
<html>
<head>
<link rel="stylesheet" type="text/css" href="menu.css" />
</head>
<body>
</body>
</html>
I've put my PHP code before the <html> tag in the file above.
The below code comes from main.php:
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
If I understand you correctly, you include a complete html page generated by menu.php before the html in main.php. That would get you 2 <html> sections, 2 <body> sections, etc. in one document. That should lead to lots of trouble.
You should include your menu in for example a div inside the main page like (just an example):
main.php:
<body>
<div id="nav">
<?php require 'menu.php'; ?>
</div>
...
</body>
and put all menu styles in the main style-sheet, pre-fixed with #nav. Or as a separate style-sheet, but still pre-fixed with #nav (every style) so that they overwrite the main document's styles.
Could you paste the content of your menu.php? Because if there are and section there...you're doing it wrong, because in that way you're going to have two head and two body parts. Think for require in php as copy and paste.
Your options:
Migrate to some template system(as Smarty for example).
If there should be menu.php on each page, why not putting this css as static file in the header
Paste some code, so we could help you easier ;)