How to Custom Master Pages and Dialog Boxes

So you have a nice custom master page and you are applying it all over your new SharePoint 2010 site, what happens when one of the new dialog boxes is loaded on the page (like when you click to edit a list item)? Guess what… your branded master page with logo and footer and everything will also apply to the much smaller modal dialog box that SharePoint pops up, see the screenshot for an example:

How do we fix this? Microsoft had the good sense to give us an easy CSS class to add to our html elements that we don’t want showing in dialog boxes, simply add s4-notdlg to the class, like this:
<div class="customFooter"> would become <div class="customFooter s4-notdlg">
For my design, I added this to the top, header, navigation, and footer div’s in my master page, and BAZINGA I get dialog boxes that have only a hint of my custom branding:

How to Custom Master Pages and Dialog Boxes