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!