I’m continuing my series of hi-res videos of the MODx content management system, this time I’m stepping through how you can easily take existing HTML and CSS layouts and adapt them for use with MODx. For my example, I take Eric Meyer’s “Complex Spiral” demo and within a few minutes, I have it adapted for use with my site.
I include the image below as a quick reference for the placeholder tags used by MODx. Refer to the wiki page for a more complete list.
Summary: Creating a Custom MODx Template
* In the video, I upload the HTML file too just as a final check to make sure it works in the new location.
- Replace appropriate areas of your HTML with MODx placeholders. Refer to the image above or to the wiki page so you know which placeholders are available.
- Login to the MODx Manager, create a new template in Resources→Manage Resources→Templates. Be sure to save it and give it a good name.
- Edit a page and choose to use the new template, and save the page! In other words, you need to tell your MODx documents to use your new template.
Part two of this video shows how to add Chunks and Snippets to your template for more dynamic functionality.