Modx & blogging part 4: Templating basics


17
Sep


Templating, Modx, Articles

If you've been following this series you'll know we now have the technical framework of our blog (mostly) set up. In the next few parts we will look at how to integrate 3rd party templates to style our site - specifically to replace the Articles templates but also looking at the site as a whole.

It is impressive that the Articles plugin not only provides all the tools needed to start blogging in Modx but also provides templates to get you started. For some people, the default template will be fine - with or without tweaking. Unfortunately for me, I am not one of those people, so I will be completely replacing the default template with one of my own.

Or perhaps I should be more clear - with one of the many excellent, free templates available on the web. If you are not familiar with what is available google free html5 templates and start exploring. As much as I would love to be able to hand craft my own template from the ground up, I recognise this is beyond my design skills, so I am grateful to the many designers with the skill who make their designs freely available.

I have chosen to use an Html5 template from elemis called Caprice. Out of the box, its blog pages look like this:

Default Caprice blog header page

and this:

Default Caprice blog post page

Before continuing, I should mention that there is a very good series of tutorials about integrating templates into Modx. I've mentioned CodingPad before - it is definitely worth checking out.

The approach that I will be taking here is to first make a few basic changes to the Caprice template - removing bits that I don't need and incorporating my own logo - and in the process identifying likely candidates to be turned into chunks (more on this later).

Of course most of you will want to choose your own template, so much of the specifics of what I'll be covering will need to be adapted to your own needs, but I hope that the following will at least help you along your way.

Caprice comes with many pages - a home page, a number of blog and portfolio pages, a contact page and a number of example pages. Many of these I don't need so first up I simplified the menu to remove what I didn't need. The menu went from this:

    
    
    

To this:

    
    
    

At this time I only changed the menu on the Home page, as this is an obvious candidate to be turned into a chunk - so there was no point in making the same change on each page. Similarly with the new logo. In fact, the whole blue sidebar and all its content should become chunk(s) as this is an element that is consistent across all pages. There are other candidates for 'chunkification' that we'll get to later.

The Caprice template has now been streamlined to suit my initial purpose. I have a Home page, a Blog summary page, a Blog post page, a Portfolio page and a Contacts page. These tutorials will not be covering the creation of the Home, Portfolio or Contacts pages (perhaps I'll cover these later) - we will be concentrating on the integration of the two blog pages with the equivalent Articles templates:

ArticlesContainerTemplate = blog.html

ArticleTemplate = post.html

The plan will be to replace portions of the Articles templates with equivalent portions of the html pages, modifying both the html and css where necessary (hopefully not too much will need to change). As we go through this process piece by piece, the resulting pages are going to look kinda weird for a while until we get everything aligned properly.

We'll get properly started in the next installment.



Add a Comment