Css – Sharepoint 2010 Branding: Problems applying custom styles

brandingcsssharepoint

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!

Best Answer

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.

Related Solutions

R – Sharepoint Branding – Multiple File Provisioning

This module.xml file is in a folder named "Images". All the pictures are also in this folder (using the sharepoint development tools for visual studio 2008 v1.3). The wsp package need to know all the files that is adding so you have to add each file. (rename the .wsp to .cab and open it. You can then see all the files in the solution)

 <Elements Id="8f8113ef-75fa-41ef-a0a2-125d74fc29b7" xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="Images" Url="Style Library/Images/myfolder" RootWebOnly="TRUE">
    <File Path="hvi_logo.bmp" Url="hvi_logo.bmp" Type="GhostableInLibrary" />
    <File Path="hvi_logo_small.bmp" Url="hvi_logo_small.bmp" Type="GhostableInLibrary" />
    <File Path="epj-logo.png" Url="epj-logo.png" Type="GhostableInLibrary" />
  </Module>
</Elements>

You could wirte a small C# app to create the xml file for you, something like this:

 var info = new DirectoryInfo(@"c:\pathToImageFolder");
        var files = info.GetFiles();

        TextWriter writer = new StreamWriter(@"c:\pathToImageFolder\module.xml");

        writer.WriteLine("<Elements Id=...");
        foreach (FileInfo file in files)
        {
            writer.WriteLine(string.Format("<File Path='{0}' Url='{0}' Type='GhostableInLibrary' />",file.Name));
        }
        writer.WriteLine("</Elements>");
        writer.Flush();
        writer.Close();

R – Sharepoint Branding

Check out the links I posted in the answer to this question for some links to SharePoint 101 tutorials online:

Restaurant review site in SharePoint

Given you're looking for 'branding' that will mean a custom Master Page. A Master Page is what will determine the overall layout of your SharePoint Web Application's pages. After creating a standard SharePoint application, connect with SharePoint Designer and play with that Master Page for a while until you get the hang of it.

In modifying or creating custom Master Pages, it is important to take note of all the controls (special ASP.NET server-side tags) in particular Content Place Holders; if you create your own Master Page and these are missing you're in a world of uninformative-error-message hurt.

You're going to want to create Lists ( http://office.microsoft.com/en-us/sharepointtechnology/HA011199881033.aspx ) to represent 'News' and 'Products'... for Products you may even want to create a Content Type.

Once you create 'News' and 'Products' lists, to see those lists of Products you'll want to make views and use List View Web Parts ( http://office.microsoft.com/en-us/help/HA100240521033.aspx ) to include those views in Pages... but at the subject of Web Parts this is probably getting a bit overwhelming so I'll stop here. Comment me if you'd like more.

Addendum

"Is is possible to show only categories of a document library in home page and documents of the selected category in another page?"
-> Yes, and there are several ways. I'd suggest you look into either defining a View for that list which filters based on the category field, then add List View Web Parts to your home page, or writing custom XSLT for the Content Query Web Part, and then add it to your home page. Writing the XSLT for he Content Query web part is a little more difficult, but using the List View has it's short comings in being not-as-configurable, much like this guy is finding out: No-code solution for calendar view of SharePoint news items

"But how can i change a list item to show its details as a whole new page with its own web parts and theme?"
-> Here's the kicker; in SharePoint, each Site you create has a special list for Pages, and each Page actually belongs to a Content Type. So you can take any content type and turn it into a page; all you have to do is create a Page Layout for it, and add that Content Type to the list.

(So, an example. This is purely speculative; I'm not saying do this specifically, and you probably can't do it exactly as I describe it as I'm oversimplifying a little)

You create a Content Type 'Product', but you also decide 'Category' should be a Content Type too. So you create a content type for 'Catagory', and you give it a lookup column, which refers to items in the 'Product' List. You specify that the lookup can contain multiple items.

Now you want a Page where people can see a category, and all the Products which belong to it. You create a 'Page Layout' (an aspx file) for the 'Catagory' Content Type. In the Page Layout aspx file you can include web controls which render the Catagory's fields, such as 'title' and 'description' and you can probably even add one to render the 'Products' lookup field. (maybe you'll have to code it yourself)

I hope I haven't lost you.

Now that you've created a Page Layout for 'Catagory' you can add 'Catagory' to the Pages list/library and then create pages which represent Catagories, and when people edit those pages, they will also edit the Catagory.

More Addendum

If "Announcements" is a list, the web part you added was a list view web part, and so it just shows the contents of the list (which is independent of the product pages) You'll want o specify filters of your view. I dunno if you can specify unique filters on the web part... but you can try :)

You might want to consider looking into The Content Query Web Part.

I don't fully understand your second question, but I get the feeling the answer is yes... what do you mean by "view"? You gotta be careful with the lingo; do you mean the Page Layout? or the List View Web Part? or the List View? or the Master Page? ...