Moodle 2.3 Theme Engine

Layout Settings

The layout tab lets you set a number of the overall settings of your theme.
Layout tab
  1. To access layout settings, click the Layout tab.
  2. Choose a fluid or fixed width layout. A fluid layout will expand or contract depending on the size of the viewers display. Fluid layouts are usually the best bet for working on multiple different client devices, as they will shrink to fit a small tablet or netbook screen, and expand to fit large resolution screens. However, this means that images and user interface elements move around to fit the screen size (in a 'fluid manner') so designers that require strict placement of images and UI elements may prefer to choose a fixed width layout.
  3. If a fluid width is chosen, you can choose whether the design expands to fill the entire web browser page, or if it only expands to % of the page. If you have fixed width set in Layout Type, this setting will have no effect.
  4. If a fixed width is chosen, then you can enter it's value in pixels here (for instance 900px here will fix the page width at 900 pixels if you have Fixed width set in Layout Type. If you have a fluid width page, designers often choose a minimum width that the page cannot shrink below, this keeps UI elements from overlapping each other, etc. you can do this in Autotheme by choose a fluid width and then setting a minimum width here.
Example 1: Fluid width with the 80% width setting.
Layout tab fluid width example

When a fluid width is chosen with a less than 100% width, then AutoTheme prints a space around your theme.

Column settings on the Layout Tab:
The layout tab also lets you set how your columns are displayed.
Layout tab column settings
  1. Standard Moodle sites have three columns. The "Number of Columns" setting lets you change this to show only two columns.
  2. You can set column 1 to be placed on the right side of the page, or the standard left side.
  3. You can set column 2 to be placed on the left side of the page, or the standard right side.
  4. You can set the column width for your right and left columns.
Setting the header height:

Below the column width is a setting for the logo height. This controls the height of the header logo.
Layout tab logo height setting

By default the logo height is set to 109px. If this is not tall enough for your image, not all of it will be displayed. To see the actual height of your image, you can inspect the file on your hard disk. If the image is taller than 109 pixels, change the logo height setting to at least the height of the image.

Likewise, you can set your banner height if you are using a banner.