The vBulletin CMS allows you to customise your layouts to suit your needs. These layouts can then be used in different Sections of your CMS to give each Section it's own look - couple this with it's own style (see this entry on how to change these in your Sections) and you can really start to give your CMS a sense of individuality.

Creating a New Grid

To create a new layout, you first need to create a Grid - if you don't already have a Grid you wish to use. A Grid controls the general layout of the contents in a section using elements such as columns, sidebars, headers and footers. Once a Grid has been created, you can then customise what is shown within the Grid using the Layout Manager.

Firstly, to create your new Grid go to:

AdminCP > vBulletin CMS > Grid Manager > [Add New Grid]

Grid1.png

This will then give you a number of options on how you wish the Grid to look:

Grid2.jpg

The Sidebar can be one of four fixed widths:

- 120 pixels
- 160 pixels
- 240 pixels
- 300 pixels

The Columns dropdown gives you a number 15 different options for the main element of your layout. Rather than post all of these in the article, a PDF file is attached which shows the layout of each of these.

Grid_Layouts.pdf

Once you're happy with the Grid that you've created, simply press Save and this will be created for you.


Creating A New Layout

Now that you've created the Grid that you want to use, you need to fill it with the relevant elements to make up the page layout. To do this, simply go to:

AdminCP > vBulletin CMS > Layout Manager

Layout1.jpg

Clicking on 'Add New Layout' will allow you to specify which Grid you wish to use for your new Layout:

Layout2.png

1 - Title: This is the title you'll give to your Layout. This will be shown in the Layout dropdown when editing Sections

2 - Grid: Here you can select which Grid you're going to use for your new Layout

3 - Widgets: If you have created widgets for your CMS then these will be listed here for you to use within your Layout

4 - Layout: This section shows the Layout based on the Grid you've selected in 2. Press 'Save' to save this configuration

The next section looks at how to edit the Layout itself before Saving.


Edit A Layout

Whether you're creating a new Layout or simply adjusting the positioning of elements within an existing one, the procedure below is the same. If starting with a new Layout, you will see that the 'Primary Content' block is already added. This is where your articles will be displayed.

If we take another look at the image from the previous page, we'll see that the Layout is split into three content areas:

Layout2.png

With new Layouts, the Primary Content block will be added to the left-most content area however you can move this by simply placing your mouse cursor over the 'Primary Content' text until you receive a '4 arrow' cursor image - move.png - then clicking and holding your mouse button and dragging the block to the content area you wish to have it in:

Layout3.png

You will notice that as you drag each block around your Layout, a red dashed border appears over a block as you start to hover over it. Letting go of your mouse button at this point will see the block move to that content area. Note - You don't have to move the block to an adjacent area, you can move it to any block in the Layout and then 'drop' the block into the content area of your choice.

To add other widgets to your Layout, simply highlight them in the Widgets list and click on the '>' button to move them into your Layout. Each widget will be added to the left-most content area initially for you to drag to the location you wish to show this. Once you've added your widgets, your Layout Manager should look something like this:

Layout4.png

If you wish to change the vertical order of the widgets within the content areas, simply follow the same procedure as above and drag the widget to where you wish it placed.

To delete a widget from your Layout, simply click on the X in the top corner of it.

Once you're happy with your layout, click 'Save'. You can now assign this Layout to one of your Sections.