Well, I try a little step-by-step tutorial for you:
Just take a given Template which is build in plain XHTML/CSS, I assume you are talking about these "templates" and not about MODx templates (there the procedure is similar but lot of steps are already done for you).
Go to your manager->ressources->manage ressources and click on templates (it´s already chosen). Then click on "new template".
Copy the whole html file of your template (e.g. index.html) in the appearing window (including the sample content).
Look in the header of the just copied file and change it, so it looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>[(site_name)] | [*pagetitle*]</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="assets/templates/YOUR_TEMPLATE_NAME/site.css" type="text/css" media="screen" />
<base href="[(site_url)]" />
</head>
YOUR_TEMPLATE_NAME is a folder you have to create in assets/templates. This is just a placeholder, you can name it like you wish (let´s say "1sttemplate"). In this just created template folder you copy the css file, which was shipped with your template. Name it like defined above (site.css for example). The images that are shipped with the template have to be placed according to the call in the CSS (often just images/...). So put the images folder in your new 1sttemplate folder.
Then just hit "save". Now take a page of your menu tree and change its template to your new template (right click->edit document in the menu tree), look for "uses template", choose your "1st template" and save. Now you should see your new template in the preview. But of course without the corresponding content, we are at the beginning
Now the "difficult" part: Identify the parts of your template that should be controlled by MODx. First let´s take the main content. Look in your template (ressources->manage ressources->templates), and locate the content (often some dummy text like "LOREM ipsum..."). If there are several parts that contain content, just take one of them for a first example. Delete this content and put this in your template:
Yes, this is all. This placeholder stands for the content that you can fill with MODx. Just hit save and look at your document. Now the data of this page should appear at the location you placed it (of course not very well formatted etc.), but it should be there. How the formatting works depends on knowledge of CSS and of the used template/CSS, like how it is formatted and so on. We´ll do the cosmetics later.
Second, let´s try to implement a menu. Usually there is some main menu in such a template, ideally build with a HTML list. Change to your template, open it and look for such a list (starts with <ul> and ends with </ul>). Delete this part and put in:
[[DropMenu? &menuName=`topMenu` &startDoc=`0` &levelLimit=`1` &topnavClass=`topMenubar` &hereClass=`activeLink`]]
Okay, that looks a little bit weird. You find out
here what the parameters stand for. Again, just hit save, look at your document and you should see a (yet unformatted) list as your menu. Now it takes just a little bit knowledge with CSS to transfer the settings that are made in the originally CSS to the enviroment MODx creates. For example "activeLink" could be set as "active". So just change it in the dropmenu snippet call ( &hereClass=`active` for example). With a bit trial and error you should get it working, assumed the template is coded well. MODx-produced code is very modern and plain XHTML/CSS, so don´t ask for a table soup menu
The next thing would be to identify the other dynamic parts of your page, but let´s do it step by step
Hope this helps now. Perhaps I will put this together to a tutorial with images and so on. But not until tomorrow
Greetz Marc
MODX Staff
☆ A M B ☆
