Related: https://stackoverflow.com/a/8198408/406110
login.php file: (despite being a php file, it doesn't have php code, only html)
<html>
<head>
...
<script src="/js/less.js" type="text/javascript"></script>
<link
href="login.less"
rel="stylesheet/less"
type="text/css">
</head>
<body>...</body>
</html>
load.php file:
<?php print file_get_contents('login.php'); ?>
I would like to load the content of the file login.php using load.php. It is possible, HTML is being write correctly, but CSS/LESS is not loading:
login.less file:
body { background-color: red; }
Why?
Edit 1
I am using "Client-side Usage" to run LESS files.
Seems it is a LESS problem. But why isn't it working?
Problem solved:
Somehow, LESS was not being compiled, I changed from Client-side Usage to a compiling approach. Thank you everybody!
I think what you really want is just an include:
<?php include('login.php'); ?>
This just includes the contents of the other file (in this case login.php) into your current file.
Related
I have an HTML "chunk" of code with HTML and JS in it so I could easily include it with PHP. I also want it to have CSS styling but according to standards you are not "allowed" to do that - while it works it makes the page invalid. CSS is only allowed in <head> and not in the middle of the page (not untill HTML5.2 at least). So I thought about appending similarly named but separate .css file in the head, but with PHP and not JS (for performance sake)
<head>
<!-- PHP needs to include button.css here AFTER $App->INC("button"); has been called -->
</head>
<body>
<?php
$App->INC("button");
//This basically does 'require_once("button")';
//What do I need to add to the INC method to include css file in the head?
//Similar to $("head").append() but with PHP
?>
</body>
css file with the same name should be added to a <head> section.
PS:
This may seem as a design flaw and may as well be but here is the thought behind this.
I have a piece of code that when included in the right place of the
body generates a "loading screen" (or other UI elements that
can't/shouldn't be nested anywhere else but in the <body> of
the website.
It's got styling in a separate file
I send it to other user
They include it with a method of an "App" class which only does two
things: includes the file itself and css file nearby
Then they only use 1 line of code to put it where they want it and
not in 2-3 other places so the code is more manageable
Example:
You may try this:
<?php
ob_start();
$App->INC("button");
$button = ob_get_clean();
?>
<head>
<!-- Do your inclue here -->
</head>
<body>
<?= $button ?>
</body>
You can put the ob_start() / ob_get_clean() stuff inside button.php and return the content via your INC() method. Then you can save the content directly into $button like this: $button = $App->INC("button");.
But your example looks like a design problem. However I hope this will do the trick.
This could be a possible redesign:
<?php
$App->loadModule('button'); // Loads the module, the module registers stylesheets and content.
$App->loadModule('another_module'); // Load more modules ...
<head>
<?php $App->renderModuleStylesheets(); ?>
</head>
<body>
<?php $App->renderModuleContent(); ?>
</body>
If you include the CSS directly in the component itself, or expect the component to dynamically load the relevant CSS, then it could be quite difficult to maintain or customize. I am not saying you shouldn't go this route but be careful about asking your components to do too much.
A hook system as pointed out in the comments is one way to handle this.
Another simple way is to provide default styling which users can override. This is probably the simplest way to allow different styling for each component.
<head>
<!-- Provide some defaults. Users should not customize this one. -->
<link rel="stylesheet" type="text/css" href="default.css">
<!-- User's can customize this file to override the default styling.-->
<link rel="stylesheet" type="text/css" href="custom.css">
</head>
<body>
<?php $App->INC("button"); ?>
</body>
button.php - is only responsible for rendering a button. The separate CSS files will actually style it.
<?php
echo <input type"submit" class="button" value="Submit">
default.css - applies default styling
.button {
color: blue;
}
custom.css - overrides the default styling
.button {
color: red;
}
Final note, you may also want to look into using a main template file which sub-views inherit. This helps to reduce the number of full HTML files which link to your CSS files. The idea is to have 1 (or a few) template files that views inject themselves into. Here's some pseudo code.
frontend.php
<html>
<head>
<!-- Links to CSS files here. -->
</head>
<body>
<?php $placeholder('body'); ?>
</body>
Login.php
<?php inherits('frontend.php')->body; ?>
<form id="login">
...
Register.php
<?php inherits('frontend.php')->body; ?>
<form id="register">
...
About-Us.php
<?php inherits('frontend.php')->body; ?>
<p>About Us</p>
...
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
In my login system in my site I wanted the user's selected CSS to be loaded after validation was complete. The only problem is that my PHP is located in the body element and I ECHOed the user's CSS link there. I know this is "bad", but what else can I do?
if (isset($_SESSION['loggedin'])){
ECHO $_SESSION['style'];
}
else
{
ECHO 'green';
}
ECHO ".css' />";
The PHP script echos some text in the body after the user is logged in, this is why I cannot put the PHP script in the header.
I'm under the assumption that you're not at all familiar with the basics of PHP, so I'll break it down as simply as I can. If your document is able to execute PHP (which it sounds like it can because you have things happening in the body), all you need to do is wrap the PHP code with <?php and ?> for it to parse as PHP.
You shouldn't put stylesheets inside your body. Indeed, that is something that no one will recommend. What you can do, however, is execute PHP in the head of your document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="style.css">
<?php
echo "<link rel='stylesheet' href='{$_SESSION['user_css']}'>";
?>
<script src="script.js"></script>
</head>
<body>
<?php
echo 'body text';
?>
</body>
</html>
It doesn't matter where you decide to inject PHP code into your document, it will render as you wish. I'd suggest an MVC solution, but if this is just a small, one-off file, feel free to inject PHP wherever you want it, as often as you need it.
http://php.net/manual/en/language.basic-syntax.phptags.php
You can load the user css after the document is loaded using jQuery.
<script>
$(document).ready(function() {
$(head).append('<style>
<?php echo($user_css); ?>
</style>');
});
</script>
Though just adding a section to output the CSS in the head would be easier to maintain in the future and doesn't need the page to load. A dramatic enough change on a slow(ish) connection and the user will see the flicker as the CSS loads their style.
you could use some jQuery to append the style in the <head>:
$(head).append('<style><?php echo user_css ?></style>');
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 wonder if i could embed js and css files above the html document scope:
<script type="text/javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" src="../../media/js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="../../media/css/cupertino/jquery-ui.css" />
<html>
<head>
</head>
<body>
<body>
</html>
this is because i want to put them in same php file where i include all files (php, js and css). i have tried this and it seems to work. the output of the html file will be shown just like the above code, with the include rows above the html tag.
are there any hidden cons in this?
Even if it works, you shouldn't do it. This type of stuff is sloppy, and as such isn't guaranteed to work tomorrow, or in future browsers. If you don't feel the agony of this method now, you will eventually. There's no reason that you should be doing this anyway.
This isn't valid html. The best place to put the javascript would be before the body close (unless there's in-line scripts that need those scripts to be loaded). This prevents blocking as the page loads.
Will not be valid (X)HTML.
This will work in most all browsers, but that's not to say it isn't wrong. It is wrong.
It's not valid HTML, and will confuse just about everyone who comes across your code, and though I don't know what browsers could possibly fail to overcome the inherent wrongness about this style, I make no promises that it will work. In a sense, it should, but in another, it most definitely should not.
Perhaps output buffering will work in this situation? Buffer the output from your "includes" file, then grab the contents of the buffer to output later, after the <html> declaration. Something roughly like this:
In your includes.php file:
<?php
ob_start();
// here is where you output your css and js declarations
$includes = ob_get_clean();
?>
And here is your main page:
<html>
<head>
<title>Hello</title>
<?php echo $includes ?>
</head>
<body>
...
I know this is very old now, but I want to add that Google is recommending to do this in certain cases.
Take a look at this: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example
Any thoughts as to why Google is advocating improper HTML coding?