This question already has answers here:
How do i run PHP inside CSS
(2 answers)
Closed 9 years ago.
I have CSS file and I want to refer some image paths in that files in PHP varaible format. Then I refer that css file inside a html file. Following are my file
CSS file
<? header ("Content-type: text/css");?>
body{ margin:0px; font:9px/11px "Tahoma", Arial, Helvetica, sans-serif; color:#010000;
background:#f3f6e1 url(<?php echo base_url().'public/';?>images/body_bg_1.gif) repeat-x 0 0}
HTML file
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/layout.css" media="screen">
</head>
Other things. Can you explain me how to do this ?
If you're able to rename your CSS file "layout.php", there's no need for all of these workarounds:
Your layout.php file would look like:
<?php header("Content-type: text/css; charset: UTF-8"); ?>
body{ margin:0px; font:9px/11px "Tahoma", Arial, Helvetica, sans-serif; color:#010000;
background:#f3f6e1 url(<?php echo base_url().'public/';?>images/body_bg_1.gif) repeat-x 0 0}
Your HTML files would look like:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/layout.php" media="screen">
</head>
This question is very similar: Include: css with php file extension?
Perhaps the return value of base_url() does not end in the path separator.
With that in mind, try this:
#import url("<?php echo base_url().'/public/';?>css/layout.css");
(Notice the slash before "public")
Check the source of the page via your browser's "view source" or similar, and check if the path in the #import is correct
or
Use a request logger similar to Chrome's devtools' "network" tab to see what URL your browser is trying to load the imported CSS file from.
You also view the CSS via your browser to identify whether the contents are being correctly built. If you see <?php inside the response, you'll need to make Apache treat the CSS file as if it was PHP.
You can add something similar to the following into your .htaccess file:
<FilesMatch "\.css$">
SetHandler application/x-httpd-php
Header set Content-type "text/css"
</FilesMatch>
You should ensure that the "mod_headers" Apache module is enabled to allow the use of the Header directive.
Although, personally I would rename such dynamic stylesheets to have a .php.css extension. This will have no effect, but then Apache can be configured to only pass the dynamic stylesheets to the PHP preprocessor.
<FilesMatch "\.php\.css$">
SetHandler application/x-httpd-php
Header set Content-type "text/css"
</FilesMatch>
I believe the problem is that a .css file isn't going to be interpreted as PHP and so your code in the file is not going to be executed. If you included it as a PHP file, your code should be executed and your values should be filled in.
[Edit]
This does seem to be the way to do it, as noted by an answer someone linked to in a comment on the original post here.
It's simple if you have a bit of knowledge of url rewriting.
Write a .htaccess file in your root directory, It would look something like:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^customized\.css$ css\_generator\.php [L]
</IfModule>
Now just create a file css_generator.php having content:
<?php header('Content-type: text/css; charset: UTF-8'); ?>
body{ margin:0px; font:9px/11px "Tahoma", Arial, Helvetica, sans-serif; color:#010000;
background:#f3f6e1 url(<?php echo base_url().'public/';?>images/body_bg_1.gif) repeat-x 0 0}
Your html should look like:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="customized.css" media="screen">
</head>
Understanding what just happened.
On page load when your browser will load customized.css, it will be redirected to css_generator.php
the contents of css_generator.php will be also available as yoursite.com/customized.css
Hope this helps
Related
I have a working HTML to PDF (wkhtmltopdf) working Laravel website, where the user has the ability to amend a "template" and then export it to a PDF. At the moment, I have had to encode the font to base64, as the apostrophes etc.. were being missed out. This in itself is a huge amount of code, something that I don't want saving in the database.
So, I have the following stored in a blade (style.blade.php) file (shortened for this example):
<style>
#font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src:url("data:font/ttf;base64,AAEAAAARAQAABAAQR1BPU792x2wAAS2AAAASSkdTVUKOOI56AAE/
zAAAAHBPUy8y2a6qaQAAyigAAABgY21hcIwYkAAAAMqIAAAAtGN2dCAG9xijAADScAAAAC5
mcGdtclpyQAAAyzwAAAblZ2FzcAASABgAAS10AAAADGdseWbADxfjAAABHAAAw2BoZWFk/
....
wABAAEAAmxpZ2EADmxpZ2EADgAAAAEAAAABAAQABAAAAAEACAABABoAAQAIAAIABgAMAN
YAAgBMANcAAgBPAAEAAQBJ")
format('truetype');
}
.page-break {
page-break-after: always;
}
</style>
I would like to "add" the entire contents of the file, to the top of another HTML file.
Any suggestions how I can do this would be greatly appreciated.
Many thanks.
Use #include directive,
Blade's #include directive, allows you to easily include a Blade view
from within an existing view.
Consider u've this view.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
</head>
<body>
<p>Anything could be here</p>
</body>
</html>
And you want include that font (style.blade.php) here.
So you would have something like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...</title>
#include('style')
</head>
<body>
<p>Anything could be here</p>
</body>
</html>
Assuming style.blade.php stored under /resources/views/style.blade.php
You may refer to https://laravel.com/docs/5.2/blade for further
information about Including Sub-Views
You can make your content portable like example:
In Views create > content.blade.php
Have your file content inside content.blade.php file.
Then simply where-ever you need to call those content you can simply include it using :
#include('content') anywhere in between the code and it will act as if its present there.
Normally this is quite a simple approach and we use alot when there is repetition of code. for example : Creating master blade file.
Or creating header,
footer etc.
Is it a good idea to using <?php include "main.css.php"; ?> instead of <link rel="stylesheet" href="main.css">? From server resource (will it makes my server heavier) and user experience (page loading time) point of view. The main angle here is will php include css download multiple times as opposing to html link, or will they both only have to download one time (http request one time).
P.S.
Initially, I am doing this because by using php I can give custom colors and other settings a name, so I don't have to using class name for html (ever put multiple class names in lots of html elements? The readability is a pain). Later on, I can make my css dynamic, which lead me to do lots of powerful stuff. The advantage goes on.
It is not good to use such practice
But if you want you can use this
Make your css file main.php
<?php header("Content-type: text/css; charset: UTF-8"); ?>
body{ margin:0px; font:9px/11px "Tahoma", Arial, Helvetica, sans-serif; color:#010000;
background:#f3f6e1 url(<?php echo base_url().'public/';?>images/body_bg_1.gif) repeat-x 0 0}
And include it in the page where you want
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/main.php" media="screen">
</head>
I'm trying to use php variables in my .css.
I have change my style.css to style.php and I've add the next code in it:
<?php header("Content-type: text/css");
$color[0]='#ff0000';
$color[1]='#00ff00';
$color[2]='#0000ff';
$i=rand(0,2);
?>
Then I'm trying to use this color in a css property. Something like this:
background-color: "<?=$color[$i]?>";
When I try to see what happens... nothing happens. If I see on firefox inspector it seems that my code is not changing from php to html.
Any Ideas?
Use classes on body:
<?php
$class[0]='red';
$class[1]='lime';
$class[2]='blue';
$i=rand(0,2);
?>
<body class="<?php echo $class[$i]; ?>">
//The result
<body class="red"></body>
<body class="lime"></body>
<body class="blue"></body>
Work with inheritances on CSS file:
.red .my-another-class{
background-color: red;
}
.lime .my-another-class{
background-color: lime;
}
.blue .my-another-class{
background-color: blue;
}
So if you're loading style.php as a CSS file you should do this in your <head> so it's treated by the browser as such
<link href="style.php" rel="stylesheet">
IMPORTANT:
I'm trying to use php variables in my .css
You CAN NOT use php in .css files, your "css" file has to be a php file, look the example above.
In PHP: Just remove the quotes from your output:
background-color: <?=$color[$i]?>;
If your PHP version is below 5.4 and short open tag is disabled, you have to write it like this:
background-color: <?php echo $color[$i] ?>;
From the PHP docs:
Note: This directive also affected the shorthand <?= before PHP 5.4.0,
which is identical to <? echo. Use of this shortcut required
short_open_tag to be on. Since PHP 5.4.0, <?= is always available.
EXAMPLE
In this example index.html and css.php are on the same level
htdocs
|-- index.html
|-- css.php
index.html:
<html
<head>
<link rel="stylesheet" type='text/css' href="css.php" />
</head>
<body>
Sometext
</body>
</html>
your css.php:
header("Content-type: text/css; charset: UTF-8");
$color[0]='#ff0000';
$color[1]='#00ff00';
$color[2]='#0000ff';
$i=rand(0,2);
?>
body {
background-color: <?=$color[$i]?>;
}
Alright so I was creating a normal page in html and have linked a CSS page to it. Using
<link href="css/index.css" rel="stylesheet" type="text/css" />
I was wondering if I wanted to use the same method of CSS on some PHP that is echoed out onto the page. Is there a way to do this or do I have to do it using style="" within the tag?
This is what I've tried...
#test{
width:75px;
background-color:#FFF;
display:inline-block;
}
<?php
echo 'Test'
?>
you have to put the echo values on html element with a class/id that has a css
try :
<p class="colored"><?php echo $str ?></p>
It can be achieved liked this.
<?php echo '<link href="css/styles.css" rel="stylesheet" type="text/css" />'; ?>
or perhaps
<style>
.style {
width: <?php echo $myvalue; ?>;
}
</style>
From what I understand, you want to apply dynamically generated CSS styles.
For this, it is better to use style="" directly in the tag:
<a style="width: <?php echo $myValue ?>">Link</a>
If you want to use php within a CSS file, you can create a PHP file instead of your CSS file:
style.css.php
<?php
header("Content-type: text/css");
?>
.style {
width: <?php echo $myvalue; ?>;
}
Then you can link it from your html:
page.php
<link href="css/style.css.php" rel="stylesheet" type="text/css" />
The MIME type of that PHP file will be text/css although the extension is .php
If you want the extension to be .css, you must .css files to the list of files to be interpreted by your server. If you are using Apache, you can enable mod_headers:
a2enmod headers
service apache2 restart
And create a .htaccess file with the following content:
<FilesMatch "\.css$">
SetHandler application/x-httpd-php
Header set Content-type "text/css"
</FilesMatch>
If you do this, you don't need to set the header manually in the css file.
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