Modx Templates
This is a small tutorial, though it isn't going to be a full tutorial like others you can find. This will probably serve more as a cheat sheet, but I hope it will help you.
In order to be able to create templates you may want to try and convert some HTML/CSS templates to give you some practice. Open the HTML file, usually index.html, in your favorite editor. Look between the <head> and </head> tags. Remove all meta tags if you like, if you want to keep the keywords and description meta, then you can. This is how, for keywords, remove the text between the quotes in content="" and add [[*introtext]] between the quotes. The meta keyword content should look like: <meta type="keywords" content="[[*introtext]]" />
In order to have keywords appear where [[*introtext]] is, you will need to, while creating or editing a page, look for the box that says introtext and add your keywords there. You would need to do the same for the description meta tag, except the tag you would need to use is [[*description]] and fill out the description area for the page to be created or edited.
If your template that you are converting contains a css file or stylesheet, you will need to edit that as well. For example, lets say your link tag for the stylesheet looks like:
<link rel="stylesheet" href="css/style.css" />
You will need to change it to:
<link rel="stylesheet" href="[[++site_url]]assets/templates/TEMPLATE-NAME/css/style.css" />
and upload your css file to the assets/templates/TEMPLATE-NAME directory that you created and also upload the other files included like images.
For the <title> tag, if you want to use the Site's name and page name you can do:
[[++sitename]] - [[*pagetitle]] between the title tags.
For each area of the template that will show your site's name or page title you can use the above tags to do so. Find the area where your main content will need to be and use tag [[*content]].
If your site's template has a sidebar area and you want to use them, you can install the Wayfinder addon and add:
[[!Wayfinder? &startId=`0`!]]
at the area you want your navigation menu to appear.
At the footer area you may or may not want to change much, it is acccording to what you want. This area is up to you how you want it to be done. I hope this little tutorial has helped you to understand how to create/convert a HTML/CSS template into a Modx template.