As it turns out SharePoint has very few options for modifying the look and feel of the site. One of the major problems is the width of the left side navigation. In the Default Theme it’s set to 155 pixels wide and you don’t need a very long menu item to have it disappear into the border.
It is possible to change, but it’s not straightforward.
First, you have to find the files that need to be updated. My particular SharePoint site uses the default theme, but it’s version 4 of the default theme. So I was thrown off track for awhile editing the default theme when I really needed to be editing the v4 theme.
Second, you need to modify the style sheet for the theme. Fortunately the naming is consistent, so once you find the master page for the theme it’s easy to line up the style sheet.
I wanted to change the width on my site from 155 to 350 pixels. Here’s how I, eventually, got it done.
Editing the HTML
1. Find the v4.master file. It should be here: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\GLOBAL\v4.master. Make a copy of this file and then edit the original. SharePoint is looking for the specific file name v4.master. Edit this file in your favorite editor, but from here I’ll be reference Visual Studio 2010
2. Find this line in the html:
<SharePoint:SPRememberScroll runat=”server” id=”TreeViewRememberScrollV4″ onscroll=”javascript:_spRecordScrollPositions(this);” style=”overflow: auto;height: 400px;width: 155px; “> It should be line 537, or close to it if you’ve made other changes.
3. In that line change the “width” parameter to 350px, or whatever width you prefer.
4. Save the file
Editing the CSS
1. Find the corev4.css file. It should be here: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\Themable\corev4.css. Make a copy of this file and then edit the original. SharePoint is looking for the specific file name v4.master. Edit this file in your favorite editor, but from here I’ll be reference Visual Studio 2010
2. Find the following block in the style sheet
body #s4-leftpanel {
width:155px;
float:left;
}
3. Change the width parameter from 155px to 350px, or whatever width you prefer as long as it is the same width as what you entered in the html. If they are different you’ll get mixed results.
4. In the same file find the following block
.s4-ca{/* [ReplaceColor(themeColor:”Light1″)] */ background:#fff;
margin-left:155px;
margin-right:0px;
min-height:324px;
}
4. Change the width parameter from 155px to 350px, or whatever width you prefer as long as it is the same width as what you entered in the html and in the previous block in the style sheet. Again, if they are different you’ll get mixed results.
5. Save the file
Preview your SharePoint site
Load up your SharePoint site, you may need to clear the cache, and see how it looks. Make changes as appropriate to your needs.