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:

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

   <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>

2. 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:

<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.

How Do I Change This? How Did You Do That?

Quite often, people will ask "how to I change ___ on my site?" Other times, see something posted, such as a link in the "showing off" thread, and ask, "how did you do that?" One of the best ways to learn how to do things with wp and mz is to install a firebug plugin into your browser, right click the area of the page you want to know more about or change, and inspect the element.

In firebug, the html will be on the left, and the css will be on the right. What you won't see is the php that made the html, but most of the time you either won't need it, or it will be obvious from the default templates.

Lazyest Stylesheet Plugin

Not everybody will agree with me on this, but I find the Lazyest Stylesheet Plugin to be the easiest way to add custom CSS to Montezuma. I have even requested that MZ add such a feature to its next release.

Here's how it works:

1. Install and open the plugin,
   
   
2. Enter your custom CSS into it and save,
   
   
3. Load your page,
   
   
4. It always loads as the last stylesheet,
   
   
5. If there's a conflict with it and something else, because it's last, your custom CSS wins the cascade order.

What I especially like about it is:

• No need to ever touch the theme CSS files,
  
  
• All the custom CSS is in one place, easy to find, easy to validate.

It also has an optional mobile stylesheet, if you want custom styles on mobile devices.

Update: Juggledad also came up with a solution that also puts all the custom css in one place. Add it to the end of the last theme CSS file, clearfix.css.

Code Validation

The problem with many coding mistakes is that, while the browser will display the page, it looks awful, and you don't know why. Many coding problems can be easily found by simple code validation.

Here's an example. you went into your code to change your layout and, while you were at it, changed an <h3> to an <h2>, but forgot to change the closing heading tag from </h3> to </h2>. When you try your page, your layout looks weird. You spend hours trying to figure out what you did wrong with your layout, when there was nothing wrong with the layout at all. It was the previous heading tag mismatch error that threw everything else off. And, who hasn't left out or put in an extra closing </div> tag somewhere.

HTML Validator

A properly coded MZ page should get no HTML errors. If you get errors, it's probably because you added something incorrectly, or you have plugins causing errors. Disable your plugins if you're not sure.

CSS Validator

If your custom code is right, you should get zero CSS errors; MZ is CSS standards compliant. If you use the Lazyest Stylesheet, it's easy to copy and paste your custom code into the validator because all your custom CSS is in one place.

PHP

Validating PHP is a more complicated. With some errors, your server will throw an error and the page will not display. With other errors, PHP will generate different HTML than you intended, which you might be able to spot with view-source.

Layout

Not all layout mistakes will show on a validator. For example, if your MZ column units in a row don't add up to 12, it won't show on a validator. Your page may just look strange. Here's how you can check your layout.

Sidebars Anywhere

With Montezuma, think outside of the 'side' when you hear the term sidebar. They can go in any template or subtemplate, such as in your header, footer, or even in the content area of a template. This gives you lots of layout options.

Once you declare a sidebar using code such as:

<?php dynamic_sidebar("your-new-sidebar-name"); ?>

and save your template or subtemplate, the widget of named "your-new-sidebar-name" will automatically in your widgets interface at:

Dashboard > Appearance > Widgets

Here's an example of a sidebars by Juggledad that shows how to put a sidebar in the left side.

Keeping All Custom CSS Together

In addition to my favorite way of keeping all custom CSS together, Juggledad has come up with another way to accomplish this, and his idea requires no additional plugins.

Go to: Dashboard > Appearance > MZ Options > CSS Files > clearfix.css

Put all your custom CSS at the end of that file. There is no need to edit any other CSS file. All other things being equal, any conflicts between conflicting declarations will be resolved in favor of the later declaration, and clearfix.css is loaded after all the other css files.

I Don't Know Any ____! [HTML, CSS, PHP]

Occasionally, people post onto this forum wanting to customize Montezuma, knowing little or no HTML, CSS, or PHP. Montezuma is, by far, the most customizable theme there is for Wordpress. However, it still requires some basic understanding of HTML, CSS, and sometimes PHP. At the very least, you have to know how to format the code, so you can copy, paste, and edit it to make the changes you want to make. With that you can do amazing things with Montezuma. With other themes, you would have to know far more to do far less customization.

There are many great basic tutorials on these three languages. HTML is the basic one. CSS is how HTML is styled. PHP is how HTML is generated programically.