MODX works by inserting dynamic content specific to the page requested into a common template. This template is very simply just an HTML page with the dynamic content replaced by custom MODX tags. For this tutorial, we'll be using a free template from CSS Junction called "It Fits".

The first thing to do is to download the "It Fits" template archive, then upload its files to your Revo installation. You can put them anywhere you like; out of habit I use an assets/templates/ or assets/themes/ folder for holding all of my template files.

You can move the files around to your preferred file structure. I prefer to have all .js files in assets/js, and all images not used for the template itself to be in assets/images, so I moved the .js and content images from the assets/template/itfits/ folder into their respective assets/ folders. There seems to be a current mania for having all Javascript libraries and their associated files in a "vendor" folder under the theme folder; you can do whatever you prefer.

Create a new template named "It Fits (home)". Now open the It Fits "index.html" file in a text editor, and copy/paste the file's contents into the Home Page template's content field. Save it. Open the home page resource and use the Uses Template select drop-down to set it to use the home template. The page will refresh; you still need to Save it. Now view the default home page in your browser. It should look like this.

We need to adjust the paths to the template's support files. Begin with the links to the .css files. Change them to accommodate the location where you actually put the files.

I've added a "custom.css" file to the css folder for any custom styling I want to do without modifying the default .css files that the template comes with. Since it is loaded after the main styles.min.css file, its directives will override those in the main .css file.

&lt;link rel="stylesheet" href="assets/templates/itfits/css/styles.min.css"&gt;<br>&lt;link rel="stylesheet" href="assets/templates/itfits/css/custom.css"&gt;

And now you have the stock It Fits home page.

MODX has a default template setting, and upon installation this is set to template #1, the base template that the installation provides. All new resources will automatically use this template. We'll want most of our pages to be a basic template without all the extra blocks and boxes that are in the home page. So it's easiest to simply replace the template code of the default template with the HTML code from one of It Fits page templates. Open the It Fits "page.html" file in your text editor, open the base template for editing in the Manager, and copy/paste the code from the page.html file, replacing the existing template code. Now do the same link editing in the template head that you did for the home template - in fact, you can simply copy/paste the code from the home template's head into the page template.

Replacing Content With MODX Tags

Now we come to the nitty-gritty of MODX Templates. We need to replace all the content areas in the HTML with the appropriate MODX tags. For a full description of what each tag is for, see the documentation here.

First, we'll go through the template head and see what we can do to customize it for each page. At the top of the template head, we have the charset meta tag. This tag should be the same as the HTTP header setting. Since MODX itself sets the HTTP header when sending the generated page to the server, we'll use a system setting tag for this.

<meta charset="[[++modx_charset]]">

&lt;!DOCTYPE html&gt;<br>&nbsp;&lt;html class="no-js" lang="en"&gt;<br>&lt;head&gt;<br>&nbsp;&nbsp;&nbsp; &lt;meta charset="[[++modx_charset]]"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;base href="[[!++site_url]]"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;title&gt;[[*pagetitle]] - [[++site_name]]&lt;/title&gt;<br>&nbsp;&nbsp;&nbsp; &lt;link rel="stylesheet" href="assets/templates/itfits/css/styles.min.css"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;link rel="stylesheet" href="assets/templates/itfits/css/custom.css"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;script src="assets/templates/itfits/js/libs/modernizr-2.5.2.min.js"&gt;&lt;/script&gt;<br>&lt;/head&gt;

Make the same changes in both templates.

NOTE:

Since these HTML head sections will rarely if ever be changed, there's no real need to add extra processing to the page by breaking it out into a chunk. If these were likely to be changed frequently, or you have a lot of templates, it might be more convenient to move them into chunks.

Page Masthead

Now we get to the point where some judgement has to be used. Every template will be a little different here, so determining exeactly where the masthead section begins and ends take examination of the content. In our case, it looks like the entire <header class="clearfix"> is the masthead, so I'm just going to examine that part for places to replace content with MODX tags.

