MODx Revolution tutorial for beginners | Cart66 fashion theme.
Welcome to the MODx Revolution 4 lessons for beginners. At the last session we did some configuration site and looked at how to expose some of the global settings. We also investigated how to install add-on MODx from the repository using the package manager. In this post we will look at how to work with templates in MODx Revolution. We're going to start with a static HTML / CSS template and a few lessons to transform it into a full MODx Revolution template.
What is MODx templates?
MODx templates are simple HTML / CSS templates from within the MODx tags for dynamic functionality. This is a very simplistic definition, but in my mind has developed just such a definition for MODx template. If you know how to program HTML / CSS, or you can look into this code, the rest you will not be a problem. That's what makes MODx is very convenient for the designer.
For this tutorial, I decided to use the 66themes studio Themeforest for your site. If you want to follow my exact steps you can take this as a template, or take a different template, design your own or downloaded from another resource (in Google search for "free css templates'). The procedure for developing a template will be similar.
In this tutorial I will use the 7 in 1 Business Success Site template because it has a great view, and at the same time complex enough to make it interesting to port the site to MODx. Includes 7 different color styles, I'll use blue, and you choose what you like. Well get started!
The first thing I want to note: a method for constructing the template shown in this lesson - it is not the only or edinstvennoverny way, it's just one way that I use. MODx does not limit in which to put the files or how to break the pattern ... How do you feel comfortable, so you and make your template or as convenient to your client. So keep this in mind and can retreat in order construct and invent their more optimal ways, as they say - as I do, do it better than me.
1. Download the template files
Each template contains a lot of files - css files, JavaScript, images, flash files ... All this must be stored somewhere on your server so that your template has access to these files. I prefer to store all the files that belong to the template directory in the middle of the assets. You can put anywhere and set the appropriate paths to your template.
Unzipped template files are now about a file structure:
Thus one step in our development of a template is to copy the three folders on the server template files, folders is the sample-data /, scripts /, and styles /. I created a folder in the middle of the assets and called it the templates, and I created a folder 7in1, which put the above file folder template. If you mess up, then look at the picture and everything becomes clear:
Now these files are available for any template that you will make.
2. Mask generation
After downloading the file folders, we can start creating our MODx template. In the admin panel, click on the tab Elements on the left, opens a panel with various elements of the site - templates, chunks, template variables and others. Press natemplates and see what is already in the presence of a basic template with the name Base Template. If you click it, you can see the code for this template. We see the HTML code with tags [[+ + site_name]], [[* pagetitle]].
These tags are transforming a static HTML / CSS code in a dynamic MODx template, and we're going to learn how to make and attach to it their own hands.
Let's go ahead and do our template. To create a new MODx Revolution template right click Templates, and then New Template.
You can also click on the icon of New Template:
In the next window, enter a name for your template and description. You can rzmestit it in the category for best about your site. Well, as you put the elements of the site depends on you and your taste. I usually create a category for the main template, where I keep all the templates and chunks for this template, then do the same for navigation and so on. You can organize your site on your own.
To create a category, right-click on the Categories tab in the Elements.
Well, you can add code to our new template. We begin by creating a template for the main page. Now I can say that the design of the home page will be different from the design of internal pages, so I will call this pattern is somehow his name, for example, «7in1 Home». Code home page is index.html file in the folder with templates, which we downloaded from Themeforest, so open this file in an editor (I use Notepad + +) and copy its contents into our newly created template in MODx. You can (and in my opinion is even more convenient) to edit the first code outside of MODx Revolution and then transfer the edited code to the corrected pattern, but on the basis of the purposes of this tutorial, these actions will hold within the editor MODx.
3. Edit the path
Let's modify our code paths for the template. We copied our Cart66 fashion theme to a folder assets/templates/7in1. Therefore, we need to change the way links to css files, js files, images, etc. to the correct path on our server. This element of your work can be done to speed up before copying the template code into an editor MODx. Now just looking at the code, I can say that I need to look for a folder styles / and replace it with assets/templates/7in1/styles /, and so on. Replace all the way and keep our template. You may find that something is lost and there is an error in the output page, so go back and re-adjust the way.
4. Purpose Template
So we ended up porting the template, let's assign a template page and see what we have done. To define a template for the page we need to go to the tab Resource and open resource for which we want to define a template (in our case is the page Home). If you click on the field Uses Template, then the drop-down list you can select a new I created a template.
After selecting a template, click Save the message that if you really want to change the pattern affirm. The importance of this will clear up after we make different patterns, which is a lot of chunks and template variables, and we have a different place, so you need to be confident in the correctness of the choice of template, the resource for which you are editing at the moment.
After saving, we can view the page and see how it looks now. Here is a screen shot, which is visible to the top of the page