HOW TO: Modify SharePoint 2010's V4.master "just enough" to create fixed-width pages…

2010 05 18 : My current assignment requires that the new SP2010 websites all have a fixed-width. Like everyone, SP2010 still has lots of unknowns for me, but thus far I was able to achieve fixed-width using the following modest changes.

As with any master page-based environment, the goal is to try to accomplish a given task by making as few small changes as possible at the “highest” possible levels of inheritance in both CSS stylesheets and master page hierarchies. That way you (typically) have the most widespread (hopefully global) impact for the least amount of effort and maintenance…

That said, my changes occured in only 2 places:
1. A custom CSS file “CoolCo Custom SharePoint Stylesheet.css” stored in the OOTB “Style Sheets” library at the root website of my site collection. This is then referenced in Home website > Site Actions > Site Settings > Master Pages > use custom style sheet & all subwebsites inherit
ADD following entries:

BODY.v4master {�
 WIDTH: 1024px;�

BODY #s4-workspace {�
 WIDTH: 1024px;
2. A small-but-critical change to 1 “container” element in the actual v4.master page:�
     Replace      <DIV id=”s4-workspace”>     to    <DIV id=”s4-workspace” class=”s4-nosetwidth”>
The key seems to be adding the class attribute to the s4-workspace “container” tag; IF SharePoint DOESN’T see this class reference, then it “injects” inline CSS as the page goes out to The Browser, and no matter what CSS you try to modify via your custom CSS file, inline CSS always is the last to get applied. Seeing the “class” attribute causes SP2010 to not inject the inline CSS, and so your custom CSS entries are the last to get applied…
All due kudos to MVP Randy Drisgill for this vital piece of intel…
With the custom CSS styles overriding at the “highest” [hierarchically-speaking] location I could discern, and the modest v4.master page mod to ensure these styles get applied LAST, you should end up with global fixed-width pages.
NEXT: how to CENTER these fixed-width pages, and color the resulting left & right sides whatever color The Client wishes. 🙂
This entry was posted in Sharepoint Tips. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s