OK, so I’m trying to get this PHP CSS variable thing set up. I have it working on my local machine, but so far no dice on the actual server. Basically this is a trick described here: http://code.tutsplus.com/tutorials/how-to-add-variables-to-your-css-files--net-2663 that allows me to use PHP variables in my css. To get it working on my local machine (via MAMP), I added
<?php header("Content-type: text/css"); ?>
to the top of each CSS doc, including panel stuff, and added
AddType application/x-httpd-php .css
to the .htacess file. This works on MAMP, any tips on getting this to work on the server? (also, I’m only assuming this is what’s breaking the site, as everything but the css seems to be working)
If you want to work with variables, I would recommend using a CSS preprocessor like SASS.
If you actually want to generate dynamic CSS right on the server in real-time (and only then), you can use a Kirby route that sets the content-type header to CSS and outputs your dynamic CSS.
Otherwise using a preprocessor is way better and way faster because it saves a lot of time when the CSS file is requested (as it doesn’t have to be generated in real-time). The article you linked to is from 2009, and a lot has changed since then.
On my homepage I use variable CSS to change the color (red, yellow, blue, green) randomly. This is how I solved it:
The preprocessor only compiles file not starting with an underscore. I use the great CodeKit to do all the compiling in automatically in the background.
If you want an external linked CSS-file, with inline variables - served by PHP, use this;
header("Content-type: text/css; charset: UTF-8");
$color = 'f00';
color : #<?php echo $color; ?>;
…and link that file from the
header like you always do;
<link rel="stylesheet" type="text/css" href="style.css.php?v=2" media="screen" />
When you have a markup / DOM like this;
<p>Guess what <b>color</b> I am...</p>
…the bold word will be plain red.
Thanks for all the great replies! I kind of figured what I was doing was out of date and slightly janky. I’ll try out some of these suggestions.
I’ve gotten sass up and running using the terminal! I used http://sebastianpontow.de/css2compass/ to get started (I already had a site approaching completion).
It was a simple task to replace the php variables I had with sass variables.
I took a look at codeKit and it’s not quite my style, but looks like a good tool.
I have a lot of fields in the panel that style the page dynamic.
To access the $page object i need to put in a snippet right !?
So I have a snippet file called style.php.
Now I am just :
background: <?php echo $page->color(); ?>;
Is this a good solution or can I do something else that´s better ?
That’s just fine. You can also include the same code in the
header.php snippet or in your template, there’s no need for a separate one.