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">';
}
?>
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 am working on a Wordpress theme and want to give the option to choose between a boxed layout and a full width layout.
For this purpose I created a variable in my header.php:
<head>
<?php
$isBoxedLayout = true;
?>
...
</head>
Down in the body I am asking if the variable is set:
<?php if($isBoxedLayout) { echo '<div id="boxed">'; } ?>
...
<?php if($isBoxedLayout) { echo '</div>'; } ?>
This works fine so far. But now I also want to change some css styles if this variable is set. My problem is that I am not so good in PHP yet so my solution would be something like this:
<head>
<?php
$isBoxedLayout = true;
?>
...
if ($isBoxedLayout) {
echo '<style type="text/css">';
echo '#container {width:999px;}';
echo '</style>';
}
</head>
But I think this is not good programming because my header.php file would soon be full of code and confusing if I would add some other options. So logically I should create a variable or an array maybe in the functions.php file and outsource my code like this:
$isBoxedLayout = true;
if ($isBoxedLayout) {
function boxed_css_styles() {
echo '<style type="text/css">';
echo '#container {width:999px;}';
echo '</style>';
}
}
Is my thinking right? And if so how would I access the functions I create in my index.php or header.php or whatever. Or would it work to print the styles in the functions.php?
best regards
Don't over-complicate this by trying to add styles via PHP. Add the ID via PHP...but not the styles themselves.
Since you only apply the boxed ID when the boxed layout is in effect, you can simply define some #boxed CSS styles. These styles will ONLY be applied if the ID exists in your markup...which means they won't come into effect when the ID isn't applied by your PHP.
In other words, put this in your CSS stylesheet, and forget about it:
#boxed {
width: 999px;
}
A flexible option would be to use the body_class() function to add an additional class to your body tag. This would allow you to scope your styles accordingly:
.boxed section {
/* Styles here /
}
.full-width section {
/ Styles here */
}
By adding the class on the body you can effectively target everything. This way you're keeping your styles separate from your markup.
Another option would be to keep your universal styles in one stylesheet and then load an additional stylesheet for your full-width/boxed specific styles. This can be handy for organisational purposes, by does add an extra http request, so you'd need to consider bear that in mind.
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.
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
I have a multiple pages website where I wan't to change some css stuffs.
So my index.php?p=page points to various pages but on every page I also want to adjust some css like the color of the currently active menu item(li) etc.
What is the best way to achieve this? Should i just make a php var on each page?
One way to handle this is to put a class on the BODY tag for each page, then make different subclasses for the stuff that changes. This way you don't need to feed in any variables from PHP. It's all done via CSS.
<body class="pageOne">
CSS:
.pageOne h1 {
color:#ff0000
}
.pageTwo h1 {
color:#000000
}
You should have the CSS on an external file, and link it using a <link> tag, like so:
<link rel="stylesheet" type="text/css" href="path_to_stylesheet.css">