I see two things that I want to change. I'm going to put the social bookmarks bar into a chunk called "socialLinks" since these can be subject to change. You can edit the URLs in that to point to your facebook, linkedin and twitter accounts.

&lt;ul class="social-icons"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="https://www.facebook.com/susan.ottwell" title="Facebook" class="icon flip" target="_blank"&gt;^&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="https://il.linkedin.com/in/susan-ottwell-695891a2" title="Linkedin" class="icon" target="_blank"&gt;T&lt;/a&gt;&lt;/li&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="https://twitter.com/susanottwell" title="Twitter" class="icon" target="_blank"&gt;^&lt;/a&gt;&lt;/li&gt;<br>&lt;/ul&gt;

The next thing to change is the logo text; we'll change that to MODX in the Desert.

The other change will be the main menu. Fortunately, this template uses a simple unordered list, so it's a perfect fit for a very basic Wayfinder or pdoMenu snippet tag. We do need the ul tag to have its role attribute set, so we'll need to specify the outerTpl property for pdoMenu. To keep things simple, here's the pdoMenu snippet tag that will mimic the template's menu:

[[!pdoMenu?<br>&nbsp;&nbsp;&nbsp; &parents=`+0` <br>&nbsp;&nbsp;&nbsp; &level=`1` <br>&nbsp;&nbsp;&nbsp; &outerTpl=`@CODE: <ul role="navigation">[[+wrapper]]</ul>`<br>]]

For more information on the pdoMenu snippet, and what the properties are, see its documentation.

Copy this masthead to the other template. Or, if you prefer, put it in a chunk and use the chunk tags instead. I have seen template that were nothing but the doctype and html and closing html tags with nothing in between except a lot of chunk tags. Personally,I don't like to use too many chunks in my templates, I prefer to be able to see the general outline of the template in one place.

The Banner

From this point on, the two templates are different. This template has a banner section, so we need to replace the content with MODX tags. Part of the banner content gets moved into the resource's "summary" (introtext) field.

The Default Banner

&lt;section role="banner"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;header&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h1&gt;[[*pagetitle]]&lt;/h1&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&gt;[[*longtitle]]&lt;/h2&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/header&gt;<br>&nbsp;&nbsp;&nbsp; &lt;article role="main" class="clearfix"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="post"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&gt;[[*pagetitle]]&lt;/h2&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;[[*introtext]]&lt;/p&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/article&gt;<br>&lt;/section&gt;<br>&lt;!-- // banner ends --&gt; 

The home page template has a more complex lower section that we will use to display the content of the home page resource as well as its introtext. This section is divided into a left half for the content, and the right half for an image or more content. The home page introtext goes there.

The Home Page Banner

&lt;section role="banner"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;header&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h1&gt;[[*pagetitle]]&lt;/h1&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&gt;[[*longtitle]]&lt;/h2&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/header&gt;<br>&nbsp;&nbsp;&nbsp; &lt;article role="main" class="clearfix"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="post"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&gt;[[*pagetitle]]&lt;/h2&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[*content]]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;aside role="complementary"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[*introtext]]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/aside&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/article&gt;<br>&lt;/section&gt;

The Main Content Areas

The home page has two sets of image blocks, one with captions, the other a more simple list of images that would be great with a Javascript rotator. The other pages have a left sidebar and a right main content area.

For the home page, we'll use MIGx TVs for both sets of blocks. MIGx provides several snippets to display the TV's output, the most commonly used is getImageList.

The Home Page Main Body

&lt;section class="container"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;div class="columns"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[getImageList?<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &tv=`homeBlocks`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &tpl=`homeBlocksTpl`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]]<br>&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp; &lt;!-- //.columns --&gt;<br>&nbsp;&nbsp;&nbsp; [[getImageList? <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &tv=`homeRotator`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &tpl=`rotatorImagesTpl`<br>&nbsp;&nbsp;&nbsp; ]]<br>&lt;/section&gt;

