Montezuma Newbie Tips

jerryc · #3 Jan 25, 2013, 12:20 PM

CSS Grids

The CSS grid system is one of the things that makes Montezuma so great and so flexible. The documentation is clearly laid out in:

Dashboard > Appearance > Montezuma Options > CSS Settings

The 2 key things are:

Surround your column divs in each row with row div's, such as:

HTML Code:

<div class="row">
  <div class="col3">...column on the left, 3 "units" wide...</div>
  <div class="col6">...column in the middle, 6 "units" wide...</div>
  <div class="col3">...column on the right, 3 "units" wide...</div>
</div>

Your col divs in each row have to add up to 12 units wide.

Experiment with a test template and a test page. Make a new template called something like test. Give your test divs each a different background color, such as:

HTML Code:

<div class="row" style="background:yellow;">
  <div class="col3" style="background:red;">...column on the left, 3 "units" wide...</div>
  <div class="col6" style="background:blue;">...column in the middle, 6 "units" wide...</div>
  <div class="col3" style="background:green;">...column on the right, 3 "units" wide...</div>
</div>

Remember, the background will cover the padding, but not the margins.

Here's an even more detailed post by Juggledad that shows how to put a sidebar in the left side.