Control site CSS through a Site Settings page?

[daniel-not-dan]

Just curious...
 
I noticed in Joss's Bootwire Demo Profile that you are able to set the header background image and the color of the header text in his Settings page. Looking at his header.inc file, I see that when the header is loaded, the color & image you select goes into the HTML by way of an inline style tag: 

<div class="hero-unit" style="background:url(<?php echo $pages->get("/content-management/site-settings/")->site_header_banner->url; ?>) no-repeat;color:#<?php echo $pages->get("/content-management/site-settings/")->site_header_text_color; ?>;">
 

My question is (as someone not super familiar with either PHP or javascript) - would there be a way to do that but without putting it into the template file? In other words, can the Settings page control the CSS file, either directly, or using some javascripty thing?

I have no problem doing it this way, but as someone who's been told that style and structure need to be separate, I'm curious if it's possible. Especially if, say, I wanted to create a Setting that would change ALL the headers on the site to a different font-family.

If there's already a topic that addresses this, feel free to just point me in that direction - I couldn't find it.

Thanks!

[pwired]

would there be a way to do that but without putting it into the template file? In other words, can the Settings page control the CSS file, either directly, or using some javascripty thing?

That would be an interesting alternative to edit your css and also your js ? I remember modx evo was doing this trick also by using a document in the site tree. I guess the same could be done with a page field in processwire. Checking on it.

[diogo]

have a look at this post http://processwire.com/talk/topic/2210-help-getting-a-custom-styles-php-file-working/?p=20641

[Joss]

I think finding a balance here is quite important. If you did too much via a settings page it could get very unmanageable!

On another demo I am doing, I am creating alternate style sheets in my CSS directory and then using a page select field to include them into a page.

So:

1. create alternate CSS styles sheets for specific classes (try to keep it carefully defined rather than do everything)
2. create a template without a file with two fields - title and another text field. Call it "my-themes" or something
3. Use that template to create a series of pages - in the Title put s friendly description of the style sheet (blue one with a fringe!), and in the other text field put the actually name of the style sheet
4. Create a page field that looks for your my-themes pages and use that in your normal templates.

In your header template file, look for this page field - if it exists then use the value to link to that style sheet, if it doesn't, then make it use a default version.

This way you can create lots of style sheets and the user can just pick the one they want - and then leave fields for specific classes just for the occasional bits, like the background in a box or something.

[daniel-not-dan]

Thanks, gents!

I'm inclined to follow the advice from the thread diogo linked to. That seems to be a more accurate answer to what I was asking, but I love hearing the variety of solutions!

I will have to play around with this for the next few hours...

[Mass Harry]

way of calling css in processwire?? because I am still a beginner .... please help me ..master

[pwired]

This is easy. Ryan explained some time ago how you do that. Make fields with type text. Fill the fields with the path to your css file (works also for js files). Put your css file in : templates/styles/subfolder/file.css

(use a subfolder to separate and organize your files)

On your template file or head.inc file you output your css like this:

<?php
        $file = "styles/$page->css1";
        if(is_file($config->paths->templates . $file)) {
          echo "<link rel='stylesheet' media='screen' type='text/css' href='{$config->urls->templates}$file' />\n";
        }
 

What this does is assign the path styles/subfolder/file.css to the variable $file

Then it checks if the file.css is really there.

If yes then it outputs file.css

<link rel='stylesheet' media='screen' type='text/css' href='/domain/site/templates/styles/subfolder/file.css' />

You can do the same for js files.

This is a conditional way for outputting css or js files so you can put the above code inside head.inc

or put it in any template file.