Jump to content

Control site CSS through a Site Settings page?


Recommended Posts

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.


Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.


  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.

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

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:

        $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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...