For the inner pages, we could use another MIGx TV for sidebar sections, or as in this case display a list of recent posts using getResources or pdoResources. The resource's content is used for the main content area.

The Default Main Body

&lt;section class="container clearfix"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;aside role="complementary"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[pdoResources?<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &parents=`33`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &tpl=`articlesTpl`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &limit=`0`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &depth=`0`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]]<br>&nbsp;&nbsp;&nbsp; &lt;/aside&gt;<br>&nbsp;&nbsp;&nbsp; &lt;article class="post content"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[*content]]<br>&nbsp;&nbsp;&nbsp; &lt;/article&gt; <br>&lt;/section&gt;

The Footer

At this point, the templates converge again, and use the same footer. You could move the footer content into a chunk, if you prefer.

&lt;footer role="contentinfo"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;p&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="left"&gt;&copy; [[!Copyright? &startYear=`2012`]] &lt;a href="[[!++site_url]]"&gt;[[++site_name]]&lt;/a&gt;&lt;/span&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="right"&gt;&lt;a href="http://modx.com"&gt;&lt;img src="assets/images/icons/modx-logo.png" alt="Content Managed by MODx" title="Content Managed by MODx"&gt;&lt;/a&gt; &lt;a href="https://modxcloud.com/"&gt;&lt;img src="assets/images/icons/modx-cloud-logo-small.png" alt="Site Hosted by MODx" title="Site Hosted by MODxCloud"&gt;&lt;/a&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/span&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/p&gt;<br>&lt;/footer&gt;

As you see, we replaced some of the content with MODX tags. You could hard-code your site's information, but by using the tags the template can be used on any MODX site. We also used a simple snippet, Copyright, to keep the copyright date updated.

Following the footer, and before the closing body and html tags, we add the Javascript. The reason for putting links to Javascript at the bottom of the page is that the browser will block, or stop processing the HTML, when it finds a link to a Javascript file, and will not resume processing the HTML for the page until it has loaded the Javascript file. This can lead to the appearance of a slower site, especially if you're using several Javascript files. Loading the Javascript last allows the browser to display the whole page before loading the Javascript, so the site will appear to be faster.

And finally, here are the two complete templates.

The Default Template

