First, I’m no ModX Guru. I just like ModX’s power when it comes to design. This is but a crude port of OS Template to ModX Revo. There are many ways to port a single template to ModX.
This is my way….
For this tutorial, I’m assuming that we’re porting Modular Business for an anime website. The site is divided into four categories (Action, Comedy, Drama, Anime Movies) and a Blog.
If you’re familiar with ModX, you can skip this and just access the Demo Site to view the codes.
I’ll start with the homepage as it’s, what I believe, to be the most complicated page of the theme. And if you successfully port the homepage, porting the other pages is a walk in the park.
You will need the following installed via Package Management:
- Wayfinder: For navigation
- getResources: For pulling document information.
The Home Page
The homepage of Modular Business is divided into the following sections:
- Top Navigation (#top)
- Header (#header)
- Navigation Menu (#topnav)
- Features (#feature_slide)
- Container (#container)
- Main Content (#content)
- Sidebar (#holder)
- Footer (#footer)
- Copyright (#copyright)
The good thing about OS Templates is that these sections are divided by a string of #-signs, so it’s fairly easy to locate them. For simplicity, I will focus on the main sections: Navigation Menu, Features and Container.
Uploading the files
- Create a “template” directory under “assets” directory. The “template” directory will house all Modular Business files (css, js and images).
- Create the sub-directories: “images”, “scripts” and “styles” under the template directory.
- Upload the Modular Business files under “images” (except for the files under “demo), “scripts” and “styles” to the new subdirectories you just created.
- Go to the “Elements” tab and open the “Base Template.” Rename it to “Homepage” and copy the HTML code of the “index.html” of Modular business to it.
Linking the ModX Template to the Modular Business Files
Now that the bare HTML is saved, the next step is to link the Modular Business the template to the JS and CSS files.
- The this code between the <head></head> tags,
<base href="[[++site_url]]" />
- Add “assets/template/” to the CSS, JS and arrows of the sliders.
Adding Template Tags
We now have all Modular Business files required to complete the homepage. The next step is adding the template tags to get pull up some basic information and display them on the template.
Check out the list of the most common template tags.
- Starting with the title tag, replace “Modular Business” with [[*pagetitle]]| [[++site_name]].
- Customize the Top Navigation, Header and Copyright the way you want. For SEO, I add title=”[[*longtitle]]” to <a href=”/”></a>.
<h1><a href="/" title=”[[*longtitle]]”>[[++site_name]]</a></h1>
3. For the Content,
The Navgation Menu has two sections, the Name and the Description. If it’s just the name then it would have been easier, the presence of the description makes it a bit complicated.
<li><a href="style-demo.html">Style Demo</a><span>Test Text Here</span></li>
For simplicity, we’ll remove the text between the <span></span>. (I will update this post once I figure out how to display the dropdown menu and the template variable with that holds the value for the <span></span>.
Replace the unordered Navigation Menu list with the following call,
[[!Wayfinder? &startId=`0` &level=`2`]], we get
<div class="wrapper col3"> <div id="topnav"> [[!Wayfinder? &startId=`0` &level=`2`]] <br class="clear" /> </div> </div>
When porting OS Templates, I always get excited with the sliders. It’s relatively easy to port with the use of getResources and a chunk.
I’m going to assume that you want the featured articles to display the list latest of articles (in the form of linked images) from all categories.
The features are displayed as an unordered list, with each row having the following code:
<li><a href="#"><img src="images/demo/150x130.gif" alt="" /></a></li>
There are several ways to get the image to display but I’m going to use what I’ve been using since 0.9.x. Create a new directory that will hold all images that of the featured posts. I created a “features” directory under “assets/images/”.
Create a new chunk labeled “features” and will contain the following code.
<li><a href="[[~[[+id]]]]"><img src="assets/images/features/[[+id]].jpg" alt="[[+longtitle]]" /></a></li>
This means that if you have a new article/post, you just have to create a corresponding JPG picture measuring 150×130, name it with the id number of the article, and upload it to the “assets/images/features/” directory.
Note: There are ways to make this automatic, including automatic cropping of the images but I’m still yet to figure how to get that to work. And I want to gain more control of the images that goes to the site so I chose this option.
Finally, we replace the featured list with the following getResources call,
[[!getResources? &parents=`1,2,3,4,5` &tpl=`features` &limit=`20`]]
This results in,
1,2,3,4 and 5 are the id numbers of the main containers (home, action, comedy, drama and anime movies). The value of &limit sets the number of posts that will be displayed.
The sidebar will follow the same steps as “features”. A single item on the list has the following code:
<li><img class="imgl" src="images/demo/80x80.gif" alt="" /> <p><strong>Indonectetus facilis leo nibh.</strong></p> <p>Nullamlacus dui ipsum cons eque loborttis non euis que morbi penas dapibulum orna.</p> <p class="readmore"><a href="#">Continue Reading »</a></p> </li>
1. Create a new chunk name “homesidebar”. This will contain the placeholders and will look like the following,
<li><img class="imgl" src="assets/images/homesidebar/[[+id]].jpg" alt="[[+longtitle]]" /> <p><strong>[[+longtitle]]</strong></p> <p>[[+introtext]]</p> <p class="readmore"><a href="[[~[[+[[id]]]]">Continue Reading »</a></p> </li>
2. Place the getResources call between the <ul></ul> tags.
[[!getResources? &parents=`9` &tpl=`homesidebar` &limit=`2`]] to get the following,
<div id="column"> <div class="holder"> <h2>Latest Blog</h2> <ul id="latestnews"> [[!getResources? &parents=`9` &tpl=`homesidebar` &limit=`2`]] </ul> </div> </div> <br class="clear" /> </div>
To make it easier, I created a Demo Site for Modular. It contains all the code displayed here.
Porting the Style and Full-Width Pages to ModX CMS. Plus using ModX Chunks and Template Variables.