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">
Related
I was wondering if there was a way using php or javascript to see if my webpage will be longer than one page when printed. I have specific elements that need to be at the bottom of the page regardless of how long the content in the middle of the page is, (max one page including footer).
Tried various css elements such as bottom.
Have you tried making a separate 'print.css' file that only alters the way a page looks when it is going to be printed? <link rel="stylesheet" type="text/css" href="print.css" media="print">. This can also be done with an #media print { } tag in your regular css file.
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'm trying to import a php file containing a HTML script with separate CSS and js files into another php file which contains my header and footer. The header and footer are from a template which uses a very messy and convoluted CSS which basically has rules for everything in almost 10 different locations/files. When I import my php into this main template page, all the imported page's styles also inherit from the base template which basically overrides my stuff. Is there a way to enforce each php/html script to maintain their own styles without having to inherit from one another while they're being imported from one file to another?
Many Thanks
How are you importing the files?
Is your answer is using include() or require() then the answer is no! When the html code is generated, all this will show it in the same page, that's what all the css and js files are applied to your html.
What you can do is add the css and js files to a file (eg: assets.php), establish an order and then import that into your main.php and resolve all the problems with the classes and ids on your html to avoid overriding.
EDIT: about CSS load order
The order in which you load your CSS files has very little influence in how styles are applied. What styles are applied to a certain element is determined by the specificity of the selectors used in the CSS rule. A higher specificity overrules a lower specificity, even if the style with the lower specificity is declared later.
CSS Specificity: Things You Should Know
Specifics on CSS Specificity
you need to name space both your css and javascript to protect them from being polluted by your header and footer.
there are many name-spacing patterns out there.. but let me suggest a few:
css: for every page you import.. you can run a jQuery script like this:
jQuery(document).ready(function() {
jQuery('body').attr('id','importedPagei');
}
then when you import the css.. you should create a build script that appends the attribute body#importedPagei to every css you are calling
ie this is a sample of the css of the importing page before running your build script:
.style1 {
color:red
}
and after running the jQuery script:
body#importedPagei .style1 {
color:red
}
so let's say that before.. your header template had the following class:
//header.css
h1 {
color: red;
}
and in your imported file you had
//importedFile.css
h1 {
color:blue;
}
then the final outcome in your old solution will have the template header style overriding yours:
//old final outcome
h1 {
color:blue;
}
but with the proposed solution above you will have (as mentioned before):
//importedFile.css
body#importedPagei h1 {
color: red;
}
and since you attached an id attribut to the body node of importedFile.html using jQuery, the html will look like this
<body id="importedFile">
..
<h1>hello world</h1>
..
</body>
so in this case.. using css cascading rules.. the css selector of your imported file is stronger than that of the template.. and so the final style applied will be color: red
javascript:
you can also use a build script to selectively import specific javascript files for specific pages..
another clean way is to use js.node modules.. the problem with javascript is that everything is in the global namespace.. there are some name spacing patterns that you can use.. but node.js provided a built in and very clean solution for it. and so you can have all the javascript in your final code but have node.js take care of compartmentalising it. it all depends on how much time you want to invest in solving this problem
This is more a question of what browsers will do, rather than the back-end architecture.
I am using codeigniter and have a controller setup to handle assets (CSS, JS, and images), and at the moment I am simply processing the PHP out of CSS files and presenting them as CSS files to the browser, so www.mysite.com/asset/home.css will call the asset class and generate the CSS file for home from a single file.
I would like to make the request for the CSS files more dynamic, so that the request will determine multiple files that should be combined, and then passed to less.php for parsing and minimization.
Taking into account issues of caching, what would be the best method of passing variables to the CSS class? Flat Link URI variables? Traditional GET URI? I could use a database to reference a given name for its components, but isn't that a lot of overhead?
Any thoughts or opinions are welcomed!
++ How would browsers handle something like standard.menu.comments.css?
+++ I ended up going with a URI string appended to the file. It's not as clean I would want, but it appears to be working. I will likely move to a flat slash separated URI parser soon to clean up the request lines. Thanks for your help!
You can create a file style.php with the following header:
<?php header("Content-type: text/css"); ?>
And link this style in your template:
<link rel="stylesheet" type="text/css" media="screen" href="style.php?color=red">
Then you can import some stylesheets in your style.php:
#import ("someStyle.css");
Or you can pass some $_GET variables and create conditional styles:
<?php
if ($_GET['color'] == 'red')
{
echo ".myBlock {background: #ff0000;}";
}
else
{
echo ".myBlock {background: #00ff00;}";
}
?>
If you just don't want your .css files to be cached, append random $_GET variable to your linked style:
<link rel="stylesheet" type="text/css" media="screen" href="style.css?<?php echo time(); ?>">
I'm working out a process to save actions that occur from jquery in my view in cakephp.. I figure an easy way to load the saved values, such as the width and height for a DIV, would be to have cakephp echo a variable as their width / height in the css file, much the same way it would do this in the view file.. I guess I'm not sure exactly where to look for info on this, if its in the cakephp cookbook I guess I'm missing it as I don't see how to do it in there.. any advice is appreciated.
This is actually pretty easy (and powerful), and can be done without the aid of CakePHP.
First, make a new file in your webroot called css.php. At the top of that file put the following:
<?php header("Content-Type: text/css"); ?>
Now, link to this file in the head of your layout, just as you would a normal CSS file.
<link rel="stylesheet" href="/path/css.php" type="text/css" />
And there you have it, a dynamic CSS file. You can pass information to it like so:
<link rel="stylesheet" href="/path/css.php?c=red&fw=700" type="text/css" />
CLARIFICATION: To access the variables mentioned above, you would use the $_GET variable in the CSS file. Take a look at the link tag above. To access those variables in the css file, you would do something like this:
.class {color:<?php echo $_GET['c']; ?>;font-weight:<?php echo $_GET['fw']; ?>;}
UPDATE: After viewing the link you posted about the CakePHP HTML Helper, I realized that there is a better way to do this if you intend to pass a lot of variables to the css file.
Create a new model and controller called DynamicStyle and DynamicStylesController (or something similar). Then, make a new layout file called css.ctp that all of this controller's views will use. Declare the content-type header statement in that layout file.
The last step would be to link to a method in that controller from the head of your standard layout header.
Now you could make a database table of css rules and use those with the HTML helper in the css view.
I just realized CakePHP has something for this as well:
http://book.cakephp.org/view/1440/style
So this may come in handy for anyone who comes across this in the future