Help getting a custom styles php file working

[onjegolders]

Inspired by Soma's Colorpicker module I'm trying to implement some custom styles for links, backgrounds etc.

Martijn said it was possible to add a php file with css in it and echo out the variables in that.

I've tried but can't seem to get it going. I've added a custom_styles.php file outside of templates because I believe you cannot have PHP scripts running in there and I've added

<?php header("Content-type: text/css"); ?> to the top of the file as advised by Martijn but none of the variables are getting parsed.

Has anyone got anything similar working.

Currently I'm using Diogo's suggestion of inline styles in the head tags but it just feels a bit wrong (but it is working)

[diogo]

correction: They are not inline styles. These are inline styles <p style="background:#ccc; color:#fff; border: solid black 1px;">

edit: Anyway, have a look at this http://css-tricks.com/css-variables-with-php/, I think you could even use a pw template to achieve it.

[onjegolders]

Hiya, yep sorry about the mix-up that's what I meant.

I've actually seen the CSS tricks article but couldn't get what he describes to work.

He mentions that to get it to work on WP he had to change the htaccess file, wasn't sure if PW would be similarly effected.

I can't seem to get $pages and other API calls to work in my styles.php file.

[interrobang]

If you want to access the processwire api from external scripts you have to include processwires index.php there

see here: http://processwire.com/api/include/

[Martijn Geerts]

If you bootstrapped it, don't know for sure if you can asked pages with $pages->get... etc.

wire('pages')->get('/lalala/')->children(); would work then....

[onjegolders]

Thanks Martijn

I finally have it working with the following steps for all those interested.

Create a file eg custom_styles.php outside of the templates folder

<?php header("Content-type: text/css"); ?>

<?php include("file://localhost/Applications/MAMP/mamp_sites/pw_template/index.php"); 

?>

<?php 

$link_color = $wire->pages->get("template=settings")->link_color;

?>

.test_header {
color: #<?php echo $link_color; ?>;
}

Make sure to use $wire rather than $pages

[diogo]

I don't know the drawbacks of this, but I just managed to do make the dynamic stylesheet proposed on css tricks work has a pw template. So, this is how to do it (someone stop me if this is a bad bad thing to do):

1. Create a template file css.php and put all your css code inside. On the top of the file put this code <?php header("Content-type: text/css"); ?>.

2. Create a "css" PW template with that file.

3. Create a "css" page and give it the "css" template.

4. Link to the stylesheet like this <link rel="stylesheet" href="<?php echo $pages->get('/css/')->url; ?>">.

5. use the PW API on your stylesheet

Extra:

6. put some fields on the "css" template and use them on your css

Examples: the color picker field for colors; an image field with your style pictures (background, logo, etc).

edit: onjegolders was faster!

edit2: not the same answer. Mine is more interesting

[onjegolders]

Yours is way more interesting!

Is there any benefit to creating a page in the admin?

I'm just creating a variable $settings which is a shortcut to my settings page and then getting

$settings->link_color

$settings->header_font

etc

On another note, I'm trying to think of the best way to give them a choice of fonts (I know, I know, this is turning into Wordpress

At present, I'm just using a text field and then in the description giving them choices they can enter and if they enter something wrongly, it just falls back to default font.

[diogo]

Is there any benefit to creating a page in the admin?

You don't have to bootstrap PW, and you can use $pages instead of $wire->pages.

I'm trying to think of the best way to give them a choice of fonts

I think page field with radios input would be better for this. You will have to create a page "fonts" with a page for each font inside, and define has parent for the page field.

[onjegolders]

You don't have to bootstrap PW, and you can use $pages instead of $wire->pages.

I think page field with radios input would be better for this. You will have to create a page "fonts" with a page for each font inside, and define has parent for the page field.

Hmmm good point about not having to bootstrap, will have a think.

I thought about adding pages for fonts but it seemed a but ridiculous having a page just to give them a font choice!

[diogo]

I thought about adding pages for fonts but it seemed a but ridiculous having a page just to give them a font choice!

I know, but this is how choices work in PW. You'll get used to it

[OrganizedFellow]

I bookmarked this LONG ago.

I thought it was in my Chrome bookmarks ... NOPE!

Hello Evernote, you sly dog!

I'll have to try this later though.

[KentBrockman]

We just ran in a similar problem, but from another point.

You have to pay attention, that you do not use ProCache to cache the processwire-generated .css file, because ProCache overwrites the header to Content-type: text/html.

[Macrura]

@KentBrockman, couldn't you put this into htaccess?

# CSS
AddType text/css .css

[KentBrockman]

Good idea! It's quite interesting.

If I add your command to the htaccess-file the header is send correctly, but the Browser still don't see the file as a vaild .css file. 

Weird.

[Macrura]

i don't think ProCache is overwriting the header - i think that it is serving the file that is generated from a .html file in the cache, and since those files are .html , they will always be sent as text/html; would be curious if there were some magic htaccess way to make it work