It has been a while since my last article. We have been extremely busy here with summer vacation and projects coming to term. Now that September is just around the corner, it is time to get back in gear. So here is another SharePoint 2010 branding tip: Branding Dialog Windows!

When you start applying your own custom style to a SharePoint site one thing you will start noticing is that the dialog windows also take on the styling that is applied to the main page. To prevent some items from appearing in the dialog windows, we need to add the following class to the html elements we want to hide:

s4-notdlg

Once placed in the class of an element it won’t be displayed (you can do this with items like the header div, the top navigation div, etc.)

But what happens if you apply a css class to an element in the homepage that cannot be hidden in the dialog box, such as the main content div or the bodyContainer div?

In that case you can use the following trick:

.s4-bodyContainer { width:950px; border: 1px black solid; }
html.ms-dialog .s4-bodyContainer { width:400px; border: none; }

The “html.ms-dialog” placed before an existing style class such as s4-bodyContainer will let you override the display when the page is in a dialog window. The main tag in the render takes on the class of ms-dialog and css will cause inheritance to this overridden css class.

There is more to come soon so stay tuned!