Using a Fixed Width Page in SharePoint 2010

For the most part, I prefer dynamic width pages on an intranet. It allows users to take advantage of the screens that they have, and to work the way that they want. They do have one big drawback though in that they don’t allow consistent control of presentation. You never know for sure where a particular screen artefact will be. This can be a  real problem, particularly when it is necessary to maintain a consistent brand. The solution to this is to use a fixed width page, which basically keeps the width of the content constant, no matter what the width of the browser.

If you previously worked with SharePoint 2007, you’ll know that this was the default behaviour of the standard Publishing master pages (like BlueBand.master). Team sites, and most other sites used a variable width template. SharePoint 2010 now uses variable width for both types of templates, and I’m not sure that’s a good thing in a web content management scenario.

I recently had to set up my first fixed length centered page in 2010, and it was harder than I thought it would be. I isolated the class controlling the width of the content (#s4-workspace), explicitly set the width, and refreshed the page. it loaded correctly,but upon load,it immediately snapped back over to the left and filled the page. Obviously, there’s some javascript trickery going on here.

Luckily, thanks to Tom Wilson, the correct solution was quickly obtained. Basically, javascript is looking for that s4-workspace id, and doing what it thinks is best with it. Since we beg to differ, the solution is to first remove that id tag altogether. Then, you need to add in the appropriate styling to compensate for the lack of javascript positioning.

.SFC{
overflow:auto;
background: transparent url(''/SiteCollectionImages/Page_BG.jpg'') no-repeat fixed left top;

}
.SFC form
{
width:958px;
margin-left:auto;
margin-right:auto
}

The background image isn’t necessary, but it can be used to fill the non content region of the browser.

Editing Page Layouts in SharePoint Designer 2010 – Edit in Advanced Mode

SharePoint designer 2010 has changed quite a bit from its predecessor – certainly on the UI side. In other ways it has remained the same (its occasional inability to tell whether or not a file is checked out is still very annoyingly persistent). One of the major changes was how it handles .aspx page editing.

Previously SPD2007 had the concept of advanced editing, and a more locked down standard editing environment. This was controlled BY aven’t been able to find an application option to change the behaviour of the “Edit file” link on the information screen. If you’re working on a web site, the advanced mode results in an awful lot of extra clicking, and an awful lot of cursing after being presented with yellow highlights.

If there’s something that I’m missing here, please feel free to fill me in!

spSecurityTrimmedControl – An Indispensible Tool for your public facing SharePoint web site (and others)

At one point or another, if you design or modify SharePoint sites, particularly public facing web sites, you’ll have a need to show some design elements to some people, and not to others. SharePoint itself does a very good job of security trimming most elements based on your security level, but there are some cases where it just isn’t designed to do what you want it to do.

Take a public facing SharePoint site for  example. Designers need to be able to work with pages, and have access to all of the tools, the ribbon, etc. You of course don’t want public users to see any of these things.

Sharepoint Page with standard editing controls

If you log in as an anonymous user, SharePoint knows that you’re not an editor, so it trims out all of the editing controls.

image

The trouble is, not all of the controls that I want to hide from the anonymous user are trimmed. In this case,the navigation breadcrumb on the left,and the login control on the right. In fact, in may cases, the entire blue bar at the top will need to be hidden from the anonymous user.

As an aside, the sign in control is interesting. This is the same control that you see in the first image that gives the logged in user access to their profile, my site, etc. It turns into a login control for anonymous users, which is great when you have both public and secure areas of your site. The trouble is, that control shows up whether or not it’s even possible to log in. As part of locking down a public facing SharePoint site, I always extend the application into an internet zone, turn on anonymous access, and disable both basic and Integrated authentication.

Turn off all authentication for a SharePoint site

In this case, clicking on the login control simply results in an error. It would be nice if SharePoint could detect that authentication wasn’t even possible, and hide the control completely. Of course I digress, but this brings us back to the main point – how do we hide the offending elements from those with low or no privileges? It turns out that it’s actually pretty simple – we use the spSecurityTrimmedControl.

This control is simply a container that will either show or hide it’s contents based on a users security level. Simply edit the master page that the site uses (or better yet, create a new one based on your current one and then tell the site to use it). Below is an example of using the control to hide a link to the current site page when the user is not an editor.

Using SecurityTrimmedControl to hide a link button

The important attribute of the control is the permissions attribute. It basically acts as a switch, so if you have at least the permission listed, you will see the control. A complete list of the allowable values can be found here on MSDN.

Exercise caution however when hiding the ribbon. Don’t hide the ribbon’s container, because it needs to be seen in order to calculate page positioning, instead, hide only the contents of the container.  You can hide ContentPlaceHolders quite successfully though, because the server can still see them.

Use of this control is by no means limited to public facing web sites, but it is particularly handy for them. In fact, when requested, I use this control to hide the “View All Site Content” and “Recycle Bin” links in team sites.