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

9 Posts

sulligogs Reply #51, 16 years ago

Quote from: rthrash at Apr 07, 2008, 08:12 PM

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.

davidm, i was quoting from rthrash with what I said about mapping CSS. That got me confused slightly.

Anyway, I understand now that a MODx document can be treated as a regular CSS file except that instead of being a regular CSS file it is actually contained in the database. My database is MySQL by the way.

However, this doesn’t explain why if I reference the real CSS file through the <link rel...> tag the background turns blue, as expected. But, if I reference a MODx document "CSS file" with the same tag no such formatting is applied. I’ve used the MODx CSS file alias and its ID - nothing happens.

Is there a bug with the current build???

Thank you for clearing things up for me anyway. I would like to see this thing work now!

Sulligogs

7,075 Posts

davidm Reply #52, 16 years ago

No bugs with the current build.

When you create a document in MODx and use clean urls, you access the pages pretty much like a static web page, no ?
e.g http://www.mydomain.com/mypage.html (or php, or whatever suffix you chose)

It’s apparently no different than calling a static page, but it is : MODx retrieves the template for that document, then retrieves the document data(*) and places it exactly where you put your MODx tags in your template. Once parsed, the page is rendered, the result being a a html page.

In a way, to keep it simple MODx builds the page from data pulled in the DB and then feeds it to the visitor’s browser.

(*) For instance [*content*] is stored in modx_site_content table in the content field, TVs are stored in modx_site_tmplvar_contentvalues and chunks are stored in modx_site_htmlsnippets

When you create CSS as document, it’s exactly the same : MODx pulls the data from the content field, the only difference being that this MODx document has a blank template and a content-type of text/css instead of text/html.

Just like you access your pages with http://www.mydomain.com/mypage.html
you access your css with http://www.mydomain.com/mycss.css

Which means, to use those CSS you just need to use :

[tt]<style type="text/css" media="screen">
@import url(css/mycss.css);
</style>
[/tt]

or

[tt]<link rel="stylesheet" type="text/css" href="css/mycss.css" />[/tt]

in your templates just like you would with a CSS stored in the filesystem

Is that clearer now ?

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

9 Posts

sulligogs Reply #53, 16 years ago

Hi davidm,

Thanks for all your time on this I appreciate every help you have given.

I still cannot get this to work. I understand that a MODx document can act and behave as a regular CSS file. But, for the life of me, I can’t get the desired output.

One thing that stands out still - and I hope you have the patience to bear with me on this - is the specified path to the CSS "file".

Quote from: davidm at Apr 08, 2008, 09:35 AM

Which means, to use those CSS you just need to use :

[tt]<style type="text/css" media="screen">
@import url(css/mycss.css);
</style>
[/tt]

or

[tt]<link rel="stylesheet" type="text/css" href="css/mycss.css" />[/tt]

in your templates just like you would with a CSS stored in the filesystem

Is that clearer now ?

Your examples gives a path to the CSS "file". That path being "/css/" from the base url. If a MODx CSS file is really a MODx document of type "text/css" how does MODx know what to do with that path? Or, does an empty real CSS file have to be put into that path in the first place?

As I’ve said, I can get this whole thing to work with real CSS files, but not with MODx CSS documents acting as real CSS files.

Here is a copy of my modded default template MODxHOST:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<base href="[(site_url)]" />

<link rel="stylesheet" type="text/css" href="mycss.css" />

</head>

<body>
  [*content*]
</body>

</html>

I had already created a document of type "text/css" with a blank template, published and titled mycss with a document alias of "mycss.css". Friendly URLs are on with friendly aliases and paths. Inside the MODx CSS document is the following:-

body
{
  background:blue;
}

If there is nothing else for you to add then I will just accept I am doing something wrong somewhere. But, I know it works because you’ve got it working.

Thanks all the same,

Sulligogs

7,075 Posts

davidm Reply #54, 16 years ago

Your code should work provided the CSS document (mycss.css) is placed at the root of the document tree

Quote from: sulligogs at Apr 08, 2008, 04:18 PM

Your examples gives a path to the CSS "file". That path being "/css/" from the base url. If a MODx CSS file is really a MODx document of type "text/css" how does MODx know what to do with that path? Or, does an empty real CSS file have to be put into that path in the first place?

No you don’t need to place any file anywhere.

MODx knows that the CSS file is where you put it, because when you create your CSS with say the ID 18 (again, an example, but the ID is a unique identifier in the DB), MODx will retrieve the alias and rewrite the URL with the following data : site_url + alias + suffix for the given document’s ID.

I hope that clarified it, because I don’t know any other way to explain it tongue

If you want to check if the document is properly created, as I said, right click on your CSS document then preview it and you should see it !

If you’re stuck anyway you can PM me a login so that I can check on this...

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

9 Posts

sulligogs Reply #55, 16 years ago

