[Tutorial] Use CSS as MODx document (now compatible with IE)

the only down side of this is that if you set the site Offline your path isn’t accepted and the layout breaks. or is it just me?

that is indeed the downside if you use a document for offline page that uses another document for css that does not work so for the offline page you need to or (bad) include all styling in the head, or (goog) make a file on your server that you include. would be a good thing if document flagged as text/css could still be used even if the site is offline.

That is true; when the site is offline it will only accept one page request to display and will refuse all other requests.

Quote from: davidm at Jun 19, 2006, 08:23 PM

1. In the manager, create a folder to store your stylesheets, not required but it’s cleaner. For the sake of this tutorial, this folder will be named "css".

2. In this folder, create a new document (Content > New Document), and in "Uses template" select "(blank)" and go to Page settings > Content type, select "text/css"

Hi there,

New to MODx and been pulling my hair out these past couple of days over the subject of MODx CSS as documents. Would somone mind clarifying these next few questions? Please!

1) I am using MODx version 0.9.6.1p2 and although I can easily carry out Step 1 of the HOWTO when it comes to Step 2 I am stumped. Sure, I click the Resources tab and then click the Manage Files sub-tab beneath it, but I can only upload a new file. There’s no where I can see that you can click on Content and then New Document and have it saved in the new "css" folder and then tell MODx to make that file use a blank template and set its Page Settings. I am really, really stumped here!

2) Is the CSS MODx document an actual file that gets created or is it something in the database? If its in the database and not a file how does the browser access the file with the @import url(FILE) or <link rel="stylesheet" type="text/css" ref="FILE.CSS" /> header information? I ask this because even if I create a new document and setup the document name and document alias and template to blank and document type to text/css etc etc etc, I get no joy. If I view the source of the web page after it has rendered there is always a reference to a file.

Am I barking up the wrong tree here or something? I understand using the @import rule in a CSS file to combine other CSS files to that file and I think that’s what MODx does here. Oh please someone help me!

Many thanks

Sulligogs

MODx traps the calls to the filesystem so to speak. When you give the CSS file an alias that works and maps to a document, you get the doc returned from the database, not on the filesystem.

I can see how it can get confusing, if you’re a MODx beginner, starting with CSS as MODx document might not be the simplest course... but read carefully :

2. In this folder, create a new document (Content > New Document), and in "Uses template" select "(blank)" and go to Page settings > Content type, select "text/css"

Just follow this step (and the other ones too) and you’ll get there.

You know how to create a document in MODx ?
Maybe it’s the fact it’s not called "web page" that confuses you ?

You can create MODx documents which are not necessarily HTML (text/html content type), but can be CSS, XML, JSON...etc

It might be confusing, since most CMS don’t handle several content-type but MODx does.

Thanks for the quick replies rthrash and davidm - this community is certainly alive

Yeah I understand different document types. You got your .html, your .php, .js and .css - I’m using Firefox 2.0.0.12 by the way.

What I’ve done is I have switched the friendly URLs, aliases and paths on and blanked out the URL suffix from the configuration page. I’ve created a new document called mycss.css as the alias and put in some simple CSS as follows:-

body
{
background:blue;
}

I’ve given it a blank template to use, made it not show in menus and published it and made its type as text/css.

Then I edited the MODxHOST template from the Resources tab. Stripped out most of the tags in the head and gave it an instruction to use my mycss.css stylesheet, first with the @import and then the <link rel... > methods.

But nothing. Just an unformatted page.

If I create a CSS file in the "css" folder that was created earlier and put a direct reference to that in the @import or <link rel...> tags then I get the blue background.

Why can’t my modX installation map to the CSS type document that I created and use it?

Sorry for all this trouble!

Sulligogs

Quote from: sulligogs at Apr 07, 2008, 09:54 PM

What I’ve done is I have switched the friendly URLs, aliases and paths on and blanked out the URL suffix from the configuration page.

Actually you don’t have to blank out the default suffix (mine is .html), but you do have to add the .css suffix to your CSS document, as you did. It will override the default suffix

Quote from: sulligogs

I’ve created a new document called mycss.css as the alias and put in some simple CSS as follows:-

body
{
background:blue;
}

I’ve given it a blank template to use, made it not show in menus and published it and made its type as text/css.

So far so good

One way to check if it works is simply to use previsualization (as for any document) to check that you have a document containing only your css and no html formatting.

This way you can also make sure of the path of the CSS file you’ll use in your templates.

