SP2013 Branding Tip: Keeping the Dialogs Neat

In SharePoint 2010 there was that special class for hiding elements from showing up and screwing the layout of dialogs: the .s4-notdlg class. In SharePoint 2013 the equivalent is .ms-dialogHidden. So, simply add this class for whichever elements you don't want popping up in the dialogs.

As important as it is to hide certain elements (such as navigation, searchbox, etc.) from the dialogs, there are elements you should not and cannot hide, but that can cause problems when the web page design (e.g. min/max widths and heights) are suddenly implemented in the dialogs too. For this, SharePoint 2010 didn't have any absolute and really good way of fixing. But SharePoint 2013 does. 

Use the class .ms-dialog as the parent class for any rules you want to use for certain elements when appearing in the dialog. For example:

.ms-dialog #titlerow{

min-width: 0; /*as opposed to e.g. a setting of min-width of 800px*/

} 

It still isn't perfect, but much better than before.