i want to put variable inside css but i don't know how to do it. I have created a php file named style.css.php containing this simple example:
<?php $background = 'blue'; ?>
<style type="text/css">
body {background: <?php echo $background; ?>;}
</style>
But is this a good method? I need to create a customizable theme. The other universal stylesheets are in a normal css file.
Please help.
This question already has an answer.
By the way these link will help you to implement php inside css:
https://css-tricks.com/css-variables-with-php/
How to use PHP inside css file
How do i run PHP inside CSS
I think your approach is already good enough, I'm guessing you are including your style.css.php in the head, potentially putting a lot of CSS there, which isn't necessarily a bad thing.
You don't really have to include your CSS files if you need them on every page anyway, putting them directly into the file saves a HTTP Request but makes your file bigger - but bigger file size doesn't matter if you would load the css file anyway. This way you have even finer control over what gets loaded and what does not, which usually shouldn't be necessary.
Related
I was hoping someone could help. I have just started to dabble with PHP includes for time saving in the future. For example I want to change the footer and header on a web page once (using include) instead of copying and pasting the code 30 or 40 times - oh no... a typo start again.
Which brings me to the question(s) where is it best to place this script?
<?php include("includes/headernav.html"); ?>
Can it be placed in a div, or should it be placed at the top of your code under the body?
If I want to make an image/banner include module. Can I
<?php include("includes/image.jpg"); ?>
Or is best to wrap the image in html and apply like this?
<?php include("includes/imagewrapped.html"); ?>
Do not include .jpeg files directly, use a wrapper. Only use include with other PHP files.
As for including the header, do it any way that feels natural as long as it produces valid html. There is no particular reason to declare another div element.
Hope this helps:
<?php include("includes/ui_header.php"); ?>
My page content between header and footer
<?php include("includes/ui_footer.php"); ?>
You can probably save this as a function and call that function wherever you want to display.
It doesn't matter whether you put include in any place. However, it's better to put include in the top or bottom of your code
While including headers/footers/menus on the site, please keep in mind following things:
1) Your header/footer includes(blocks) should be wrapped inside a div.
2) This way then can be differentiated and any new change to them can be done easily.
3) Its always a good practice to include a wrapper div around an element as CSS can use it for styling.
4) Your header/footer includes (blocks) should have a flexibility that even we place them in header,footer or any sidebar, they should not disturb the UI.
1) Because you are including the HTML file, you probably need to include it where you want to display it.
2) Create a function in php where you send only image URL (maybe some other parameters) and function returns the HTML code (String) which you only echo on page where you want to display it. This way you can ensure, that all images will have the same code and styling.
for example
function generateImage($url=null) {
if (isset($url)) return '<img src='.$url.' style="width: 100px; height:100px; border: 1px;" />';
else return false;
}
The better way is to include always a php file.
I am completely new to PHP (2 weeks) and I have created a simply script for Joomla that will save parameters from my my admin area options and put those values into a CSS format and save the file. It's a whole long script of CSS but here's an example of it...
<?php
ob_start();
?>
<?php
////////////// Custom colours set from the admin panel
if ($this->params->get('templateColor'))
{
?>
/* <?php echo($template); ?>: Custom Auto-Generated CSS Colors As Set in Admin Template Parameters */
body.site {
border-top: 3px solid <?php echo $this->params->get('templateColor');?>;
background-color: <?php echo $this->params->get('templateBackgroundColor');?>
}
<?php
}
?>
<?php
$googlefontcss = ob_get_contents();
ob_end_clean();
file_put_contents('templates/'.$template.'/css/googlefonts.css', $googlefontcss);
?>
Heres my problem, all of these things are stored in a helper file which is called from my index file, but this has the effect that the CSS file is created every time that the page is loaded rather than when I adjust and save my params in the backend. Surely, if I got a lot of traffic, this is going to stress the server even though the css file is quite short (its longer than shown here).
Being a newbie, I have no idea how I would avoid this problem and instead only have the file written when the options are changed and saved. Anybody suggest a better way?
I'm really confused about why you would do this at all. First, Joomla has a way to save parameters for a template and to use them, which you are doing. It also has a standard way to include a css file in your template. You can do this easily with a plugin if you don't want to addStyle() directly to the the template file. Also for google font api just look at how protostar does it.
I really think you need to look at how templates work in Joomla --- it's not modifying the core to modify your template index unless you are using one of the included templates --- in which case copy it, which you can do with one click in 2.5 and 3.
If you really absolutely have to do this, make a plugin. There are a lot of examples in the JED of plugins to include a file in a template. http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/head-code
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
I bought a script that is ioncube encoded. It's a file on my site that is called from a php include, but the text is HUGE, like 38px. Completely unacceptable. The vendor says there's no way to reduce this font size, it's coming from from CSS in the encoded file. Is there some kind of code I can wrap around the php include to override the style settings?
Thanks for any help.
There can be at least two ways:
on-the-fly replace of rule your want to change manyaly (preg_replace, for example)
just after the place you insert your CSS insert your own block with
.your-element-class {
font-size: 24px !important;
} inside it
I'm wondering if I want to do may not be possible... My PHP code loops through jpgs and flv files in an image directory and generates content that consists of in some instances HTML, in others CSS combined with dynamically determined values, for example:
'ul.set li.'.$className.
'{background: url(imagessmall/'.$fileName.')
left -2px no-repeat;}'
Since the above (and much longer sections of HTML+variables) occurs more than once in the code, and because it would make the code easier to review and maintain, I'd like to be able to separate out these html + $variable by defining a set of variables up front, then reference them as needed, for example:
$SDImagePreview =
'ul.set li.'.$className.
'{background: url(imagessmall/'.$fileName.')
left -2px no-repeat;}'
.
.
.
//Code that dynamically sets $className and $fileName is here
$write = fwrite($fileCSS, $SDImagePreview);
I've read on stackoverflow and elsewhere about using &, as in &$fieldName to pass values by reference, but haven't found examples of defining a variable that has within it a variable whose value can be set dynamically.
Am I trying to do something that is just not doable? Or are there alternate suggestions re: implementing the general approach I'm describing? Thanks for any suggestions.
Rather than embedding the html in the code itself, I'd like to be able to define a set of variables at the start of the code, then reference them as needed,
Yes its possible you just have to put your CSS directly to your code in the just add :
<style type="text/css" media="screen">
(...) you generate CSS
<?php print $SDImagePreview; ?>
</style>
CSS are most faster to load if is an extarnal .css file for the caching but in your case the CSS need to be generated in PHP so no cache can be done. If you want to have this change the CSS rule already define by other .css file juste put it after.