Company News

SharePoint Centered Layout in Wiki Pages

July 26, 2015

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.


$(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();
    }
});

Now we have a centered design in the intranet site as well as it’s wiki libraries, while leaving the System Master Pages untouched.

sharepoint centered layout

Leave a Reply

Matt Longpre

Matt Longpre

Subscribe via Email

Categories

Powered by...

itgroove Corporate Profile
Connect With Us
%d bloggers like this: