Tuesday, May 25, 2010

SharePoint 2010 Master pages, Js, CSS tips

Hi All,

I want to share some ideas and tips on masterpage changes in regard of using Master pages, css and ribbons in Sharepoint 2010:

1) In sharepoint 2007, when you develop custom pages under _layouts folder, those pages doesn't take the site master page, you have to configure them in your solution to reference a customized master page. while in Sharepoint 2010 one of the good enhancements is that the site master page is applied on your custom pages under layouts folder. Good Feature to know.

2) To set the master page in your custom pages in SharePoint 2010 use the following lines of code:


This allow your pages to get the custom master page for the site, and if the referenced master page doesn't exists, the site will default to the default master page and then the site won't break.

IMMPORTANT Tip: by default MasterUrl and CustomMasterUrl set to "_catalogs/masterpage/default.master" and to change the default to have to set BOTH properties to your new master page.

3) You can start your custom master pages with minimal.master that you can download or use from sharepoint 2010.

4) V4.Master is a new master page in sharepoint 2010 and the default sharepoint 2010 master page user interface with Ribbon support.

5) Sharepoint 2010 javascript files has been enhanced, Microsoft split the js files into smaller minified files to be used on-demand only.

6) Sharepoint 2010 css files has been enhanced, Microsoft split the css files into smaller files that will be downloaded on-demand by any page.

7) To debug js files in Sharepoint 2010, what you need to do is modifying the web.config and adding the following attribute under system.web:

8) To add declaratively/dynamically (no code behind) the master page reference in your custom page based on the site selected master page:


9) As a best practice, it is recommended not to have more than 4-7 tabs in your Ribbon.

10) Ribbon doesn't support tables, all look and feel managed through css files, and the main css for the ribbon is called corev4.css

Hope this insights help.

-- Reference:
a) MSDN:

b) Professional SharePoint 2010 Development - Wrox

Mostafa arafa

No comments: