Designating css in template variable not working

Hello all and many thanks to the developers for such a powerful product. I am new to MODx, css and html so an ultra-newbie.

I am trying to call the css as a template variable and it is not working. I’ve spent many hours playing, troubleshooting, googling and searching the forums. There’s lots of information but, even after following the good how to’s, I’m still not working.

I’m running MODx 0.9.5 on Ubuntu 6.0.6 with MySQL 4.1.15 and PHP 5.1.2 and working in Firefox 1.5.0.11.

I do understand that I cannot use template variables within a css. For that, I’ve used a style tag in my template header to do things like control the background image. However, I’d like to be able to have the editors choose from among varying css for different sections of the site.

I created a TV named CSS with input type number, a default value of @INHERIT and no widget and assigned it to my basic template.

I created a folder named CSS and in it created a document named css_basic with an alias of basic2.css. It used a blank template, is not included in the menu, it is published, is not a container, is not searchable, is not rich text, is type text/css, does not log visits and is inline. It is a simple, functioning css and has been tested when called externally. The parent container is id 4 and the basic.css is id 5.

In my template, I’ve tried (not together but separately):
<link type="text/css" href="[(site_url)][~[*CSS*]~]" rel="stylesheet" />
<link type="text/css" href="[(site_url)][~5~]" rel="stylesheet" />
<style type="text/css">
@import url([(site_url)][~5~]);
#container { background: url([(site_url)]assets/images/[*BackgroundImage*]Trans.jpg);}
#mainbanner { background: url([(site_url)]assets/images/[*BackgroundImage*]Banner.jpg);}
</style>

Friendly URLs are enabled with no default extension and with friendly alias path enabled.

I set the template variable in my home page to "5". No matter what I do, it does not find the style sheet or does not parse it.

When I look at the source for my preview, I see:

<link type="text/css" href="https://localhost/sow/4/basic2.css" rel="stylesheet" />

I do not want to use the alias. I’d like to use the TV value. What am I doing wrong? Thanks - John

I have ultimately resorted to creating my stylesheets in the directory structure (e.g., assets/css/basic.css). I then created a drop down list template variable with entries such as basic.css||basic2.css||basic3.css

It works but it looks like it eliminates any fancy use of Chunks or Snippets in the CSS. I’d still like to figure out why I can’t get MODx documents to work as stylesheets.

I also noticed another odd behavior. When I first created the drop down list tv, it did not take effect. I had this same problem when I created drop down list tv’s for the background image for the style tag in my templates. I went to the web page, clicked edit, clicked the drop down list, made my selection and saved my changes but the tv was not working. In both cases, if I changed the tv to some other input type, e.g., radio button or list box, it then worked. After doing that, if I changed back to drop down list, it worked. Is this a bug or am I doing something wrong? Thanks - John

Quote from: gracedman at Mar 30, 2007, 11:29 PM

I created a folder named CSS and in it created a document named css_basic with an alias of basic2.css. It used a blank template, is not included in the menu, it is published, is not a container, is not searchable, is not rich text, is type text/css, does not log visits and is inline. It is a simple, functioning css and has been tested when called externally. The parent container is id 4 and the basic.css is id 5.
John

Hi John, I am new to Modx too, haven’t tried to learn to use TV therefor I can’t help you with this, however, I do not think you should put your style sheet in Document thought. The Document is for the content area, you can call out CSS divs like so in Document content area.

<div id="dropdown">
<ul><li>you menu link</li>
</ul>
</div>

You link the style sheet in the header of your template; also, it maybe less confusing if you simple link the style sheet like so:
<link href="css/yourcssfile.css" rel="stylesheet" type="text/css" media="screen"/>

and the below ID selectors should go inside your css file.

#container { background: url([(site_url)]assets/images/[*BackgroundImage*]Trans.jpg);}
#mainbanner { background: url([(site_url)]assets/images/[*BackgroundImage*]Banner.jpg);}


