Three or four column grid layouts

This post talks about grid layouts in the old Research and Conferences template, you can use this post to help you create grid layouts in the new template but we’ve written a new post for that (

A lot of our websites have a homepage laid out as a grid of boxes containing images and text, where each box relates to a theme of the site or a set of related tasks. With a good choice of photography or illustration, this is a good way to make a site look alive and gets people straight to where they want to be. Here are some examples:

Step 1) Remove the Sidebar

You’ll want to make use of the full width of the template. To remove the sidebar, Modify the Content of the homepage of your site (Modify Content is found in the column of yellow boxes) and add the word ‘nosidebar’ to the class field:

Preview or Publish the content, and your text will fit the full width of the template:

So far so good – note that if you want a full width image, it’ll need to be 960px wide. If you want an fading banner at the top of the page follow these instructions.

Step 2) Create and Upload your Images to the Media Library

It’s best if you resize all of your images to the same size and shape using photoshop and then upload them to the media library in one go, going back and forth between editing the content and uploading the images will take more time. The images i’m using in this example are 420px wide by 236px tall.

Step 3) Create a new piece of content for each box

Each box on the page will be a new piece of All Purpose Content. Create three new pieces of content with an image at the top and some text. If you’ve already created them, you should make both the images and the text into links to the appropriate sections of your website. Give each of these new pieces of content the class “threecol” as shown in the screenshots below:


You can reorder them by returning to the site structure and clicking Modify Content to the right of the homepage – the move buttons are up and down arrows to the right of the screen. This can be a bit fiddly, so remember to click Save Changes before leaving this screen.

Publish or Preview your site and LO!, you will have three boxes laid out in three columns as in the screenshot below:

Step 4) But I want FOUR boxes!

If you add a fourth box with the class threecol…

…You’ll find that when you publish it, it starts a second row:

Using the threecol class is good if you have a number of boxes divisible by three, so if you have four boxes, you probably want to change all of the class fields for these pieces of content to either ‘twocol’ or ‘fourcol’ – which you choose will depend on the sizes of your images, quantity of text.


To make this layout work with two columns, I should have probably formatted the images to be wider and narrower as the second tier now requires scrolling on many monitors, and a second tier may look like second class content, which you might not want.


The fourcol version means that the text ends up looking quite tall, so in this case i’d probably rethink how much text I need in each box – maybe consider just using the titles.

Step 5) But I want FIVE boxes!

We don’t always have the luxury of planning ahead. There is no facility for creating five column layouts at the moment, but you can combine a row of three and a row of two by giving the fist three items a ‘threecol’ class and the final two ‘twocol’. If you resize your images with this in mind it will look ok, but in this particular example it looks like this:

A bit weird. A better solution might be to turn your welcome text into a sixth box and return to a threecol grid by adding the threecol class to the very first piece of content.

It then looks like this:

It will probably look better if the new box also has a similarly formatted image to the others on the page, but hopefully this post has given a good overview of how to create two, three and four column grids on pages.

See also:




News and Events, Sorting and Archiving Content

Most content on your website is added using the All Purpose Content template type. Other content templates are available for Staff Profiles, News and Events, etc.

This page discusses the News and Events templates – both behave in a very similar way but have different selections of fields to display. The examples will be from the News template.

This page also discusses sorting content, setting archive and expiry dates that are particularly relevant to sites which have a high turnover of news, but the controls discussed will work on all kinds of content.

News and Events

Add News and Events

News Content Types

Click Add Content using the yellow dropdown menu to the right of your News section and choose the News Template from the list that appears.

News and Events Template

In most cases in T4, a Section represents a single webpage, but in the case of Staff, News and Events, multiple pieces of content appear on the page and clicking on their titles opens up a new page.

The Name and Brief Description appear in your news list, when you click on the title or the image, the visitor is taken to a new page containing the full text of the Main Body.

As with the Staff Profile content type, the Picture you upload is resized both for the list and for use within the news item.



As you can see from the list though, our content has been automatically added to the bottom of the page (as it does when you add any new piece of content to a page).

Automatic Ordering

With news you want the items to automatically order by date – and with staff you probably want automatic ordering by name.

You can do this by going to  Modify Content within the news section.

Modify Content

Click the checkbox marked Automatic Ordering. Choose the type of ordering you want (by updated, created or alphabetically), and uncheck the locks next to each piece of content. If you have a very important news item you want to remain at the top, leave its lock checked and use the arrows to move it to the top as shown in this screen shot.

Automatic Ordering

Remember to click Save Changes before leaving this screen. The ordering will update on your website next time this section is published.

Automatic Archiving and Delayed Publishing

Automatic Archiving moves news into a chosen section at a given date. Add a section called Archive to your news Section. You can choose to make this a hidden section by unchecking the ‘Show in Navigation’ box. Tick the ‘Archive’ checkbox.


The next time you add content to the News Section, you can click on the Options tab for that piece of content. You’ll be given a screen where you can select Publish and Expiry dates.

If the Publish Date is set in the future, the content won’t appear on your site till the next publish after that date and time (this will be within four hours).

Publish and Expiry Dates

Within four hours of the Expiry Date, the content will move into the Archive section if you select one, otherwise, it will be deleted.

Note that this is based on the publishing schedule for your site, if you need to rely on this for legal reasons (embargoed press releases, or a received take down notice for example), please email to stating your requirement.

See also: