Newbie Problem - Implementing Templates.

I’ve been playing around with Modx for a few days, but am having problems getting templates to work.

First, I’m following a tutorial here...

http://codingpad.maryspad.com/2009/03/31/building-a-website-with-modx-for-newbies-part-3-working-with-templates/

I’m trying to keep it as close as possible to the original tutorial. The main difference is that I needed to add an additional node (the "site2") in the following examples. Using the default template, everything works as expected. But when I switch to the downloaded template, it just displays the template html code, without formatting. The only deviation from the tutorial that I am aware of is the extra node (site2). I see nothing else wrong. Any ideas???

With Default Template

••(from Manage Resources --> Templates)

<title>[*pagetitle*] - [(site_name)]</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=[(modx_charset)]” />
<link rel=”stylesheet” href=”[(base_url)]assets/templates/mytemplates/swansong/styles/style.css” type=”text/css” />
<base href=”[(site_url)]” />

••(from View Page Source) This works...

<title>Matt’s Practice MODx Site. | Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="/modx/site2/assets/templates/default/site.css" type="text/css" media="screen" />
<base href="http://localhost:8888/modx/site2/" />


With a Downloaded Template

••(from Manage Resources --> Templates)

<title>[*pagetitle*] - [(site_name)]</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=[(modx_charset)]” />
<link rel=”stylesheet” href=”[(base_url)]assets/templates/mytemplates/swansong/styles/style.css” type=”text/css” />
<base href=”[(site_url)]” />

••(from View Page Source) This does NOT work.

<title>Home - Matt’s Practice MODx Site.</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” />
<link rel=”stylesheet” href=”/modx/site2/assets/templates/mytemplates/swansong/styles/style.css” type=”text/css” />
<base href=”http://localhost:8888/modx/site2/” />

Matt,

Not sure i completely follow... what does your folder structure look like?

Folder structure is:

For default templates:
Mac HD > Applications > MAMP > htdocs > modx > site2 > assets > templates > defaults > cssname.css

For downloaded templates:
Mac HD > Applications > MAMP > htdocs > modx > site2 > assets > templates > mytemplates > templatename (swansong, this time) > styles > cssname.css

My attempt is to keep downloaded templates in a separate directory. Maybe I need to first simplify my directory structure, and once it’s working, to slowly move it in the direction I want it to go?

I guess my main question is, is the structure resolving correctly? It appears to me that it is. But maybe I’m missing something? Since the bolded parts in the samples below are identical, I would think that as long as spellings, names, and capitalization are correct for the remainder of the structure that it should work. I’m assuming the media="screen" is not important.

<link rel="stylesheet" href="/modx/site2/assets/templates/default/site.css" type="text/css" media="screen" />
<base href="http://localhost:8888/modx/site2/" />

<link rel=”stylesheet” href=”/modx/site2/assets/templates/mytemplates/swansong/styles/style.css” type=”text/css” />
<base href=”http://localhost:8888/modx/site2/” />

When you activate the swansong template, does any part of the template show? Looks like a path issue. The problem might be that you have the modx/site2 in both your base url and your href.

Try this and see if it makes a difference

Yeah, einsteinsboi seems to be right. See, while your root is your htdocs folder, by declaring your base href in modx, you are telling modx to use your root as your /modx/site2/ folder; meaning you only need to start your call from /assets.

Also, the media="screen" is not necessarily important for development; all that is doing is telling only computer browsers to use that stylesheet. You would still need a separate stylesheet for various things like media="handheld" (for mobile phone browsers) and media="print" (for printers).

Well, I have been looking at the paths for awhile, and will do so again.

I’m still stumped by the fact that the base href is declared the same in both sites, yet one works and the second doesn’t. If it was a problem with the base href, I would assume that neither would work.

Matt,

Did the code I gave you above work?

When I have a minute I’ll try to reproduce your situation with your code and see what i get. If you drop by the blog and leave a comment on that post it will be easier for me to track. I’ve never declared base href that way, so not too sure.

Hello,

Could you try matching the charset in both examples. You are using UTF-8 for one and ISO.... for the other. I don’t think it would make a huge difference, but give it a try as it might help.

Also could you validate your pages to ensure the problem isn’t something simple with your HTML code? Check out this for safari: http://www.zappatic.net/safaritidy/

Thanks,
AMDbuilder

I’d recommend two things when dealing with templates for use with MODx:

1. Try to copy over the existing HTML/CSS onto your new webserver and make sure it works WITHOUT MODx. You have to double check that you got all your CSS paths and images copied over.

2. Then have a look at the video here: http://www.youtube.com/watch?v=EasmxiU0LsM
And follow along with the wiki here: http://wiki.modxcms.com/index.php/Placeholders_used_by_MODx_Pages_and_Templates

OK, I was able to get this working. Not exactly sure what was wrong, but there certainly was some confusion on my end. Seems the problem was not with finding the css, rather the problem was somewhere else in the template. What exactly, I’m not sure.