Answered Problem with referencing a document (containing css) in a template

I've created a new document, set the template to be empty and the content type to css. And used <link rel="stylesheet" type="text/css" href="[[~9]]" /> in the template. But the style isn't applied to the page - and in chrome's inspector panel I can see that a <style></style> tag has been placed after the link - I'm guessing that might be what is making a fuss?

(Also, in the document that contains the css: should you include the <style> tag at the top (and </style> at the bottom) or only the styling itself? I've tried both, but it doesn't seem to have an impact on the problem above.)

Try set site_url in your context settings. The base looks crazy.

I think chrome's element view is just a representation of the domtree.

First, make sure the link tag is in the head section of the template.
Second, the css would normally be in a file in the assets directory (most often in assets/css/), and the file's URL would go in the link tag:



Note that there's no slash after the assets_url tag, because the MODX path and URL settings always end in a slash.

It is possible to put CSS in a resource's content field and reference that resource, but it's rare, and the resource must have a completely empty template (I'm guessing that's your problem). The resource should not have style tags.

Quote from: alipang at Jul 18, 2018, 04:57 PM

Try set site_url in your context settings. The base looks crazy.

I think chrome's element view is just a representation of the domtree.

I've whited out the url (wasn't sure whether or not it was a good idea to have it visible - it's the alternative url, since the main domain is rerouted to the old server via DNS until the site is ready to go live).


Quote from: BobRay at Jul 18, 2018, 10:30 PM

First, make sure the link tag is in the head section of the template.
Second, the css would normally be in a file in the assets directory (most often in assets/css/), and the file's URL would go in the link tag:

<link rel="stylesheet" type="text/css" href="[[++assets_url]]css/mycssfile.css">

Note that there's no slash after the assets_url tag, because the MODX path and URL settings always end in a slash.

It is possible to put CSS in a resource's content field and reference that resource, but it's rare, and the resource must have a completely empty template (I'm guessing that's your problem). The resource should not have style tags.

The link tag is in the head. I've tried following the advice in this thread: https://forums.modx.com/thread/18245/where-to-put-my-css-file-revo (I like the idea of being able to update the css with just saving a file rather than having to upload it each time I make changes).
And the resouce with the css is assigned "empty" as the template. And ok to the last part.

Edit: I have also double checked that the link to the css resource in the link tag is correct (I can see the code when I access said link).

There's a chrome warning icon. Have you checked what's it about?

One thing that comes to mind is your base is http and these days https in the standard. Not sure how a mixed content problem could act here, but your double check would be useless then. Your mention of a reroute might have an impact. What does chrome's network tab say?

Quote from: markh at Jul 19, 2018, 11:02 AM

Your viewport meta tag, right before the link tag, seems to be missing a quote at the end of the content attribute causing the browser to get confused and probably failing to retrieve the stylesheet.

In your CSS resource you should not use any HTML, so no style tags, as you're trying to trick the browser into thinking it's an actual CSS file, and CSS files don't have style tags.

Ah, that was it! Thank you (I feel silly now, but I'm glad it was easy to solve).

PS. Just to answer the question above: the error is about a nonexisting favicon.