English:
Hi,
I came across your blog and the tutorial seems quite impressive. I am also in the process of rebranding sharepoing and really am lost on how to do it. I have referenced to numerous resources but none provides a step-by-step procedure to achieve this. Including ways to add images modify certain areas etc. Is it possible for you to provide me detailed instructions as to how you went about rebranding sharepoint.
I will appreciate ur help.
I received this email, a while ago after posting a tips about “Branding the publishing page”; and I promised to elaborate the step-by-step in my blog. And this post is for you who wants to start branding MOSS / WSS site.
I’ll start with the same design, and lead you to create master page for this design.
So, what is master page?
Master page is a contract for all pages in your site. Since its only contract – then you cannot see the master page in a web browser without a help of an aspx page which ‘inherits’ from it. This also limits control’s type to put in master page. For example, we can insert web part but not web part zone and so on.
Master page consist of static HTML tag and Asp:ContentPlaceHolder as a contract. You can design anything for static page HTML tag – but not for the contract. The Asp:ContentPlaceHolder must be kept exactly in same identity and hierarchy. If you change the identity, make it less or more from its original, then you’ll break the relation with other pages in web site.
Steps to design master page
1. Decide common and dynamic part
In this step you have to decide which part will be common to any pages in web site and which part to be dynamic and contect specific. Look at the example, I black coloured the content specific part. We will let the pages to define what should be displayed in that part by specifying Asp:ContentPlaceHolder “PlaceHolderPageDescription” and “PlaceHolderMain”.
2. Create static page (xHTML)
Next you can start to create page slice (table or div) whatever implementation you prefer to. You also need to define CSS, and may be javascript for DHTML effects. Define a room for content specific part in your design using table cell or div.
Remember, that there isn’t right or wrong to create such static page. You can use your own idea, but in this example I choose table slice. I believe that creating following table-tr-td is simple for all of you ,
I’ll let you be creative with the CSS and javascript, but the idea is just simply create wire-frame for your page. After you satisfy with static page xHTML design then you can continue to insert it into new master page.
Open original master page (default.master) and save it using a new name – creating a new copy to work with. Copy and paste, HTML from static page into the new master page just after SPWebPartManager tag control.
Now, you have static xHTML design on top of original master page. All you need to do now is to put existing standard control into the new wire-frame, ie DesignModeConsole and PublishingConsole.
3. Add contract
You also need to enclose any part in master page, which is customizable using other Asp:ContentPlaceHolder. But always keep in mind NEVER ADD or REMOVE “un-used” Asp:ContentPlaceHolder from master page or CHANGE their HIERARCHY.
Next since we want the “Content” to be page specific, then we need to put Asp:ContentPlaceHolder “PlaceHolderPageDescription” and “PlaceHolderMain” inside “Content” cell (click on the picture to enlarge).
If you don’t want any other part to be customizable, then you can let the other static HTML un-touched. Otherwise, you must insert Asp:ContentPlaceHolder so the pages can customize it.
The rest Asp:ContentPlaceholder can be made invisible by enclosing them in invisible Asp:Panel, just like this,
There also “special” asp:ContentPlaceHolder that you shouldn’t hide, such as:
-
PlaceHolderPageTitle => the pages will define its title by overriding this part
-
PlaceHolderAdditionalPageHead => some additional css/javascript will be defined here
-
WSSDesignConsole => we need this to enable page-edit mode
-
SPNavigation => this define how page-edit mode will be displayed
-
PlaceHolderLeftActions => to hold special script action ie. picture library thumbnail – filestrip function will need this.
-
PlaceHolderFormDigest => we need to keep form digest information
At last you can remove original table-tr-td construction and now, you’ve your own master.page. Save it and set as default master page to see a new branding.
Last but not least
You can always have web part inserted into master.page, but not web part zone. The reason is obvious, since master page is a contract, then any controls must be statically defined and dynamic controls such as web part zone can’t be statically defined.
Now, are you ready to brand your WSS/MOSS?
Riwut Libinuko, experienced Architect. Currently working with Credit Agricole CIB, responsible for SharePoint platform in Asia Pasific. . Certification: SharePoint 2013, SharePoint 2010, SharePoint 2007, ITiL v3
Ideas for free 