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

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:

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

image

15 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;
    }

  9. Reply larry Aug 27,2013 6:14 am

    I have created a custom master page. the problem I am having in my dialogs are I am missing the images in the top right to close or resize. I cant figure out where to make the change to have them visible again. Any help would be greatly appreciated

  10. Reply Marie Oct 28,2013 1:51 pm

    I used the class=”s4-notdlg” in those divs but I am getting dialog boxes that are empty, just have just the background of my custom page, no content in them.

    I looked at the padding, height and width of my wrapper (container) and there is nothing that seems to interfere:
    .wrapper {
    width: 1060px;
    background: #fff;
    margin: 0 auto;
    }

    I don’t know why I am getting empty dialog boxes. Can you help?

    Marie

  11. Reply Clem Nov 18,2013 7:47 am

    Keep in mind, using a custom master in SP2010 will kill people picker fields and lookup columns in lists. Since the custom master will render in IE9, the switch back to IE8 for NewForm.aspx and EditForm.aspx does not happen. It’s a known bug which renders the use of custom master pages useless in SharePoint.

  12. Reply Adrian Peraza May 28,2014 4:00 pm

    Hi Randy,

    Could you give me some help, with the following issue, please?

    I’m applying a custom master page to subsite. After applied it, all forms used by libraries, lists give errors. (DispForm.aspx, EditForm.aspx, NewForm.aspx). I’d would to like use the default sharepoint master page for this forms (for example V4.master)

    I’ll appreciate any comment.

    Regards,
    Adrian

  13. Reply Mahesh Jun 6,2015 4:29 am

    Thanks a lot. This was what I was looking for. Helped me a lot.

  14. Reply webwmn Jun 16,2017 10:31 am

    How does this work in a V4 master that is mostly customized by an attached CSS file?

    I used a V4 master to create a system master customized by css. The modal window is now very wide. When I used “s4-notdlg” in the body container, the site went to full width and the scroll bar didn’t work. I tried using your modal script here but it didn’t work.

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

  15. Reply webwmn Jun 17,2017 9:50 am

    I used a width of 60% and it worked and also used .ms-dialog #s4-v4body also allowed me to remove the background image and go with white. Resolved.

    thanks

Leave a Reply