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]?>;
}
Related
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>
I have a really big website to work on, which a lot of the sub-pages have unique CSS styles written inline.
Each page is structured in a way that it uses different .phtml parts to create one html page - the style used in a specific part is called from within the .phtml file, and results a page like this:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<div>
...
</div>
<div class="someStyle">
...
</div>
<style type="text/css">
.someStyle{
color:red;
}
.someOtherStyle{
background: blue;
}
</style>
<div class="someOtherStyle">
...
</div>
</body>
</html>
Is there a decent way to append this <style> tag, even as string, to the <head> tag of a page although written within the page? (as a function maybe?)
Following Zend documentation:
https://framework.zend.com/manual/2.3/en/modules/zend.view.helpers.head-style.html
it seems like there is a solution for linking .css files, and not short <style> tags.
I don't want to create a file and link it to the <head> tag.
I want it as a short <style> tag as it is.
Wanted result: https://jsfiddle.net/k0c8cssj/
(I couldn't paste it here something doesn't work right with the code tags.)
Edit: Ok there it is:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.someStyle{ color:red; }
.someOtherStyle{ background: blue;}
</style>
</head>
<body>
<div>
...
</div>
<div class="someStyle">
...
</div>
~ in the .phtml view file - the CSS function/string/command is there
<div class="someOtherStyle">
...
</div>
</body>
</html>
Using something like this:
$styles = '.testingClass{color:red;}';
$this->view->headStyle()->appendStyle($styles);
works only from within a controller and not from a view.
You can still use the headStyle viewhelper in your partials:
<?php $this->headStyle()->captureStart() ?>
.someStyle{
color:red;
}
.someOtherStyle{
background: blue;
}
<?php $this->headStyle()->captureEnd() ?>
https://docs.zendframework.com/zend-view/helpers/head-style/#capturing-style-declarations
And add <?= $this->headStyle() ?> to your layout's head tag.
I recommend using .css files to reduce duplicate code, you can either append or prepend your .css files in the partials:
// place at a particular offset:
$this->headStyle()->offsetSetStyle(100, $this->basePath('css/style.css'));
// place at end:
$this->headStyle()->appendStyle('//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
// place at beginning:
$this->headStyle()->prependStyle($this->basePath('css/style.css'));
Also from the docs.
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.
I have a css file called main.css in my styles folder on the root of my project:
#header
{
background-color: aqua;
height: 120px;
}
In another php file header.php I have something like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/styles/main.css"/>
</head>
<body>
<header id="header"></header>
I also have a footer.php:
</body>
</html>
When combining the in my index.php like this:
<?php
require('includes/header.php');
?>
<?php
require('includes/footer.php');
?>
the result is that my css rules don't get applied. How can I fix this?
problem may be in your css path if php file and style folder both are in root use like this href="styles/main.css"
Link your css file using base
try
href="../styles/main.css"
it seems like your css file path cause this problem.
if your directory structure like this below:
includes
|__header.php
|__footer.php
styles
|__main.css
replace the css path in the header.php like:
href="../styles/main.css"
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.