Reputation: 1259

Sharepoint MasterPages/Templates customization

I am pretty new to Sharepoint.

I need to customize some Sharepoint Masterpages (the background color, the font type and a few other css requeriments).

Considering I have available the following files: v4.master, default.master and two more pages which are content pages of default.master, plus the COREv4.css file.

I know I should create a copy of one of those master pages (I am not sure which tho) and customize it changing the CSS linked to it). The following questions come in regards of this:

1) The custom CSS file should be a modified copy of the COREv4.CSS or just another CSS file with the desired styles?

2) How do I create/link the customized CSS file for the modified page via Site Settings?. How/Where should I save the new file?.

3) As for the copy of v4.master, How do I load it to "replace" the original one for the site?.

4) The system is built upon Sharepoint 2010. That ensures that the page to have the modified CSS would be a v4.master copy only?.

Thank you for the insight as always.

**Update**

Hi,

I managed to solve the problem getting a general idea with the pdf manual provided, your suggestions and some extra steps I will describe briefly:

1) To place my custom css file I put it in the folder: C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\3082\STYLES

2) I opened the site to be customized with Sharepoint Designer 2010.

3) I clicked on the option Main Pages/Master Pages, and selected the page to be v4.master page, copied and pasted it. Then I renamed it right clicking on it, selecting "Rename" and typed the new name, after doing that I right clicked one more and selected "Set page as main default page".

4) To edit the contents of the page I right clicked once more and selected the option "Edit content in advanced mode", right before the head tag ended I copied and pasted:

<SharePoint:CssRegistration name="customname.css" runat="server" After="core4.css"/>

Note that "customname.css" is my css file. Then I clicked on the floppy disk icon on the upper left side of the screen to save.

5) After doing that I used Chrome HTML/CSS Analyzer, inspecting the original (and now copied) master page to browse on the zones that needed customization in order to identify the class names/ids/element types that managed the styles to be changed. Once identified I only added to them the properties that required change, EG:

//Webparts Alternate Highlighted Rows

div#ctl00_MSO_ContentDiv table.ms-viewlsts tbody tr.ms-alternatingstrong{ background-color:#F7FAF4 }

table.ms-listviewtable.ms-basictable tbody tr.ms-alternatingstrong.ms-itmhover{ background-color:#F7FAF4 }

I mostly did this by myself by trial and error with Chrome Analyzer but I also helped the task using the Chart found here (http://sharepointexperience.com/csschart/csschart.html), tho at some point going thru it turned a bit tricky and I decided to do it by myself as I mentioned. In the process I repeatedly added more styles to the custom file and then overwrote it on the server location to refresh the page/pages to see how it was looking, this till the end of the process.

Thanks for your help, I hope this serves as a guide for anyone that needs it. If you have questions let me know.

Upvotes: 0

Sharepoint MasterPages/Templates customization

Answers (3)

Related Questions