Sharepoint 2010 Branding: Problems applying custom styles

Question

Hi all – I’m a Sharepoint neophyte, and I’m trying to build/brand an Internet-facing site for someone at my job.

In order to constrain the site to a centered, fixed-width layout, I added the following code to the coreV4.css file:

#s4-bodyContainer { 
width: 960px !important; 
margin: 0px auto; 
}

…and it worked great. But - I was subsequently told that the coreV4 stylesheet should never be modified, so I reverted the file back to its original state and added the above code to a 2nd stylesheet that I’d already attached to the site. It’s linked from the head of the master page, like this:

<link rel="stylesheet" type="text/css" href="/Style%20Library/CSS/combined.css" runat="server" After="corev4.css"/>

The problem: Sharepoint refuses to “see” the #s4-bodycontainer snippet in the 2nd stylesheet. It does recognize other parts of that stylesheet – for example, the styles I created for the content editor webparts work just fine - but not the code pertaining to s4-bodycontainer.

I’d like to just return that code to coreV4.css and call it a day, but here’s my other problem: None of the subsites are pointing to that iteration of that file (which lives in the _styles folder), and I don’t know how to change that. They are instead pointing to some other copy of the file that dwells deep in the hinterlands of the Sharepoint file structure (apparently under _layouts - I don’t think I have access to it).

Any guidance will be deeply appreciated. Thanks!

Answer 1

Yes, you really do not want to update the covev4.css or in fact any SharePoint file found in the 14 hive. Your other sites are using the same corev4.css file, even though the path appears to come from the _layouts directory. That is just the SharePoint way to link to hive files.

First, you custom css may require an !important tag, i.e.

#s4-bodyContainer {  
width: 960px !important;  
margin: 0px auto;  
} 

But there is much more to a centered, fixed width site in SP than just that. You need to consider dialog boxes, site setting pages, list pages, etc. I recommend the following CodePlex project that includes amoung other examples, a centered, fixed width master page with the necissary style sheet and other assets to fix many of the issues found in centered fixed width sites in SharePoint.

http://jumpstartbranding.codeplex.com

I hope this helps.

Answer 2

Here is a good article to understand branding publishing sites (template used for internet facing sites on SharePoint) : Real World branding with SharePoint 2010.

Based on the scope of how much you want to customize the OOTB templates, the branding task may get more complicated or easier. Opening SharePoint designer and changing the site instance is the easiest to start with but in the longer run you may want to create solution packages to deploy all your customizations so that you can maintain them.

Answer 3

Here's how I approach my SharePoint 2010 branding, like the others I don't touch the out-of-the-box "coreV4.css":

1. Open up SharePoint Designer, create a file called "overwrites.css" in your "/Style Library" folder.

2. Next paste this CSS in your newly created file and save:

   /* Centered, fixed layout */ div.s4-title.s4-lp, #s4-titlerow, #s4-mainarea, #s4-topheader2, #s4-statusbarcontainer { width: 960px; margin: auto; padding: 0px; float: none; }

3. Then edit your MasterPage in your SharePoint Designer and reference the CSS file after "coreV4.css" like this:

   SharePoint:CssRegistration name="/Style Library/overwrites.css" After="corev4.css" runat="server"/>

And I think that's it!