In my css
div.image {
width:<?php echo get_image_size( $size[1] ); ?>px;
}
The size is stored in an array so i called $size[1] to here...
I am beginner in php...
any one pls help?
Better solution is to set a header for the css / php file in my example cssfile.php:
<?php header("Content-type: text/css"); ?>
Then you can use the php file as style.
<link rel="stylesheet" type="text/css" href="cssfile.php?param=1" />
Then you should get the output on your site. But with that solution you should be very careful if you have a lot of traffic. On every site call your PHP interpreter is used to deliver that file.
Yes for this particular instance if you just need php on this one line it is best to insert in the head of your html instead of having php make a whole css file for you.
<style type="text/css">
div.image {
width:<?php echo get_image_size( $size[1] ); ?>px;
}
</style>
PHP should NOT be creating your static assets unless absolutely necessary. You will notice performance hit if traffic gets high.
Change the extension to .php and then in your stylesheet put:
<?php header("Content-type: text/css"); ?>
Then you can use PHP inside your stylesheet.
Maybe you should use this:
<div class="image">
<img src="image.gif" />
</div>
CSS:
div.image img{
width: 100%
}
The problem with putting style inside html is that everything get messed. You should try to separate html from css and js as much as possible.
Also, from my expirience, this is not a good practice to use php in css or js files.
Consider reviewing your html layout to optimize this.
One way is to move that particular piece out of the .css file, and insert it in a PHP document that has access to the get_image_size() function. For example, you may have a template that is parsed as the header. You could then surround this piece in <style> tags.
For that you need to use like this
change your css file as css.php, and use stylesheet include like this
<link rel="stylesheet" type="text/css" href="css.php?opt1=<?php echo get_image_size($size[1] ); ?>" />
In css.php file
div.image {
width:<?php echo $_GET['opt1']; ?>px;
}
try this
Related
I am just starting off with PHP, I want to separate css file nicely and link them to the page that I needed them and here is the card component and since I am just starting off, the codebase is very small and easy to debug when problem comes but I just could not figure out where went wrong.
// /components/item-card/item_card.php
<?php
<link rel="stylesheet" type="text/css" href="/css/variables.css" />
<link rel="stylesheet" type="text/css" href="/components/item-card/item_card.css" />
<div class="item-card">
<div></div>
<div></div>
<div>
<button>ADD TO CART</button>
</div>
</div>
?>
// /css/variables.css
:root {
--main-color-scheme: #182e49;
}
// /components/item-card/item_card.css
:root {
--card-width: 300px;
--card-height: 360px;
}
.item-card {
display: flex;
width: var( --card-width );
height: var( --card-height );
}
// /index.php
<?php
include "components/item-card/item_card.php";
?>
The just above just me trying to create a item card component simply, I tried to move all the code inside item_card.css to variables.css and it works normally, but why does it not work when the code is inside item_card.css ? I also inspect the element and see the file loaded normally, I could click on it and to see the code also, but inside the resource tab, I could only see variables.css loaded.
Edit for more info: The server I am running on was the php built in server and my project was put within ~/projects/...
Edit: Somehow the php only loaded the first css and it only loaded one css only, also it only load from /css but not /components/item-card/item_card.css
Firstly check your item_card.css file path is correct or not.
CSS custom properties work throughout one document. So, define the variables in item_card.css or #import the variables.css at the beginning of item_card.css file.
I have the following code for my html file:
<html>
<head>
<link rel='stylesheet' href='css/style.php' media = "screen"/>
</head>
<body>
<h1 id="foo">My h1 foo element</h1>
</body>
<html>
And for my php file:
<?php
header("Content-type: text/css; charset: UTF-8");
$asd = '#0000ff';
?>
h1#foo {
color: <?php echo $asd;?>;
}
I've followed some tutorials and this is the simplest one i could make but somehow the output is not working the way it should be. Did i miss anything?
P.S. if i was gonna use php variables in css, can it be sort of dynamic? i mean inside the php body, can i overwrite the value of the php variable used in css and the output would change?
Help would be much appreciated ty!
Works fine for me ^^
Use this syntax:
cssman.php
<?php
ob_clean();
header('Content-Type: text/css');
header('Cache-Control: no-cache, must-revalidate');
error_reporting( 0 );
// These are just to show you can use dynamic values and such:
$type = isset($_GET['type']) ? $_GET['type'] : '';
$theme = isset($_GET['theme']) ? $_GET['theme'] : '';
/** Simply print or echo your css here **/
ob_end_flush();
?>
Try your output first, by navigating to the .php file manually. If there is no content at all, there is most likely a mistake in the PHP code, for debugging you could add error repporting (don't forget to also ini_set('display_errors',1), else errors will only be logged).
Then add it to your view:
your view
<style type="text/css">
#import "/Library/Stylesheets/cssman.php?type=cms" screen;
/* any aditional files here aswell */
</style>
you can do it like
echo"
<style>
h1#foo {
color: ".$asd.";
}
</style>
";
Firstly, to include a php file this syntax is absolutely wrong:
<link rel='stylesheet' href='css/style.php' media = "screen"/>
To include a Css file we use following syntax:
<link rel='stylesheet' href='css/style.css' media = "screen"/>
and include a php file we use:
<?php
include_once "a.php"; // this will include a.php
?>
Instead of using PHP to manage the CSS, you may want to consider one of the CSS preprocessors which are specifically intended for that purpose. It also dissociates your client side code from the server side technology.
http://lesscss.org/
https://learnboost.github.io/stylus/
http://sass-lang.com/
Another approach worth considering is to break up the CSS into several files. You can have a common file that applied to all pages on all devices, one that contains the colors, another that manages the layout, perhaps some device specific ones.
The code you post works as expected. The title with id=foo goes blu. The only problem is that it doesn't use the .css extension for a css file. To solve this you could put in css folder a .htaccess with instructions to Apache Web Server to use Php interpreter also for the css files (look this link).
However probably for dynamic-ly change it from php, you mean change the value (e.g after a user input or some other events).
BUT If I understand well your question the answer is no.
Php can only preprocess your page, it can't modify dynamicly your page after it is loaded by the browser from the user. In addiction, using the code above your variable $asd can only be changed in the style.php AND before that it is used in the code.
I suggest you to use javascript instead, it's a lot easier. Use some javascript library like jQuery, to that kind of job.
I have two files, one is a php file where a session is set, the source is included below.
An .htaccess file is in place to make sure css will be parsed like a php file,
I have verified that this works, but no session data can be read from style2.css
index.php:
<?php
session_start();
$_SESSION['bgimg'] = 'picture.jpg';
?>
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
....
the other is style2.css:
<?php
session_start();
header("Content-type: text/css; charset: UTF-8");
print_r($_SESSION);
?>
body {
background: #fff;
background-image: url("<?php echo $_SESSION['bgimg']; ?>");
}
....
I think your session cookie might not be sent along with .css requests, so the session cannot be fetched.
css will be parsed like a php file,
This is a terrible idea!
Instead use mod_rewrite to rewrite style2.css to a PHP script
RewriteRule ^style2\.css$ generate_style.php
Other than that your session code looks fine, maybe PHP is just confused about the .css file.
In general, passing css files though the php interpreter is not the best idea.
Css is meant to be static, cached data with styling information.
As it seems that you want to dynamically set a background image of one specific element, I suggest using the style attribute in html like so:
<body style="background-image:url(<?= /* php code here */ ?>);"></body>
If, on the other hand, you want to change styling based for example on your login status, I suggest using html class attributes as flags and using the class selector in css:
Example CSS:
p {
/* formatting without login */
}
.login p {
/* formatting with login */
}
Example php
<!-- snip -->
<body <? if(/* check login here */) { echo 'class="login"'}?> >
<!-- snip -->
I'm a novice php learner, I was experimenting how to link different php files dynamically. While experimenting, I realize I can create variables in my php files and make my template files echoes out the html I need without editing my template files......
for example:
Within about-me.php page, I have included my header.php and footer.php using
<?php include ('includes/header.html'); ?>
<?php include ('includes/footer.html'); ?>
then I create a variable
$page_title = 'CompanyABC';
and echo out in the header.php
$page_title = 'South Asia Exact';
Now my question is can I do this to my inline css also?
for example, I have create a variable, that store all my inline css:
$page_inlinecss = "#SAEcontentR div#certification_certificate {
margin:0 auto 0 auto;
width:580px;
height:464px;
}\n";
then I echo out in my header.php like so:
<style type="text/css">
<?php echo $page_inlinecss; ?>
</style>
I have tried it and it works, but I want to know is it the right way to do it?
There isn't a right way to do inline CSS
Your code will work, it will produce a valid page, and it will look absolutely fine to the user. BUT you shouldn't do it that way.
So, why shouldn't you do it that way?
Maintainability is the main reason that you shouldn't handle CSS this way. It is far easier to manage a separate CSS file than to pick through PHP code looking for CSS rules to change.
It looks like the data you're storing is static, the point of a variable is to store data that can change. Things like the name of the website (Company ABC) are unlikely to change during the execution of the script, so you should include them in the static HTML template.
On top of this are issues like caching (most browsers cache .css files, saving you bandwidth) and accessibility (screen readers may not know how to deal with inline styles & js).
How should you handle dynamic styles?
One way to handle dynamic styles (that is -- styles based on information which will be different on different page loads) with a combination of PHP and CSS is to define class styles in your external document and then use PHP to apply them.
For example, put this in styles.css:
span.greentext { color: #0f0; }
And this in your PHP file:
<span class='<?php echo ($someCondition) ? "greentext" : null; ?>'>Some text</span>
Or, if you have more styles to handle:
Alternatively, you could load a specific stylesheet upon a condition:
<?php if($someCondition): ?>
<link rel="stylesheet" href="styles/conditional.css" type="text/css" media="screen">
<?php endif; ?>
Hope this helps, and please don't use inline CSS, or variables, unless necessary. You'll thank yourself for it when you have to change the site 5 months down the line.
Can you do this? Yes.
Should you do this? Ehh. (No. was a bit harsh...)
Better to store the CSS filename in a php variable, then in the header add:
<link rel="stylesheet" href="<?php echo $this_page_style_sheet; ?>" />
There is no right or wrong in this case.
You may store the CSS in a string and echo it as you see fit. Or you may even embed it in your includes/header.html file. It's up to you.
Personally, if it is a collection of CSS rules, I would keep it in its own CSS file, and just echo the filename when needed.
$css_filename = "/path/to/rules.css";
// ... etc etc
<link rel="stylesheet" href="<?php echo $css_filename; ?>">
This is a beauty and a pitfall of the way the system works. You can do that, it works and it doesn't seem to present any immediate and glaring security issues. I don't know if that was an intended use of PHP, but it works so if it fits your situation you can use it. The pitfall comes when enough of these little workarounds are used that eventually a security issue could arise somewhere, but I don't recall CSS ever being used as a vector for an attack.
You can do this to generate dynamic css
file css.php
<?php
header("Content-Type: text/css");
echo 'p {color:red}';
?>
html (not complete but it should work cross browser)
<link rel="stylesheet" href="css.php" type="text/css" />
<p>This should be red</p>
Some more strict/uptight folks might say that proper CSS doesn't need variables, yadda yadda.
Personally I think if this works, then it's a clever way to add some ease-of-use to CSS. I'm all for it.
I have a (probably not) unique issue with a css background div I am seeking advice on. I am using Wordpress, which creates my pages dynamically. The front page and some other pages are using one type of background (Gradient) while internal pages are using a solid white. Right now I am forced to have two style sheets - main.css for the gradient background, then internal.css for the internal - just for this background div.
Is there a way to use one css file and handle these two background divs easily? I will probably need to use a bit of php...
Essentially I am only trying to pass two different background divs, on either home or some internal pages.
Just use different template files (which you should be doing anyway because of the different looks), and use something like an ID on the body tag to check like this:
<body id="grad">
...
</body>
or
<body id="white">
...
</body>
And use this in your stylesheet:
#grad {
background-image:url(something.png);
}
#white {
background-color:#FFF;
}
Make sure to check out the template hierarchy page in the WordPress codex to see how you can easily create the template files you need. Use #grad in home.php and/or a custom template file that you apply to your front page (if it's static), and then use #while in everything else (category.php, tag.php, single.php, and page.php are probably the basics).
You could use your normal stylsheet on all the pages, with the solid white background set. Then on your front page and other 'special' pages, you could have a tag with the background image that will override the white:
<head>
<link rel="stylesheet" type="text/css" href="main.css" /><!-- This has background-color:white; -->
<?php if(!empty($special)){
echo <<<HTML
<style>
body{
background-color:transparent;
background-image:url('image_url');
}
</style>
HTML;
?>
</head>
Then you'd just set $special to true or something when you're on a 'special' page.
I didn't think of this but here is the code:
<body<?php if ( !is_home() ) echo ' style="background-image: url(images/about_bg.png);"'; ?>>
Put it in the header.
<?php
if(is_home) {
echo '<div class="bg for main page">';
} else {
echo '<div class="bg for internal page">';
}
?>