Create a Dynamic CSS File in MODx

ModxIn a previous post, Create a User Config Page in MODx, I referenced how you could create a dynamic CSS document in MODx. While on most of my development projects I haven’t found this to be a necessary step, there are a few occasions in which this capability can provide a lot of flexibility.

Create Your Document

In order to create a CSS document in MODx you will create a new Resource (page). First, Title your document something like ‘CSS’, enter the URL alias as ‘style.css’, select (blank) beside Uses Template and uncheck the Show in menu checkbox. Next, under the Settings tab, uncheck Searchable to keep the page from showing up in a site search and then uncheck Cacheable if it is appropriate for your usage.

This should generate a style.css document that you can reference in your HTML head like:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Usages

In my example post, Create a User Config Page in MODx, I was giving the end user the ability to control Template Variables (TV) that were being called into the CSS document with a GetField snippet:

body{background:[[GetField? &docid=`1` &field=`backgroundColor`]];}

This can be applied to any CSS attribute like font color, link color, background color/images, etc…

It is also conceivable that you could use the PHx snippet to display different attributes depending on which template ID is in play or to display a default attribute unless a TV field is populated, allowing the TV to override the default attribute:

[+phx:if=`[[GetField? &docid=`1` &field=`backgroundColor`]]`:is=``:then=`#8fc644`:else=`[[GetField? &docid=`1` &field=`backgroundColor`]]`+]

I have used the above example to display a default background image in a site header. My designer then wanted a few, select pages to display different header images. I then created a template variable with an ‘Image’ Input Type and if these TVs were populated, the header displayed a different background image only on that page.

These are just a couple of examples of how this technique can be adapted for your site(s). What’s really exciting for me is that CSS is my “first love” and how broadly this could applied to site developments.

19 Comments. Posted by on Thursday, February 11, 2010 at 9:57 am.

Filed under CMS, Development.

  • Tom

    Do you know of any other resources like this that I can read toward understanding how to insert text in the <head></head> section according to which document ID it is?? Do I use the phx code, what??

    Thank you, Tom

  • http://www.gregorysmart.com Gregory Smart

    If you are wanting to do it based strictly on document ID then yes, PHx would be what you would use. Here is an example of a nested call that first assesses the template ID then, if that template ID is not found assesses the document ID, if that criteria is not found it then outputs a third option (anotherchunk): <div style=”width: 200px;”">[+phx:if=`[*template*]`:is=`2`:then=`{{anotherChunk}}`:else=`[+phx:if=`[*id*]`:is=`1`:or:is=`3`:then=`{{chunk}}`:else=`{{otherChunk}}`+]`+]</div>

    I have also used @INHERIT binding with TVs placed in a header. This approach allows a kind of default include that can then be changed on a per document basis.

  • Tom

    I want to evaluate the *document* ID, not the template ID, this phx call needs to go into the template itself…so I don't need 40 billion templates.

    Can I use *document* instead of *template*??

    Where do I find out about @inherit to do what you suggest??

    MODx' weakness is not enough documentation and working samples.

    Thank you, Tom

  • Tom

    I have read your reply several times more…I did not correctly understand it before my earlier reply…It looks at the template first, then at the docids, sorry…but generaily I would use it only in my most-used template so it can handle many different kinds of pages.

    Where do I put this kind of code so Modx 'knows' to read and use it?? — in the template itself??

    Thank you for your patience…

  • http://www.gregorysmart.com Gregory Smart

    The second, nested portion of that statement had to do with using the document ID: [+phx:if=`[*id*]`:is=`1`:or:is=`3`:then=`{{chunk}}`:else=`{{otherChunk}}`+]

    I was planning on posting another (at) Binding article tomorrow. I will make it on the @INHERIT an will provide examples.

  • Tom

    Thank you…where do I place the phx call?? — in the template?? — in the glove compartment?? :) :)

    That was my 2nd question. Once I know this I can work away at this.

    Thank you, Tom

  • http://www.gregorysmart.com Gregory Smart

    I tend to create a chunk to place the PHx code in. It allows me quick and easy access to the code. I would then go to the head (or wherever you want the statement) of the document and place the chunk there {{yourChunk}}.

  • Tom

    Thank you for your quick reply. I will try this out tomorrow.

    It should do what I need, and I will look forward to your bindings article too.

    Thank you, Tom

  • Pingback: My MODx Template Strategy | Greg Smart

  • http://e-stonia.co.uk/ e-Stonia Web Developers

    Weird, I created style.css document and it shows fine when I go to mydomain.com/style.css but when I link it as a CSS file at template then nothing happens:S

  • http://e-stonia.co.uk/ e-Stonia Web Developers

    Got it working now. The trick was to make the media type to: text/css as by default it was text/css.

    Thank you very useful idea:)

  • http://e-stonia.co.uk/ e-Stonia Web Developers

    Just wondering now weather it's possible to make it possible to choose page backgroud color or whatever else in CSS different option on each page.

  • http://www.gregorysmart.com Gregory Smart
  • http://e-stonia.co.uk/ e-Stonia Web Developers

    I checked that post and from there the initial idea came – but that doesn't solve the issue. There I can define from which page's template variable for example the color is taken. But I want to define the color for every page I create. For example I want to create a TV called “ColorCode” and then define it for every page I create.

    If I just create TV “ColorCode” and add to CSS [*ColorCode*] then that obviously won't work as it will look what's the TV value in CSS document's “ColorCode” TV.

  • http://www.gregorysmart.com Gregory Smart

    I generally try to avoid in-line CSS statements, but in a case like this it
    could be the most direct approach. I would create a PHx statement (place it
    in the header below the primary CSS document call) something
    like: [+phx:if=`[+yourTV+]`:is=“:then=“:else=`inlineCSSwithTVcolorcode`+].
    I would also define a default attribute in the primary CSS document, if a
    call to the same attribute is found later in the HTML document it will be
    respected.

    Thanks, Greg.

    Greg Smart
    Project Development
    Pleth, LLC
    1-888-276-0848

  • http://e-stonia.co.uk/ e-Stonia Web Developers

    Thanks a lot! That works just perfect. Simple solutions that often just doesn't come to mind:)

  • Pingback: Creating a User Config Page in Revo | Greg Smart

  • http://www.facebook.com/pages/e-Stonia-Web-Solutions/119158864780797?v=app_4949752878&ref=ts e-Stonia Web

    Actually the solution was to have the part of the CSS code (where I need to be able to change values for each page separately) in a chunk and then I can have in the chunk TV. So I can let customer for example choose header image for each page via TV and header image is defined in CSS.

  • http://www.gregorysmart.com Gregory Smart

    I have also ran across this Revo color picker lately, it has been working well for me: http://modxcms.com/forums/index.php?topic=59277.0