SP2010 Branding Tip #2 – Custom Master Pages and Dialog Boxes 8

5 Nov 2009   | SharePoint

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:

image

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:

would become

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:

image

8 thoughts on “SP2010 Branding Tip #2 – Custom Master Pages and Dialog Boxes”

  1. Reply Randy May 11, 2010 3:21 am

    Thanks Randy. Just what I was looking for.

  2. Reply Cory May 17, 2010 2:55 pm

    Randy,

    i used the remove s4-workspace to do fixed width for a site and noticed that the dialog boxes in Firefox no longer auto re-size have you run into this?

    Thanks

  3. Reply Randy Drisgill May 17, 2010 3:01 pm

    Keep ID=”s4-workspace” and add class=”s4-nosetwidth” if you are doing a fixed width design.

    Yes sometimes the dialog resizing can be a problem, watch your main container widths and paddings. You may need a .ms-dialog + bodyclass style that overrides just when the dialog is using it.

  4. Reply Vipul Jun 1, 2010 7:22 am

    thanks Randy Drisgill but exactly where do i need to use s4-notdlg class link in which div?

  5. Reply Randy Drisgill Jun 1, 2010 10:12 am

    class=”s4-notdlg” goes in every div that you don’t want to show in a dialog box. Common places would be the logo, navigation, and footer.

  6. Reply Muhanad Omar Jun 6, 2010 5:06 pm

    Thanks for the tip Randy, much appreciated!

    -Mo

  7. Reply wonderwoman Jul 23, 2010 10:18 am

    Randy, can you check this out in firefox? Cory is right – firefox does not resize properly. If you have a solution, please let me know.

  8. Reply Randy Drisgill Jul 23, 2010 11:12 am

    I might need to see a screenshot of whats going on. I have seen instances where you need to add extra CSS to get rid of padding and widths from custom branding that are applying to dialogs. I’m not sure if this is what you mean buf for that I add CSS like this (customBody is my main page container):

    .ms-dialog .customBody {
    margin:0px !important;
    width:auto !important;
    height:auto !important;
    padding: 0px !important;
    }

Leave a Reply