Embedding Template Variables in MODx CSS document. Evolution 1.0.0

I’ve read everything I could on modx css documents and am really shocked that
there is no real chatter on the lack of ability to embed template variables in a modx css document.
Once Susan determined that you can’t call a template variable into a blank document no one really kicked back or seamed to worry about it.

I am able to create (blank?) css documents and utilize css chunks to call other css chunks but that does not serve a better purpose than simply editing css in external files.
You can only call chunks into chunks and can not call template variables or snippets. This removes the ability to make changes
based on a VARIABLE and leads to an unwieldy amount of small chunk calls.
Just as well to call in and work from external style sheet.

I find a real need to embed template variables directly in my css chunks.
So I have some questions below and would like some additional feedback from other MODx users on their workarounds and experience with utilizing css as modx documents.
I hope I am posting under the correct topic.


1. With a complete rewrite for Revolution: Are their real css documents (non blank)? So that you can include template variables? (Can I look forward to this?)

2. Are there any snippets that can serve as a work around to this situation? I can not find any. I can not get template variable or snippet calls to work in (blank) css document.

3. Is it even possible to create or write php to modify Evolution 1.0.0 to have a real css document? Instead of utilizing a blank document with text/css?

4. For those utilizing the blank css document method - How do you maximize flexibility of the chunk calls?

My typical non dynamic - CSS methodology has always been to create a global style sheet that drives all the framework, navigation and fonts
and then call in one or two additional page specific style sheets that control page specific structure changes.

for example:

<style type="text/css">
@import "css/global.css";
@import "css/contact.css";
@import "css/form.css";
</style>

What I can see as the major advantage of template variables embedded in a css a document is the ability to dynamically assemble pieces of css called from the database.

Thanks in advance.

William

Quote from: webarnes at Oct 10, 2009, 09:14 AM

1. With a complete rewrite for Revolution: Are their real css documents (non blank)? So that you can include template variables? (Can I look forward to this?)

I don’t understand this non-blank CSS documents question. You can create a Template with just [*content*] in it to use for CSS Resources like you can any type of Resource. And you can attach Template Variables to them as well, though I’m not sure that is exactly what you want since the Template Variable values would come from the CSS Resource itself, and not the HTML Resources that load this CSS Resource. What you probably want is a Snippet to grab Template Variable values for a current HTML Resource inside the CSS Resource. This could be done by passing the current Resource id into the CSS element via GET parameters, e.g.

where 20 is the id of the CSS Resource.

Quote from: webarnes at Oct 10, 2009, 09:14 AM

2. Are there any snippets that can serve as a work around to this situation? I can not find any. I can not get template variable or snippet calls to work in (blank) css document.

A CSS Resource works like any other in MODx, so Snippet calls (and Template Variable calls) work the same, except you have to realize that the CSS Resource has it’s own id and does not automatically use the id of the HTML Resource which is loading the CSS. See the example above on how to send the current Resource id into a MODx CSS Resource.

Quote from: webarnes at Oct 10, 2009, 09:14 AM

3. Is it even possible to create or write php to modify Evolution 1.0.0 to have a real css document? Instead of utilizing a blank document with text/css?

Again, you can create a dynamic MODx CSS Resource like you can any MODx Resource with any custom Content Type.

Quote from: webarnes at Oct 10, 2009, 09:14 AM

4. For those utilizing the blank css document method - How do you maximize flexibility of the chunk calls?

What flexibility do you mean? Again, this idea of a "blank" CSS document method does not make sense to me. You can choose to use a Template or not.

Quote from: webarnes at Oct 10, 2009, 09:14 AM

My typical non dynamic - CSS methodology has always been to create a global style sheet that drives all the framework, navigation and fonts
and then call in one or two additional page specific style sheets that control page specific structure changes.

for example:

<style type="text/css">
@import "css/global.css";
@import "css/contact.css";
@import "css/form.css";
</style>

What I can see as the major advantage of template variables embedded in a css a document is the ability to dynamically assemble pieces of css called from the database.

You can absolutely do that, just remember the CSS Resource has it’s own id. And it is somewhat of an advantage, but this also has disadvantages: the overhead on executing PHP to return a CSS Resource is much greater than using a static CSS file served by Apache. Though you can use a snippet in CSS Resources (in Evolution; in Revolution you can configure custom headers in the Content Type itself) to alter the default MODx headers to properly handle CSS caching, passing GET parameters as in the example above will mean that caching of this CSS is per Resource, not side wide, further reducing your CSS performance. So you need to weigh the advantages and disadvantages of using dynamic CSS before deciding if this is appropriate. For instance, does the maintenance benefit of using dynamic CSS Resources outweigh the disadvantages of additional loading time for your pages. If you are developing a high-performance site for high-traffic, the answer is a resounding no as it will limit your ability to optimize load times and server resource utilization.

Hope that helps.

@opengeek:
Thank you very much for the comment.
Judging by your response I’ve created some confusion.

I do apologize and will utilize your response to help clarify my intent.

Response 1:

---

is the method in reference to the wiki here:
http://wiki.modxcms.com/index.php/Dynamic_CSS_with_TVs#The_Structure

This page is a tutorial on calling the modx css document into your page template through a template variable.
I do not have a problem calling the modx css document.

The problem stems from the css document.
Read through post here:
http://modxcms.com/forums/index.php/topic,5258.0.html

