Help applying CSS to templates

I’m a little confused as to how I apply CSS formatting to my templates. I’ve tried doing a traditional

within the HTML of the template, but that didn’t work, nor does using the style element.

In addition, how do I apply CSS to a template variable? For example, I want to be able to generate pages with questions and answers so for example in the template the code is:



How do I apply CSS to those TV’s like [*question3*] and so on? Oh and I’ve also tried creating a CSS document within the MODX file tree and referencing it in the head section using but that didn’t work either. Help! Any info in general about integrating CSS into templates would be much appreciated.

As with any HTML document, your link has to point to where the .css file actually is. Usually they are stored in the assets/templates/(whatever your template name is)/ folder; for example, if I create a template named "my_template" and the .css file was named my_template.css, it would be in assets/templates/my_template/my_template.css.

Keep in mind that all of your site’s pages are based on the main index.php file, so your paths will need to be relative to that file.

Ok thanks for the info so far.

If you rephrase that question: "how do I specifiy special CSS which is only used on one single page?"

I don’t want it for a single page, though. These TVs ie [*question1*] will appear on a number of different pages. I just want [*question1*] to have the same font and formatting across numerous pages.

Maybe in your template, something like this:

<div class="question1">[*question1*]</div>
or
<span class="question1">[*question1*]</span>

or add the <div> or <span> or <p>directly into the TV itself:
[*question1*] content:
<div class="question1">This would be the TV content</div>

then in your css file:

.question1 {
styles here
}

Come on...what the heck? This seems like a pretty fundamental part of MODx and no one knows how to do it?

Kupo,

I understand your frustration but it is only because you are not fully understanding how they work. TVs are nothing but custom fields for outputting custom content (extremely flexible and powerful ones) you still need to wrap them in HTML that will be used to present them. If you look at the MODx templates you will see that the document variables such as [*content*] are contained typically in a <div> element often with a class or ID to style it.

@Breezer’s comment was correct. In your template you apply wrapper HTML to the content and then create CSS rules to style the HTML.



If you are still having problems, please let us know.