Quote from: sulligogs

Then I edited the MODxHOST template from the Resources tab. Stripped out most of the tags in the head and gave it an instruction to use my mycss.css stylesheet, first with the @import and then the <link rel... > methods. But nothing. Just an unformatted page.

What do you mean by "strip most of the tags in the head" ?

The only thing you need to use your CSS document is include a link to the stylesheet as you would with a regular/static CSS ( @import or not doesn’t matter), in your template.

Be careful to keep a valid HTML structure for your page : html, head, body... etc just like any other template.

Quote from: sulligogs

If I create a CSS file in the "css" folder that was created earlier and put a direct reference to that in the @import or <link rel...> tags then I get the blue background. Why can’t my modX installation map to the CSS type document that I created and use it? Sorry for all this trouble !

OK then it works for you !
What’s the problem exactly ?

It seems like you expect MODx to be able to specify a CSS directly from the document properties once you’ve created your CSS document but it doesn’t work that way and it’s more flexible if you just do it by adding it as usual from the template.

Quote from: davidm at Apr 07, 2008, 10:45 PM

Quote from: sulligogs

Then I edited the MODxHOST template from the Resources tab. Stripped out most of the tags in the head and gave it an instruction to use my mycss.css stylesheet, first with the @import and then the <link rel... > methods. But nothing. Just an unformatted page.

What do you mean by "strip most of the tags in the head" ?

The only thing you need to use your CSS document is include a link to the stylesheet as you would with a regular/static CSS ( @import or not doesn’t matter), in your template.

Hi again,

I took out any other <link rel...> so I could be sure it wouldn’t conflict with the simple blue background test CSS.

Quote from: davidm at Apr 07, 2008, 10:45 PM

Quote from: sulligogs

If I create a CSS file in the "css" folder that was created earlier and put a direct reference to that in the @import or <link rel...> tags then I get the blue background. Why can’t my modX installation map to the CSS type document that I created and use it? Sorry for all this trouble !

OK then it works for you !
What’s the problem exactly ?

It seems like you expect MODx to be able to specify a CSS directly from the document properties once you’ve created your CSS document but it doesn’t work that way and it’s more flexible if you just do it by adding it as usual from the template.

Hmmm. So it seems I got it wrong on the topic of "Use CSS as MODx document". I imagined that you would create a MODx document of type "text/css" and it would be treated just like any regular CSS file. So why would anyone create a document of this type for in the first place? I have definitely missed something here.

Yeah, keeping real CSS files is probably better and faster. I just thought there was something new and exciting in this methodology. I feel really silly because I don’t now understand the point of this thread.

If you could enlighten me and close my curiosity on this I would be grateful davidm.

Thanks for all your help.

Sulligogs

Quote from: sulligogs at Apr 07, 2008, 11:01 PM

I took out any other <link rel...> so I could be sure it wouldn’t conflict with the simple blue background test CSS.

Oh OK !

Just needed to make sure I understood

Quote from: sulligogs

Hmmm. So it seems I got it wrong on the topic of "Use CSS as MODx document". I imagined that you would create a MODx document of type "text/css" and it would be treated just like any regular CSS file.

And that’s exactly it !

When you wrote "Why can’t my modX installation map to the CSS type document that I created and use it?" I was under the impression that you expected something more, a "mapping process" whereas the link between a document and the CSS used for styling is through templates.

Calling a CSS document is no different than calling a CSS file (e.g, you use a link or @import with a CSS url).
The big difference is you’re calling your CSS from the DB instead of the filesystem.


Quote from: sulligogs

So why would anyone create a document of this type for in the first place? I have definitely missed something here.

Yeah, keeping real CSS files is probably better and faster. I just thought there was something new and exciting in this methodology. I feel really silly because I don’t now understand the point of this thread.

If you could enlighten me and close my curiosity on this I would be grateful davidm

I am afraid I have not been very clear (keep in mind english is not my mother language ).

The great thing about CSS as MODx document is you can use dynamic items in your CSS (use a snippet to randomize a background-image for example), use the power of chunks (I use this all the time, build my dynamic CSS by combining chunks).

Unfortunately, you can’t use TVs, since TVs are assigned to a template and our dynamic CSS have a "blank" template...

And so far, nobody has really tapped into the power of creating snippets in the context of CSS as MODx documents, but one thing I have been meaning to try is use PHx in them, which would open a lot of doors design-wise