I get this and everything works fine as well.
Scroll down the post on the above forum post to 8:06pm post by sottwell and you will see the issue I am referring to.


Response 2:
A CSS Resource works like any other in MODx
Response 3:
Again, you can create a dynamic MODx CSS Resource like you can any MODx Resource with any custom Content Type.

---

I wish I knew how. I would not intentionally waste everyones time.
Can you point me to a tutorial or wiki?
Although I’ve tried to find one it is very possible I’ve overlooked it.

Response 4:
What flexibility do you mean? Again, this idea of a "blank" CSS document method does not make sense to me

---

Read through the post here:
http://modxcms.com/forums/index.php/topic,5258.0.html

You need to set the template to blank. It is the entire root of my problem.

The flexibility I refer to is being able to set page specific css rules by utilizing the template variable.

very basic example.

template variable
bodyID

<body id=[*bodyID*]>
<table>
<tr>
<td class="two_clLft">{{example_Data_Chunk}}</td>
<td class="two_clRgt">{{example_Data_Chunk}}</td>
</tr>
</table>
</body>

css
Global rules

.two_clLft{
margin: 0;
width: 465px;
padding: 0;
}
.two_cLRgt{
margin: 0;
width: 465px;
padding: 0;
}

template variable


#[*bodyID*] .two_clLft{
background: transparent url(../img/lftBgTile.gif) repeat-x scroll 0 0;
}
#[*bodyID*] .two_cLRgt{
background: transparent url(../img/rgtBgTile.gif) repeat-x scroll 0 0;
}


My needs are more geared to calling specific chunks to a master css document.


Final summary.

---

I agree. It is a fine balance determining the latency between http requests / server calls.

But I’ve always utilized the analogy of pushing a golf ball or pack of bb’s through a hose.
With the golf ball you only need to put one ball in. It is large and takes longer to get through the hose.
When it comes out the other end it is there.
With bb’s you need to slowly load them in the hose so they don’t spill. Once in the hose they easily fit and haul ass to the other end.
On the other end they need they need to be gathered back up again.
Both have pros and cons. I try to fall somewhere in between.

As in my example:

<style type="text/css">
@import "css/global.css";
@import "css/contact.css";
@import "css/form.css";
</style>

the global css assembles all the constants. It is a large chunk.
The contact css only assemble the page specific framework. Such as calling in google map or something special.
I may have multiple forms across the site and they need to be consistent. So I only call forms.css when needed.

Thanks again.

Best regards,
William

Quote from: webarnes at Oct 10, 2009, 11:54 AM

@opengeek:
Thank you very much for the comment.
Judging by your response I’ve created some confusion.

I do apologize and will utilize your response to help clarify my intent.

is the method in reference to the wiki here:
http://wiki.modxcms.com/index.php/Dynamic_CSS_with_TVs#The_Structure

This page is a tutorial on calling the modx css document into your page template through a template variable.
I do not have a problem calling the modx css document.

The problem stems from the css document.
Read through post here:
http://modxcms.com/forums/index.php/topic,5258.0.html

I get this and everything works fine as well.
Scroll down the post on the above forum post to 8:06pm post by sottwell and you will see the issue I am referring to.

Your intent is perfectly clear to me; I’m trying to clear up your confusion from the false statement that a CSS Resource must have no template (i.e. empty). As I described, you can create a template with just the [*content*] tag in it and create all the Template Variables you want, but the caveats I described are what Susan means when she says that Template Variables won’t work in CSS Resources. Because the Template Variables would be associated with the CSS Resource and not the HTML Document from which you are calling it from.


Quote from: webarnes at Oct 10, 2009, 11:54 AM

I wish I knew how. I would not intentionally waste everyones time.
Can you point me to a tutorial or wiki?
Although I’ve tried to find one it is very possible I’ve overlooked it.

Read through the post here:
http://modxcms.com/forums/index.php/topic,5258.0.html

You need to set the template to blank. It is the entire root of my problem.

But you do know how; all I did was explain the same thing they are talking about in that wiki article, with further clarification that you do not need an empty Template. You can create one and use it, but this alone does not solve your issue...

Quote from: webarnes at Oct 10, 2009, 11:54 AM

The flexibility I refer to is being able to set page specific css rules by utilizing the template variable.
...
My needs are more geared to calling specific chunks to a master css document.

Ok I think I see what you are trying to do. The trick here is in the CSS Resource, you need to use a Snippet to call the bodyID for the HTML Resource you are including the CSS Resource on (via your Template Variable method), but in order for the CSS Resource to be aware of what HTML Resource is including it, you must pass a GET variable like I described earlier.

So instead of using this crazy method in the wiki, here are two simple approaches:

APPROACH ONE: Pass the value of the Template Variable to the CSS Resource
Create a Template Variable and place this in your HEAD section, in which you put something like this:

Then, create a simple Snippet called GetBodyID that does the following:

And place the snippet call in your CSS Resource content:


OR

APPROACH TWO: Pass the current Resource id to the CSS and use GetField

Install the GetField Snippet, create a Snippet (again named GetBodyID) that gets the value of $_GET[’resource’] and calls the GetField snippet with that value:

And call it the same as above in your CSS Resource content.

Does that help illuminate the issues better?

yes!
Thank you.
It is enough information to keep me busy experimenting.

You Rock.

William