Moodle 2 Theme Engine

Layout Settings

The layout tab lets you set a number of the overall settings of your theme.
Layout editing

  1. To access layout settings, click the Layout tab.
  2. Choose a fluid or fixed witdth layout. A fluid layout will expand or contract depending on the size of the viewers display. Fluid layouts are usually be 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 browswer 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.
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.
Number of columns
  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 header height.
default header hieght

By default your header images are set to 80px.

header height too small

If this is not tall enough for your header, not all of it will be displayed. To see the actual height of your header, you can inspect the file on your hard disk, for example in this case Windows tells us the file is 93pixels high.

header height

So we set the header height to 93pixels by entering 93px and save changes to set the header height correctly.

header height setting

Now the header image shows in full.

Header hieght set

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