1. Getting Started
      1. Basic Installation
      2. What is MODx
    2. Content Editing
      1. Editing Documents
      2. MODx Tags
        1. Document Variables
      3. Terminology
      4. The Manager
      5. Who Should Read This
    3. Designing
      1. Adding Chunks
      2. Adding MODx Tags
        1. Resource Fields
      3. Adding Snippets
      4. Document Caching
      5. Template Basics
    4. Administration
      1. Friendly URL Solutions
      2. Manager Users
        1. Manager Roles And Groups
        2. Reset your Password - Unblock your User
        3. Why Manager Users, Roles and Groups
      3. Moving Site
      4. Taking sites down for maintenance
      5. Upgrading
      6. Web Users
        1. Creating a Web User
        2. Web User Groups and Document Groups
        3. Why Web Users and Groups
    5. Developer's Guide
      1. API Reference
        1. DBAPI
          1. delete
          2. escape
          3. getInsertId
          4. query
          5. select
          6. update
        2. Document Object
        3. DocumentParser Object
          1. addEventListener
          2. changeWebUserPassword
          3. documentContent
          4. documentGenerated
          5. documentIdentifier
          6. documentListing
          7. documentMethod
          8. documentObject
          9. getAllChildren
          10. getCachePath
          11. getChildIds
          12. getDocumentChildren
          13. getDocumentChildrenTVarOutput
          14. getDocumentChildrenTVars
          15. getLoginUserID
          16. getLoginUserName
          17. getLoginUserType
          18. getManagerPath
          19. getParent
          20. getParentIds
          21. getUserData
          22. hasPermission
          23. isBackend
          24. isFrontend
          25. logEvent
          26. maxParserPasses
          27. minParserPasses
          28. regClientCSS
          29. runSnippet
          30. table_prefix
          31. tstart
          32. webAlert
      2. Chunks
      3. Modules
        1. How to create and run a module from within the Content Manager
        2. Managing module dependencies
        3. Setting up configuration parameters
        4. Writing the module code
      4. Plugins
      5. Snippets
      6. Template Variables
        1. (at) Binding
          1. (at)CHUNK
          2. (at)DIRECTORY
          3. (at)DOCUMENT
          4. (at)EVAL
          5. (at)FILE
          6. (at)INHERIT
          7. (at)SELECT
          8. What are (at) Bindings
        2. Creating a Template Variable
        3. What are Template Variables
        4. Widgets
          1. Misc. Widget
          2. DataGrid Widget
          3. Floater Widget
          4. Hyperlink Widget
          5. Marquee Widget
          6. RichTextBox Widget
          7. Ticker Widget
          8. Viewport Widget
          9. What are Widgets

Template Basics

Last edited by David Pede on Aug 22, 2013.

Templates are the HTML markup tags that determine the layout and appearance of your site. In this tutorial we will show how to create valid XHTML layout templates controlled by CSS documents.

Templates are created in the Resources section of the MODx Manager.

Select New template from the Templates tab.

In the Creat/Edit template form, give the template a name, a description, and if you like, check the Lock template for editing box. Then enter your HTML/XHTML code into the textarea. You can create the template in a different editor and copy/paste the entire template into the textarea.

Let's examine a simple, two-column template.

<!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>

<title>Simple Template</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

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

</head>

<body>

<div id="banner">

<h1>Logo</h1>

</div>

<div id="wrapper">

  <div id="container">

    <div id="content">

      <!-- main page content goes here -->

      Content

    </div> <!-- end of content div -->

  </div> <!-- end of container div -->

  <div id="sidebar">

    <!-- menu and other blocks goes here -->

    Sidebar

  </div>

<!-- end of sidebar div -->

  <div class="clearing"> </div>

</div> <!-- end of wrapper div -->

<div id="footer">Footer</div></body>

</html>

Like any HTML code, a MODx template at its most basic is a set of HTML tags to indicate the structure of the page. It begins with the doctype declaration, sets some information in the head, such as where to locate the CSS file for the page, then lays out the structure for the body of the page. This is not intended to be an HTML tutorial; here are some links to helpful sites:

Here is a simple CSS file to control our template's appearance:

* {
    padding:0;
    margin:0;
    border:0;
}

body {
    margin:0 20px;
    }

#banner {
        background: #cdcdcd;
        border-left:1px solid #ababab;
        border-right:1px solid #ababab;
    }

#banner h1 {
    padding:10px;
    }

#wrapper {
        background: #ffffff;
        border-left:1px solid #ababab;
        border-right:1px solid #ababab;
}

#container {
        width: 100%;
        background: #ffffff;
        float: left;
        margin-right: -200px;
}

#content {
        background: #ffffff;
        margin-right: 200px;
        height:200px;
    border-right:1px dotted #ababab;
}

#sidebar {
        width: 200px;
        float: right;
}

#footer {
        background: #cdcdcd;
        border-left:1px solid #ababab;
        border-right:1px solid #ababab;
}

.clearing {
    clear:both;
    height:0;
}

This template and CSS file will make a page that looks like this:

Doesn't look like much right now, does it? How about this?

Or this...

Or this?

It's all in the CSS, with the help of MODx tags to include content and functionality. The next document in this series covers adding MODx tags to your template.

While it is beyond the scope of this document to provide a tutorial in CSS, here is a list of links to helpful sites:

Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab).