Using the .s4-titlerowhidetitle in your custom master page.

When creating a custom master page you want to make sure to keep the s4-titlerowhidetitle class.  If you don’t have this in your custom master page you can find the tag  directly after the #s4-bodyContainer in your v4.master. (Please don’t edit the v4.master directly!)

<div  id="s4-titlerow" class="s4-notdlg s4-titlerowhidetitle">

IMHO it’s a gem when editing your SharePoint page. When you edit your non-branded SharePoint page ever notice how the header area disappears, that is the .s4-titlerowhidetitle at work.  I definitely want to keep this functionality in my custom master page.

For my custom master page I placed the div tag around everything in my header (logo, search, top navigation, title area, breadcrumb, and status bar container).

Now when I edit my page everything in my header is neatly tucked away, and I don’t have to scroll down to see my main content.

Thanks for reading!

, , , , , , , ,

  • Pingback: Using the .s4-titlerowhidetitle in your custom master page. | Heather … | Mastering Sharepoint()

  • Jess

    Nice, thanks!

  • Paul

    I’ve only just found this – sweet tip, thanks! Helped me fix a random bug with my design 🙂

  • Lars Nielsen

    Actually it seems id=”s4-titlerow” is the thing that hides the div when the ribbon is on. The class “s4-titlerowhidetitle” appears to make no difference (in spite of its name)

  • Lynn Johnson

    I have a subsite with a custom master page based upon the top site master page. I have changed the branding in the header to reflect my new site and not much of anything else. My custom master page is published and approved and set site master and system master. When I create a webpart page in my subsite and then add webparts the title section is initially there but then disappears and doesn’t come back. Clearly I’m missing something….
    Any ideas would be most helpful.

    • hwaterman

      It works on the top site right. Perhaps it is something that was changed in the new branding of the header? I would start with comparing the code to make sure nothing was left out. Make sure your divs are properly closed, etc.