I'm working with the Symfony 1.4 and I'm running into a bit of a problem using the LESS CSS preprocessor.
Let's say that I have 2 Less files with color specific variables. They are called blue.less and red.less.
Here they are:
Blue.less
#mainBorder: blue;
#pulldownBackground: blue;
Red.less
#mainBorder: red;
#pulldownBackground: red;
Now let's say that I have a layout.less file that will look something like this:
// Colored line under Nav
.main {
border: 1px solid #mainBorder;
.pullDown { background: #pullDownBackground; }
}
If I want to use one of the color variable files, I need to declare it at the top of the layout.less file like this:
#import 'red.less';
Since the #import statement has to reference a specific file, how would I be able to dynamically pass blue.less to the #import statement whenever I wanted to change the color scheme?
Would there be a way to dynamically declare which of the color specific LESS files will be passed to that import statement with PHP and the Symfony framework?
Or can this problem be solved without server-side code?
I've never used Symphony, but this should get you going in the right direction regardless of framework.
First you want to create your LESS file:
<?php
$color_scheme = "red"; // we're simplifying here for now, but this could be set via $_POST variable
/*
it would probably be a good idea to check if the file exists first before we import it.
see function: file_exists()
*/
$contents = "
#import '$color_scheme.less';
#import 'main_styles.less';
#import 'other_stuff.less';
";
file_put_contents("path/to/styles.less");
?>
Now you have a LESS file that is ready to be processed, same as if you written it by hand, but with the color scheme being easily swappable. If I were doing this with bare PHP, I would be using the exec() function to invoke commands that would be available via command line. Here's an example for invoking SASS via exec() (I've never used LESS this way, so you'll have to fill in the blanks here).
<?php
exec("sass --compile path/to/sass:path/to/public/css");
?>
If your Symphony plugin does the compilation for you without the need to use the exec/command line, then you'll probably want to do that instead.
Related
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.
I'm just learning Sass and trying to figure out my workflow. Problem is that many times I have PHP-code in my CSS-files (autoversioning, path-variables etc). Is there any way of skipping PHP code in SASS (SCSS-files).
EDIT: I have to clarify that the problematic CSS-files are indeed dynamic, so my example.css.php -file runs some PHP and depends on webserver state somehow. (There are no problems with static CSS-files).
If I create simple SCSS-file, I get an error for PHP-code. Any ideas?... has someone made any modifications for Sass-parser to skip script code in sass?
Example test.scss:
$backg: #fa0;
#wrapper {
color: #000;
background-color: $backg;
}
<?php echo ""; ?>
EDIT: One "hack" occurred to my mind. I could use SASS /* */ comments to comment out all PHP-code lines and use some script afterwards to strip out the comment characters and reveal PHP to get correct results...
E.g.
// This is an example SCSS-snippet with commented PHP code lines in it...
.foo {
color: $someColor;
/* background: transparent url(<?php echo autoVer('../', 'img/badge.png'); ?>) no-repeat center top; */
By default your Web-server will not process css/scss files like php.
You can configure it in Nginx/Apache settings, but it's black coding actually
PHP usually expands a file in context of a specific HTTP request. The SCSS->CSS conversion usually happens on static files. Do you want your SCSS depend on data coming from the user, or the web session? If so, you would have to run Sass after running PHP to get CSS, otherwise your best approach would probably be adding a Makefile rule for running foo.scss.php through PHP and then Sass.
I should also point out that there's a good chance that what you're doing to your CSS with PHP is easily done with SCSS, anyway, so you may not need PHP once the conversion is complete.
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
First off, FYI: The .php file referenced below will be the index.php of a Serindipity blog, which is a very complex mess of code and files.
In my index.php file, I want to grab the query string, if one exists, from the URL and assign it to a variable (as in variable=self.location.search).
I want to then assign that variable to a single attribute of a single entry in a style.css file that is called by one of the many files Serindipity utilizes to generate the ouptput page:
body {
font-size: 10pt;
margin: 1;
background-color: #000000;
font-family: verdana, arial, helvetica, sans-serif;
margin-bottom: 30px;
}
I want to change only the background-color parameter of one of the many entries, shown above, to the $ value of that variable (which would be either "transparent" or null).
In the process, I need to employ logic code to determine if there is a query string at all.
If yes, make background-color=variable. If not, make background-color="#000000".
(Of course, the logic must be executed within the CSS file.)
Is this possible?
Thanks!
I'm not familiar with the engine you mentioned (Serindipity), but this should be pretty straightforward, as long as you are allowed to create and edit your own Php-scripts (which really shouldn't matter as long the engine isn't dependent on the name of the style-sheet):
Change the file-ending of the style-sheet to
.php
and the webserver will recognize it as a php-script. Set the mime-type to text/css like #Brighty wrote
header('Content-type: text/css');
and the user will never know the difference (except, of course, the file-ending being .php).
If the style-sheet having a file-ending of .php is a problem, you can always use .htaccess and some clever regex to make the user believe they are seeing a .css.
Edit: Also, if you have access to configure what file/s will be recognized as php-scripts, you can set your server to also recognize .css as a php-file (which, as far as I know wouldn't be a problem, since php will just toss any plain text encountered out to the user).
Just make sure your file is a .php file and you can just use PHP in it like so:
<?php
$colour1 = isset($variable) ? $variable : '#000';
header("Content-Type: text/css");
?>
body {
background: <?php echo $colour1; ?>
}
div {
color: <?php echo $colour1; ?>
}
Obviously this is quite flexible! Here's a link I found extending the method even more.
you can't set any variable in the css file, jquery or javascript is the best option to play with your css file.
or you will do with inline css.
You may be able to achieve this by mixing css and php code in a single file with a php extension, and setting the mime type of the file to 'text/css'.
header('Content-type: text/css');
I have done a similar thing in ColdFusion but never in php so I can't guarantee this will work.