&lt;!DOCTYPE html&gt;<br>&lt;html class="no-js" lang="en"&gt;<br>&lt;head&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;meta charset="[[++modx_charset]]"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;base href="[[!++site_url]]"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;title&gt;[[*pagetitle]] - [[++site_name]]&lt;/title&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;link rel="stylesheet" href="assets/templates/itfits/css/styles.min.css"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;link rel="stylesheet" href="assets/templates/itfits/css/custom.css"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;script src="assets/templates/itfits/js/libs/modernizr-2.5.2.min.js"&gt;&lt;/script&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;header class="clearfix"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="container"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a id="logo" href="[[!++site_url]]"&gt;[[++site_name]]&lt;/a&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[$socialLinks]]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;nav class="clearfix"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[!pdoMenu?<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &startId=`0`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &level=`1`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &outerTpl=`@CODE: <ul role="navigation">[[+wf.wrapper]]</ul>`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/nav&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;/header&gt;<br>&nbsp;&nbsp;&nbsp; &lt;section role="banner"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;header&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h1&gt;[[*pagetitle]]&lt;/h1&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;[[*longtitle]]&lt;/p&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/header&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;article role="main" class="clearfix"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="post"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&gt;[[*pagetitle]]&lt;/h2&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;[[*introtext]]&lt;/p&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/article&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;/section&gt; &lt;!-- // banner ends --&gt;<br>&nbsp;&nbsp;&nbsp; &lt;section class="container clearfix"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;aside role="complementary"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[pdoResources?<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &parents=`33`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &tpl=`articlesTpl`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &limit=`0`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &depth=`0`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]] <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/aside&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;article class="post content"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[*content]]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/article&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/section&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;footer role="contentinfo"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="left"&gt;&copy; [[!Copyright? &startYear=`2012`]] &lt;a href="[[!++site_url]]"&gt;[[++site_name]]&lt;/a&gt;&lt;/span&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="right"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="https://modx.com"&gt;&lt;img src="assets/images/icons/modx-logo.png" alt="Content Managed by MODX" &gt;&lt;/a&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="https://modxcloud.com/"&gt;&lt;img src="assets/images/icons/modx-cloud-logo-small.png" alt="Hosting by MODX Cloud"&gt;&lt;/a&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/span&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/p&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;/footer&gt;<br>&nbsp;&nbsp;&nbsp; &lt;script src="assets/js/jquery-2.1.4.min.js"&gt;&lt;/script&gt;<br>&lt;/body&gt; <br>&lt;/html&gt;

The Home Page Template

&lt;!DOCTYPE html&gt;<br>&lt;html class="no-js" lang="en"&gt;<br>&lt;head&gt;<br>&nbsp;&nbsp;&nbsp; &lt;meta charset="[[++modx_charset]]"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;base href="[[!++site_url]]"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;title&gt;[[*pagetitle]] - [[++site_name]]&lt;/title&gt;<br>&nbsp;&nbsp;&nbsp; &lt;link rel="stylesheet" href="assets/templates/itfits/css/styles.min.css"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;link rel="stylesheet" href="assets/templates/itfits/css/custom.css"&gt;<br>&nbsp;&nbsp;&nbsp; &lt;script src="assets/templates/itfits/js/libs/modernizr-2.5.2.min.js"&gt;&lt;/script&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br>&nbsp;&nbsp;&nbsp; &lt;header class="clearfix"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="container"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a id="logo" href="[[!++site_url]]"&gt;[[++site_name]]&lt;/a&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[$socialLinks]] <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;nav class="clearfix"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[!pdoMenu? <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &parents=`0` <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &level=`1`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &outerTpl=`@CODE: <ul role="navigation">[[+wf.wrapper]]</ul>`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]] <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/nav&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/header&gt;<br>&nbsp;&nbsp;&nbsp; &lt;section role="banner"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;header&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h1&gt;[[*pagetitle]]&lt;/h1&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;[[*longtitle]]&lt;/p&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/header&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;article role="main" class="clearfix"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="post"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;h3&gt;[[*pagetitle]]&lt;/h3&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[*content]]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;aside role="complementary"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[*introtext]]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/aside&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/article&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/section&gt; &lt;!-- // banner ends --&gt;<br>&nbsp;&nbsp;&nbsp; &lt;section class="container"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="columns"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[getImageList? &tv=`homeBlocks`]]<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; [[getImageList?<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &tv=`homeRotator`<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ]]<br>&nbsp;&nbsp;&nbsp; &lt;/section&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp; &lt;footer role="contentinfo"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="left"&gt;&copy; [[!Copyright? &startYear=`2012`]] &lt;a href="[[!++site_url]]"&gt;[[++site_name]]&lt;/a&gt;&lt;/span&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;span class="right"&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="https://modx.com"&gt;&lt;img src="assets/images/icons/modx-logo.png" alt="Content Managed by MODX"&gt;&lt;/a&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="https://modxcloud.com/"&gt;&lt;img src="assets/images/icons/modx-cloud-logo-small.png" alt="Hosting by MODX Cloud"&gt;&lt;/a&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/span&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/p&gt;<br>&nbsp;&nbsp;&nbsp; &lt;/footer&gt;<br>&nbsp;&nbsp;&nbsp; &lt;script src="assets/js/jquery-2.1.4.min.js"&gt;&lt;/script&gt;<br>&nbsp;&nbsp;&nbsp; &lt;script src="assets/templates/itfits/js/script.min.js"&gt;&lt;/script&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;