Thread

This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.

The active forums are here.

Use PHP in CSS?

June 15, 2009 7:05pm

Subscribe [3]

#1 / Jun 15, 2009 7:05pm
mayest
293 posts
I find it to be a giant pain to keep track of colors in my CSS template, so I would really like a way to define them in one place and then replace the color code (e.g., #698B69) with a meaningful variable name.

So, I thought that parsing the CSS template through EE would allow me to use PHP or, maybe, global variables. However, I can’t seem to figure out how to do this. This knowledgebase article gives two methods. The first is to use a direct link to the CSS template, but that doesn’t send the proper headers and may cause problems in some browsers. I don’t want that. The second method is to define the styles that need to use dynamic variables in the <head> tag. I can do that, but I may as well move the entire CSS template into the <head> tag.

In this post Lisa gives the syntax to use with a path= variable. Here is what I’m using now, and it works but won’t use PHP or global variables:
```
<link rel='stylesheet' type='text/css' media='all' href="{stylesheet={embed:style}}" />
```
and here is how I tried to implement the code that Lisa posted:
```
<link rel="stylesheet" type="text/css" media="screen" href="{path={embed:style}}" />
```
This syntax doesn’t work, and I lose all CSS formatting. Even if I replace {embed:style} with the actual path to the CSS template, it still doesn’t work.

Any idea why I can’t get this to work? Or, is there a better way to use variables in my CSS? I’d really like to define the variables at the top of the CSS and then just reference them when needed. That would make my life a bit easier.
#2 / Jun 16, 2009 2:51am
Ingmar
29245 posts
OK, let’s take one step back:
```
<link rel="stylesheet" type="text/css" media="screen" href="{path=styles/my_css}" />
```
would reference your CSS. Since you are not using the stylesheet= method you can use all EE tags, including global variables, there. That includes PHP as well, if you have turned it on for that template.
#3 / Jun 16, 2009 4:38am

mayest
293 posts

Ingmar, thanks for posting. I took another look and tried your code and it still didn’t work. Whenever that happens, I check my .htaccess file. Sure enough, since I’m now calling the CSS file directly, I had to add it in (I’m using the include method to remove index.php). Once I did that, it works. I’ll try using global variables tomorrow. I’m sure that won’t be a problem now.

I’m starting to think that there should be two standard answers to most EE questions: 1) use dynamic=“off” and if that doesn’t solve it 2) check your .htaccess file. 😊

Much appreciated!
#4 / Jun 16, 2009 6:03am

Neil Evans
1403 posts

do you have to use php for this?
http://disruptive-innovations.com/zoo/cssvariables/
#5 / Jun 16, 2009 7:48am

Ingmar
29245 posts

I’m using the include method to remove index.php). Once I did that, it works.

Ah, the joys of server side rewrites… Yes, you’re responsible for them yourself 😉 Glad you got it working.
#6 / Jun 16, 2009 6:47pm

mayest
293 posts

do you have to use php for this?
http://disruptive-innovations.com/zoo/cssvariables/

That looks like a great idea. In fact, it is exactly what I would have expected to be available in CSS since the beginning. BUT, that looks to me like it is just a proposal. Is it actually supported at all?

Also, I didn’t understand what happens when a non-compliant browser displays the page. If you had defined a bunch of colors to variables, would they all be the same default color?

BTW, I decided to go with global variables instead of PHP. It just seemed easier since I just wanted to define some default colors in one convenient spot. Plus, my CSS file isn’t littered with PHP code.
#7 / Jun 16, 2009 7:54pm

lebisol
2234 posts

Completely not EE related but…
I find it to be a giant pain to keep track of colors in my CSS template

look into TopStyle as your editor (or equivalent) which has a nice color palette editor…really handy especially for ‘theming’ and for visual summary of colors used as well as quick edits (no find & replace needed).
#8 / Jun 17, 2009 5:15am
Ingmar
29245 posts
I have always used global variables in my .css files:
```
{assign_variable:color_1="#666"}
{assign_variable:color_2="#fefefe"}

body
{
    color: {color_1};
    background-color: {color_2};
}
```
You get the idea 😊