Contents tagged with CSS

  • Goodbye Ribbon–Going Full Screen Metro Style with SharePoint

    Having some fun with a previous post I did about generating a Metro-style menu from a Custom List in SharePoint for the purpose of building something like an Application Directory. It’s a great navigation system and by adding something like Live Tiles (that pulls information from each site) via JavaScript it can be an informative dashboard rather than a pretty menu. You can read the previous write-up I did on this here.

    Here’s what my Application Directory looks like:


    Nice, but all that SharePoint chrome isn’t needed for the purpose of navigating the directory.

    The answer is simple. Just a few CSS styles you override to hide everything.

    Here’s the CSS markup you need:

    1 <style> 2 / hide the ribbon row / 3 #s4-ribbonrow 4 { 5 display: none; 6 } 7 / hide the title row (menus, social tags, search) / 8 #s4-titlerow 9 { 10 display: none; 11 } 12 / without overriding this your content 13 will get pushed down / 14 body #s4-leftpanel 15 { 16 width: 0; 17 } 18 / without this your content will be 19 pushed to the left / 20 .s4-ca 21 { 22 margin-left: 0; 23 } 24 </style>

    And here’s the result:


    Nice and clean.

    If your admins need to get to the underlying system pages just navigate to “/_layouts/viewlsts.aspx” and they can navigate around normally from there. You could also create a link on the main page for that, even wrap it in a security token so only admins can see it!

    I have a blog post in the works on turning those pretty Metro icons into Live Tiles with data from the subsites, but that’s for another day.

    Until then, enjoy!