I don’t know why you are using something like this:
background: url([(site_url)]assets/images/[*BackgroundImage*]Trans.jpg)

Perhaps it’s for different templates purposes but I think until you are comfortable with CSS, HTML and Modx, it will be easier to do something like this

#container { background: url(assets/images/Trans.jpg);}
#mainbanner { background: url(assets/images/Banner.jpg);}

Hope this helps a bit

tgp

Thanks for the reply. I did it that way to take advantage of the TVs. They seem very powerful.

It appears that the document tree can be for more than documents, e.g., there is a setting for a document to make it of type text/css and there are instructions in the wiki and in the forum on using documents as css. That’s a slightly different issue than using TV’s for styles. In fact, that seemed to be an issue of confusion even on this forum. Thus, I split the issues.

For example, I wanted to give the editors the option to select from among several different backgrounds depending on the mood they were trying to create, I elected to move that into a style descriptor in the header instead of in the style sheet. One cannot use TVs in a css since a css does not have a template and TVs are bound to a template. By using TVs, it allows me to use the same basic css and thus the same template rather than creating different templates just to offer background options. The reason why I used the somewhat strange convention of:

#container { background: url([(site_url)]assets/images/[*BackgroundImage*]Trans.jpg);}
#mainbanner { background: url([(site_url)]assets/images/[*BackgroundImage*]Banner.jpg);}

Is because the images are in matched pairs between the content area (largely transparent) and the branding area (slightly transparent). The editor can choose WheatCoarse||WheatFine, etc., and it will set both images.

The issue of using a css drawn from the document tree is different. This seems to be a tradeoff between power and performance. I gather the external style sheets are cached by the client and thus faster although there was some question about whether document tree style sheets could be cached to offset the performance hit. On the other hand, a css in the document tree can use chunks for simplifying administration and snippets for dynamic effects. At least that is my understanding.

So, two questions for the forum:

1) Is the above accurate and a good use of both style sheets and TVs?
2) Why are my document tree style sheets not being found and/or parsed?

Thanks all - John

Ah yes, thanks for the clarification. I went ahead creating a TV for Dynamic CSS. Indeed very powerful, and actually the first sweet taste I havefor Modx .

The tutorial in Wiki is clear and easy to follow. Perhaps you overlook a step or two? Can you take screenshots of your settings for CSS template, TV and main template’s header section for us to look at?

Quote from: gracedman at Mar 31, 2007, 01:22 PM

Thanks for the reply. I did it that way to take advantage of the TVs. They seem very powerful.
The reason why I used the somewhat strange convention of:

#container { background: url([(site_url)]assets/images/[*BackgroundImage*]Trans.jpg);}
#mainbanner { background: url([(site_url)]assets/images/[*BackgroundImage*]Banner.jpg);}

I am still not understand this [*BackgroundImage*] thing that you placed inside your ID selectors. It looks to me you are inserting a snippet call(?)

Please enlighten. Thanks!

tgp

Sorry I took so long to get back to you. [*BackgroundImage*] is a template variable. It allows the editor to choose from several different images to set the background image. The background consists of two related images and thus the dual references to BackgroundImage - John

It appears my problem is not at all related to dynamic css. Friendly URLs are broken on my site. I’ll peruse the forums for a solution to that problem - John

Interresting discussion !
Thanks gracedman for illustrating your experiments it’ll be very useful to lots of MODx users

Maybe you could add a few lines in the wiki there are some very clear and useful info in there !

Finally got it! It was indeed the friendly urls. I needed to edit the .htaccess files to enter the subfolder in which I had installed MODx in the RewriteBase parameter. Then I needed to edit my apache configuration. The config file installed by Ubuntu Feisty had a <Directory> context for /var/www/ with AllowOverride None. I created a new <Directory> for /var/www/modx/ with AllowOverride All and it all started working! Thanks, all - John