Port OS Template to ModX Revo

Port OS Template to ModX Revo

January 29, 2011 Neil

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

  1. Create a “template” directory under “assets” directory. The “template” directory will house all Modular Business files (css, js and images).
  2. Create the sub-directories: “images”, “scripts” and “styles” under the template directory.
  3. Upload the Modular Business files under “images” (except for the files under “demo), “scripts” and “styles” to the new subdirectories you just created.
  4. 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.

  1. The this code between the <head></head> tags,
    <base href="[[++site_url]]" />
  2. Add “assets/template/” to the CSS, JS and arrows of the sliders.

<link rel="stylesheet" href="assets/template/styles/layout.css" type="text/css" />

<script type="assets/template/text/javascript" src="scripts/jquery-1.4.1.min.js"></script>

<script type="assets/template/text/javascript" src="scripts/jquery.jcarousel.pack.js"></script>

<script type="assets/template/text/javascript" src="scripts/jquery.easing.1.3.js"></script>

<script type="assets/template/text/javascript" src="scripts/jquery.jcarousel.setup.js"></script>

<a href="javascript:void(0);" id="featured-item-prev"><img src="assets/template/images/prev.png" alt="" /></a>

<a href="javascript:void(0);" id="featured-item-next"><img src="assets/template/images/next.png" alt="" /></a>

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.

  1. Starting with the title tag, replace “Modular Business” with [[*pagetitle]]| [[++site_name]].
  2. 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,



Navigation Menu

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" />




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,

<div class="wrapper col4">

<div id="featured_slide">

<div id="featured_content">


[[!getResources? &parents=`1,2,3,4,5` &tpl=`features` &limit=`20`]]



<a href="javascript:void(0);" id="featured-item-prev"><img src="assets/template/images/prev.png" alt="" /></a> <a href="javascript:void(0);" id="featured-item-next"><img src="assets/template/images/next.png" alt="" /></a> </div>


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 &raquo;</a></p>


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 class="readmore"><a href="[[~[[+[[id]]]]">Continue Reading &raquo;</a></p>


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`]]




<br class="clear" />



Go to Demo Site

To make it easier, I created a Demo Site for Modular. It contains all the code displayed here.

Upcoming Tutorials

Porting the Style and Full-Width Pages to ModX CMS. Plus using ModX Chunks and Template Variables.

15 responses to “Port OS Template to ModX Revo”

  1. Port OS Template to ModX Revo | Kartonista » Web Coding Unravelled

    […] from: Port OS Template to ModX Revo | Kartonista Related Posts:MODx PHP/MySQL Content Management System (CMS) Overview : Script … Script Stan […]

  2. Port OS Template to ModX Revo | Kartonista | Web Scripts Maniacs

    […] Go here to read the rest: Port OS Template to ModX Revo | Kartonista […]

  3. Web Script Den » Blog Archive » Port OS Template to ModX Revo | Kartonista

    […] here: Port OS Template to ModX Revo | Kartonista Related Posts:Flash-Port Flash TemplateMODx CMS [Premium]MODx PHP/MySQL Content Management System […]

  4. Mark Hamstra

    Regarding this comment:

    For simplicity, we’ll remove the text between the . (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 .

    Simply reference the TVs name, without the wf. prefix. So:

  5. Seo And Web 2. 0 – Two Interdependent Terms | Top Seo Consultants

    […] Port OS Template to ModX Revo | Kartonista […]

  6. modx web development download | We Build your Store Front Sign on the Web

    […] Port OS Template to ModX Revo | Kartonista […]

  7. Huan

    Is it possible to get a copy of your template anywhere?

  8. mchs.xyz

    Numerology is actually described as the study of the occult interpretations of varieties
    and even their impact on individual life.

  9. free web games

    Wow, that’s what I was searching for, what a material!
    present here at this weblog, thanks admin of
    this website.

  10. online automaty hry zdarma

    Many thanks for the share.I hope you will share again.

  11. شركة مكافحة بق الفراش بالدمام

    You have been living with mosquitoes your complete life and have
    learned to cope with them, and bed bugs aren’t almost as bad.
    1 of the causes bed bug infestations trigger
    so much difficulty is that folks panic, take unnecessary steps to
    get rid of them, and end up making items worse.

  12. 脱毛エステ

    脱毛エステ に行くか 医療脱毛に行くかで、 脱毛の出来上がりが違ってくるということを考慮して 、 自分に合った 素敵なお店やクリニック を注意深く選び 、
    しっかりと比較検討して 、頑張って 永遠に生えてこないような脱毛を申し込んで、 不要な毛
    を駆逐していきましょう。 人気のある脱毛エステ
    だけを選んで、 脱毛したい場所ごとの 料金をチェックしてみました 。脱毛サロン での処理を検討中 という方は、 最初にこのサイトにしっかり目を通してください 。大抵のサロンに 全身の部位の脱毛を行うコースがありますが、どの クリニックにおいても実質 今のところはイチオシの脱毛コースと言えそうです。 何度も施術を受ける のであれば、 最初 から 体全体の脱毛を行うコース を選ぶのが当然 おススメとなるのです。 脱毛の季節となる前に 脚脱毛 を ムダ毛のないツルツルお肌を手に入れたい方のためには、通い放題となる
    プラン がおすすめです。 あなたが満足する まで 納得いくまで脱毛してもらえるのは、 申し分のないシステムではないでしょうか。

  13. levitra,

    After I originally left a comment I appear to have clicked the -Notify me when new comments are
    added- checkbox and now whenever a comment is added I get
    4 emails with the exact same comment. Perhaps there is an easy method you are able
    to remove me from that service? Thanks!

Leave a Reply