Yeah all those things you said I have done.

I’ve removed the old install and I am now uploading a fresh copy of MODx and will run the install again.

I’ll allow you to modify the fresh install. Make it as you want, but let’s just keep the custom MODx CSS document simple, like it was before, with the following code:-

body
{
  background:blue;
}

The rest is yours. If you get this to work I’ll eat my hat. And if I don’t have a hat I’ll go out and buy one.

Lol.

Many thanks davidm - you really are a gent.

Sulligogs

7,075 Posts

davidm Reply #56, 16 years ago

Prepare the hat then because I think I’ll be able to make it work wink

Then again I have several hundreds of MODx hours (if not a bunch of thousands) under the hood tongue

Once I figure what went wrong, I’ll explain it in a less abstract way...
Just PM me the login/pass when you’re ready !

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

7,075 Posts

davidm Reply #57, 16 years ago

Hmmm, OK well it would seem that there is an issue which I never encountered before.

CSS as document work :
http://www.newclearview.co.uk/modx-0961p2/index.html

but only if I call the CSS document with a query string, i.e :

[tt]
<link rel="stylesheet" href="index.php?id=48" type="text/css" media="screen" />
[/tt]

If I do it with all the settings properly set up :

[tt]
<link rel="stylesheet" href="css/css-test.css" type="text/css" media="screen" />
[/tt]

It appends the default suffix to the manually set alias : css-test.css.html

Thus when I link to
http://www.newclearview.co.uk/modx-0961p2/css/css-test.css

I will get a 404 error because it’s actually served to the browser as HTML.

I checked this using webdevelopper "View CSS feature" because in the HTML source it shows as it should as http://www.newclearview.co.uk/modx-0961p2/css/css-test.css
whereas the CSS is served to the browser as http://www.newclearview.co.uk/modx-0961p2/css/css-test.css.html...

Maybe there is something in the httpd.conf which does not include css content type or something... maybe your server needs a directive like this in httpd.conf :

[tt]AddType text/css .css[/tt]

But it seems highly unlikely...

I have checked, I have installs running latest MODx with the exact same settings with no issue. MODx is not at fault.
Of course, I use a very different server environnement (PHP5, Apache 2) but I fail to see where this comes from huh

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

9 Posts

sulligogs Reply #58, 16 years ago

Quote from: davidm at Apr 08, 2008, 06:48 PM

Hmmm, OK well it would seem that there is an issue which I never encountered before.

CSS as document work :
http://www.newclearview.co.uk/modx-0961p2/index.html

but only if I call the CSS document with a query string, i.e :

[tt]
<link rel="stylesheet" href="index.php?id=48" type="text/css" media="screen" />
[/tt]

If I do it with all the settings properly set up :

[tt]
<link rel="stylesheet" href="css/css-test.css" type="text/css" media="screen" />
[/tt]

It appends the default suffix to the manually set alias : css-test.css.html

Thus when I link to
http://www.newclearview.co.uk/modx-0961p2/css/css-test.css

I will get a 404 error because it’s actually served to the browser this way :
http://www.newclearview.co.uk/modx-0961p2/css/css-test.css.html

I have checked, I have installs running latest MODx with the exact same settings with no issue.

Of course, I use a very different server environnement but I fail to see where this comes from

Tell you what davidm - I look forward to eating my hat because the amount of help you have given is brilliant. You did what you set out to do, but with a slightly different method. You’ve won.

Would turning of the Friendly URL suffix work at all?

Either way you’ve shown it can be down and I don’t mind using index.php?id= to get things going. Maybe if others have the same problem then this is their workaround.

Consider my hat digested. If I develop a decent site I will credit you with your name in lights

All the best and thanks again,

Sulligogs

7,075 Posts

davidm Reply #59, 16 years ago

Well, thanks

But frankly now I HAVE to understand why this doesn’t work... it should !

Bear with me and try to add

[tt]AddType text/css .css[/tt]

To your .htaccess

It probably won’t change a thing but I can’t think of anything else...

Anyone ?
Susan ?

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

9 Posts

sulligogs Reply #60, 16 years ago

Quote from: davidm at Apr 08, 2008, 07:08 PM

[tt]AddType text/css .css[/tt]

To your .htaccess

It probably won’t change a thing but I can’t think of anything else...

Anyone ?
Susan ?

Ok I added that line after the RewriteBase /modx-0961p2 line. Should the rest of the .htaccess at the bottom be modified as well. The bit about:-

#ExpiresActive On
#ExpiresByType image/gif A2592000
#ExpiresByType image/jpeg A2592000
#ExpiresByType image/png A2592000
#BrowserMatch "MSIE" brokenvary=1
#BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
#BrowserMatch "Opera" !brokenvary
#SetEnvIf brokenvary 1 force-no-vary

I think you said in your tutorial it was just for IE to work.

Anyway over to you,

Sulligogs