Matt Lonpre (Alumni)
In a recent project, we were working with a customer who was using a fixed width centered design in their corporate intranet (using the Publishing feature’s “/Pages” library and the Site Master Page), but the System Pages of the site were still full width. Since wiki libraries use the System Master Page, they were full width and did not fit with the rest of the pages in the centered design site.
We preferred to leave the System Master Page as full width, and so we came up with another method to apply a fixed width to the wiki pages in the intranet site.
The Solution
We added a bit of jQuery to our global scripts file in our custom System Master Page. The script checks if the current page URL contains the path to the wiki libraries on the site, and if so, appends the fixed width stylesheet. We gave the customer instructions on how to update the script file to add more wiki libraries if necessary down the road.
[code lang=”js”]
$(document).ready(function() {
// Check the page URL and if it matches any of these, add the Intranet centered stylesheet
if ((window.location.href.indexOf("/SitePages") > -1) || (window.location
.href.indexOf("/PoliciesAndGuidelines") > -1) || (window.location
.href.indexOf("/ZooBranding") > -1)) {
$("head").append($(
"<link rel=’stylesheet’ href=’/_catalogs/masterpage/CustomBranding/Styles-Intranet.css’ type=’text/css’ media=’screen’ />"
));
// Bring back the quick launch
$("#sideNavBox").css("display", "block");
$("#contentBox").css("float", "right");
// Stop wiki from spilling over right side
$("#layoutsTable").css("width", "auto");
$("#ctl00_PlaceHolderMain_WikiField").css("width", "716px");
$(".ms-webpart-zone.ms-fullWidth").css("width", "716px");
// Stop the full width layout from flashing
setTimeout(function() {
$("#s4-workspace").show();
}, 500);
} else {
$("#s4-workspace").show();
}
});
[/code]
Now we have a centered design in the intranet site as well as it’s wiki libraries, while leaving the System Master Pages untouched.