Integrating a Template into MODX part 1
In this tutorial we will cover how to get the Soho template homepage into MODX. You can use this process with pretty much any template or custom design in order to create a website in MODX. This tutorial starts on the premises that you already have a working version of MODX installed and have access to the manager portion of it. Before we begin here are some things you should read so you can understand some of the MODX terminology.
Here is a list of the things we will cover in this first part of the tutorial.
- Identify Areas of our Homepage Template
- Identify MODX Extras we will need to use
- Homepage Breakdown
- Project Setup
- Edit Html, CSS and JS files to use correct paths
Identifying Areas of our Homepage Template
First download the Soho template from Codeplay Studios , this is the template we will be using for the tutorial. Our goal is to get the index.htm template into MODX in order to edit every area of it in MODX.
Once you finish downloading the template and extract its contents you will end up with these files
The first thing we need to do is get rid of some unnecessary files we will not use in this tutorial, these are about2.htm, index2.htm and index3.htm
Now that we have deleted the unneeded files lets proceed to see what our index.htm template looks like.
As you can see our index.htm template has a header, a footer and area dedicated for content.
The content area of the Homepage has a slider, a four column div followed by a one column div and finally a two column div.
Identify MODX Extras we will need to use
A MODX Extra is an Add-On that extends the functionality of the CMS, there are many Extras for MODX ranging from Gallery creation, Dynamic navigation generators to Form Creation Extras. You can see the full list of available MODX Extras here .
We need to analyze the sections of our Homepage in order to know what areas of it can be converted to use a MODX Extra.
Homepage Breakdown
Let s start with the template header, we will create a chunk that will contain the site logo and wayfinder extra for the navigation.
For the slider we will use gallery.
For the four column divs (Introducing Soho, Features, Browser Love and Other Files) we will use template variables, one for each column.
For the one column div (Testimonials) we will use another template variable.
For the two column divs (Sub Heading 2 and Sub Heading 3) we will use yet another two template variables, one for each column.
For the footer area we will create a chunk with 3 template variables, a wayfinder call and a simple formit email subscription form.
After our Homepage Breakdown we now know we need 3 extras for this page.
- Wayfinder
- Gallery
- FormIt
Project Setup
Now we will cover how to setup our project for easy integration with MODX, we will create a folder structure that mirrors where our files will reside in MODX this will make the transition from static template to a MODX template very seamless.
To accomplish this we will need to do a few things:
- Create a assets folder
- Create a template folder inside our assets folder
- Create a CSS folder for our style sheets inside our template folder
- Create a JS folder for our javascript files inside our template folder
- Create an image folder to store our images inside our template folder
If you go to your template folder you will see all files are in the root of our directory.
Let s change that by organizing our files a bit, create an assets folder.
Now let s move all our style sheets, javascripts and our images folder into the assets folder, once we do this our project root folder will look like the screen on the left and our assets folder will look like the screen on the right.
So now our Root folder is nicely organized but our assets folder is a mess, let s create a CSS folder to store our style sheets and move all our CSS files into this folder.
Now we have to create a folder for our Javascript files so go back to the assets folder and create a scripts folder and move all your javascript files to it.
So now our assets folder is nicely organized with a folder for our images, css and javascript files which is great but if you open any of the html pages you will see they are not styled and no images are showing.
Edit Html, CSS and JS files to use correct paths
In our last section we organized all our files into folders and this caused our HTML to break the paths to the images in all the files, now we have to fix them so it uses the new folder structure we created.
Let s fix our CSS paths, open your HTML/Text editor and let s look at our head tag to see what needs to be changed. In the head of the index page you can see we have some scripts and css links we need to update their paths.
For our Javascript files we need to add: scripts/ before the name of the script file and for our CSS files we need to add: css/ before each CSS file name, make sure to check the whole document for any stray javascript links that might need updating. Once you have updated the path to the css and js files your template should look like this.
So let s see how our page looks now that we ve updated our CSS and Javascript paths, open the index.html file and we see its starting to look like its supposed to.
Notice that none of the images are displaying let s fix that by updating the image paths in our template. Let s go back to our editor and look at our image tags, if you look closely you can see all our images share something in common, they all have a starting image/ path this is great because now we can use find and replace on all our template files and update them all at once if your editor supports mass find and replace of opened files or directories.
So open the replace or find and replace in your editor and in the find text field enter images/ and in the replace text field enter images/ and click on replace all (button may vary in your text editor).
Let s go back to our browser and refresh the page, now the Homepage look exactly like it used to and its assets are organized like the MODX setup we will use.
Upon inspecting the page I noticed the email subscribe button in the footer is not displaying correctly, that means our css files have incorrect paths let s fix them.
Open the style.css file in your text editor and let s see how our image paths are setup, we can see all images have a preceding images/ directory.
Again we will use the images/ to do a mass find and replace in all our css files (because your text editor supports this right?) we will be replacing images/ with ../images/ once we do this all our css files will have the correct paths for the images used in the templates.
After using Chrome Dev Tools I noticed the Index page has an incorrect path for an image.
Upon further inspection I noticed it was an image being used in the javascript tag for the image slider, this image path did not get replaced because it was using img/ instead of images like all the other images in our HTML pages, so I added the correct path images/
Now Chrome Dev tools says everything is fine.
Okay we have finally finished with our local files in the second part of our tutorial we will start working inside of MODX uploading all our files and installing the extras we need to get our site done.
Mad:
Nov 24, 2012 at 06:38 PM
Thanks for the tut!
Reshi Mahendra :
Jan 04, 2013 at 01:45 AM
Really helpful. Nice tutorial. I just start to learning ModX (evo) and searching related references for the template structure.. want to test it on this weekend.
Thanks for the tutor.
Regards,
Reshi Mahendra
www.mertamedia.com
Susan Ottwell :
Jan 11, 2013 at 02:19 AM
The link to the SOHO template at csstemplatesfree.org is dead; you can get the template at http://www.codeplay.co.za/soho/index.htm
ahren:
Jan 30, 2013 at 07:37 PM
Oops, this seems to be out of date already. That CSS template is no longer available...
Benjamin Marte :
Feb 06, 2013 at 08:36 AM
Thanks for the heads up guys I updated the tutorial with fixed links for the template.