Customizing Sharepoint 2007: Customizing using SharePoint Designer 2007

Posted on 7/20/2006 @ 10:49 PM in #SharePoint by | Feedback | 158550 views

You can do a limited amount of customization through the browser, you can also customize the look and feel by applying a different theme to your site. What you couldn’t do using either methods, was change the layout completely – basically make a SharePoint 2007 site look absolutely not like a SharePoint 2007 site.

Now I’ve actually done this at work, but I cannot share the screenshots with you L. What I can share with you are SharePoint tips and tricks in making this happen.

Meet your new friend – The SharePoint Designer 2007.

The SharePoint designer 2007 will let you open a site, and edit it to your heart’s content. But it is important to understand that SharePoint 2007 pages based on a master pages concept. As an ASP.NET 2.0 developer you are probably very familiar with the master page concept, but here is a quick image to explain what a master page does to your site.

Basically, you create a master page where you define common UI and code, and throw in one or more ContentPlaceHolders. ASPX pages can then specify that page as the master page, and optionally choose to override the ContentPlaceHolders placed in the master page. If they choose to override, the content defined in the page will appear, else the content in the master page will appear.

Thus you can edit your site, by editing individual pages, or the master page. This is a huge improvement over 2003 since in 2003 all your custom UI changes were scattered all over the map.

You can begin editing your site through SharePoint Designer. The easiest way to open a site in SharePoint designer is File à OpenSite à Http://yoursite:someportnumber. It is important to realize that if you have a custom forms based authentication enabled, this will probably fail. That is not such a huge problem as you should be applying consistency between your sites using site templates anyway – this is a topic for a different day.

Now, how does page parsing and editing work in SharePoint.

When you open the site in SharePoint designer, you would see something like this –

The master pages are under the _catalogs/masterpage gallery. You should see a default.master there. You can choose to modify that masterpage, or you could create a new master page. It is very important to realize however that newer objects created on the SharePoint site, such as lists, document libraries, pages or even child sites  and site collections leverage the same master page library. So when you do create a brand new master page, you must right click on that, and set that as your custom master page going forward. Thus, when you create a new list, “Announcements”, SharePoint will ensure that it uses your custom master page for its various aspx pages, rather than the default.master.

Alternatively you can choose to modify the default.master.

It is nearly impossible to squeeze every bit of knowledge regarding customization in a single blogpost, maybe I’ll write a 2000-4000 word article on that in some magazine in the future.  Heck to describe everything in this topic, you could probably write a couple of chapters in a book, but maybe some other day.

But for this blog post, here are a few salient points.

a)      Don’t knock off any placeholders. Also, don’t knock off any ContentPlaceHolders that are already present in default.master. If you do so, you will find that certain features & objects rely on certain ContentPlaceHolders, and as and when you stumble upon those features & objects, SharePoint will kick and scream (basically throw an error) everytime you use a feature & objects that relies on a specific ContentPlaceHolder that you knocked off. So in short, know and learn the role of each ContentPlaceHolder, and keep them in the page. I couldn’t find a good documented list of ContentPlaceHolders to feature & objects mapping – so I just go by what was already there in default.master. So far it’s worked pretty well for me.

b)      You can right click on the design surface of the master page, and see the following menu.


Clicking on that menu item will give you a convenient view of managing all existing Content Regions inside the master page (seen below):



c)       Finally, it is important to understand how ASP.NET 2.0’s virtual page parsing works with SharePoint. When you customize either aspx’es or .master files, you are not modifying anything on the file system. All you are doing is, you are making changes in the database. At first hit, SharePoint/ASP.NET combine what is present on the file system, alongwith the delta changes you made, and present a single combined ASPX to the ASP.NET runtime. This then goes through the ASP.NET pipeline like a regular page.

 

There are two huge advantages to this, you can not only clearly view the pages that are indeed customized with a little exclamation mark right next to them -



In fact you could even do check-in and check-out of individual files, and you can even revert to a previous version.


Secondly, say in the case of the master pages, they are in a document library under Site Actions à  Site Settings/ Galleries/Master pages. And under Document Library Settings, you can specify stuff like versioning settings, custom workflows, and a whole number of things typical to any document library.

d)      A very important thing to realize is that only some of the aspx/master pages are fully integrated into this new database oriented ghosting/unghosting scheme. All images, many user controls, and many “admin level” pages are shared amongst all sites, and they simply sit on the file system – not participate in database level ghosting unghosting. (Maybe this will change in RTM? To me it looks like a huge thing left out). Atleast in the beta versions, you can easily get around this issue by going to IIS Manager under Control Panel, and creating new virtual directories for your customized versions, and copy pasting the contents from the original folders into the customized folders.

Yes this sucks, but trust me, don’t ignore this, or all sites on the physical machine will inadvertently end up getting modified – which quite sucks in my opinion. This little advance homework will keep your life sane.

 

Anyway, to sum it up, customizing SharePoint through SharePoint designer is a huge topic. One thing I didn’t touch upon here was customizing the inbuilt webcontrols that come with SharePoint. For instance, if you wanted to change the look and feel of the “Site Actions” button or menu beyond what CSS and aspx changes allow, you have the option of firing up visual studio and subclassing or creating entirely new controls.

 

I’ll probably cover all that and more in some article I will write somewhere in the near future.

 

Sound off but keep it civil:

Older comments..


On 7/26/2006 5:17:33 AM Peter said ..
Hi Sahil,

I have developed a lot with MCMS 2002 on .NET 1.1, so I am used to writing a lot of C# code in de code-behind file of an aspx of ascx (for event handling, initializing controls etc.). Do you know how you can write custom code for your master pages, layout files etc? In Sharepoint Designer I haven't found a way to write "code-beside".


On 7/26/2006 6:58:31 AM Sahil Malik said ..
Peter,

The code-behind model won't work in Sharepoint. I beleive that has been disabled due to security issues.

You can however still use inheritance and deploy pre-compiled dlls.

Sahil Malik


On 8/14/2006 6:00:05 AM Shane Perran said ..
Hi Sahil,

I am very impressed with your blog and have been reading most the articles.

I have a question however on a statement about "Custom Master Pages".

In your post you write

"You can choose to modify that masterpage, or you could create a new master page. It is very important to realize however that newer objects created on the SharePoint site, such as lists, document libraries, pages or even child sites and site collections leverage the same master page library. So when you do create a brand new master page, you must right click on that, and set that as your custom master page going forward. Thus, when you create a new list, “Announcements”, SharePoint will ensure that it uses your custom master page for its various aspx pages, rather than the default.master."

I have tested this a few times with no luck - I have created a really basic masterpage and set it as the custom but new lists do not take this master page.

The only way I have been able to get a page to adopt a custom master page is by selecting "new from master" via right-click when creating a new page.

Just curious as to if you have actually seen the above working - or if you would like to elaborate on it a little as I'm quite curious.


On 8/14/2006 6:08:15 AM Sahil Malik said ..
Shane - try placing your custom master page in the _catalogs dir, right by default.master. It's a bit twiddly to get working, but yes we did manage to get it to work.


On 8/14/2006 7:49:36 AM Shane Perran said ..
Odd, that's where mine was (in the _catalogs folder).

The steps I took:

1) File, New, Master Page


2) Add a single div just to show something is there.


3) Right Click on new master page and select "Custom Master Page"


4) Check in/Publish Major Version and Approve


5) Create new content (List) within the site

It continued to use the default master page.

Shane :)


On 8/14/2006 8:28:07 AM Sahil Malik said ..
Shane - I've gotten this to work on Beta2. Let me look into this in my spare(?) time.


On 8/14/2006 11:42:37 AM Shane Perran said ..
Thanks Sahil,

PS: There are several "Site Settings" Options which allow you to inherit from other master pages - perhaps you turned one of these on.

Regards,

Shane


On 8/14/2006 12:05:03 PM Sahil Malik said ..
Shane - maybe you are right. I don't remember turning that on though, but it could just be my hazy memory. :)


On 9/11/2006 12:37:21 AM Jim Raley said ..
Sahil,


I tried the same thing Shane tried, though I didn't know about the "publish" aspect. I simply tried "hello world" right above the "view all content" control in a copy of the default.master page. I assigned my master to a test.aspx page and it failed to render.


On 9/12/2006 2:06:29 AM Joost Schermers said ..
Hi

has anybody got this masterpage to work?

i have copied the masterpage from the _catalogus folder and added an image and rightclicked it as the custom default page.


Now when i create a new document library or a new list in this site the old master page will show. Am i missing something?

kind regards, Joost Schermers


On 10/4/2006 1:03:21 PM corinnel said ..
thanks, it got me started. C.


On 11/9/2006 4:02:52 PM Robert said ..
One thing, you do need to assign the masterpage to the aspx. Open the aspx in SharePoint Designer, then go to the following Menus: Format > Master Page > Attach Master Page...

You'll be able to choose which Masterpage the aspx uses.


On 1/30/2007 6:33:57 PM Kiran said ..
Sohil - I have a bunch of javascript files being used on the page layout.I want to make these files served from the server side. In other words I want to put all the javascript code on the server side and use it may be using Register.ClientStartupScript or something.


You mentioned above that code behind is not supported.Can you please eloborate on the use of inheritance and deploy pre-compiled dlls.


On 4/12/2007 1:38:17 PM Oliver said ..
Do you know how Share Point Designer 2007 can be used when MOSS/WSS has been setup using Forms authntication using the SqlMembershipProvider?

Thanks. Love your article. :-)

Oliver


On 5/18/2007 4:20:05 PM Tim said ..
How do you put a .png banner across the very top of a SharePoint site with MS Designer 2007?


On 7/18/2007 9:31:57 PM Sowmya said ..
Hi,


- I would like to know how do we add the Custom aspx to the Team Site.Which feature to be


enabled to add the ASPX pages.


On 12/5/2007 1:20:49 PM John said ..
My objective is to produce an online, collaborative application running atop of SharePoint where users are unaware of "what's under the hood". Do you recommend SharePoint Designer 2007 as the best SharePoint website authoring tool for this task?

On 1/30/2008 8:46:50 AM Kieran said ..
A good article for all the contentplaceholders http://office.microsoft.com/en-us/sharepointdesigner/HA101651201033.aspx


On 2/4/2008 11:27:30 AM Dan said ..
I have trouble trying to connect 'Current User filter' to 'My Inbox' webparts. I want to be able to pass the username from 'Current User Filter' to 'My Inox' so that email can be displayed on the same page. Is this possible?

The properties under 'Connections' are dimmed, and I can't do it, at present.

Regards,

Dan


On 5/24/2008 3:10:33 AM anmol Mishra said ..
Nice Article


On 5/24/2008 3:36:14 PM Sharepoint customization said ..
This is a Sharepoint page where you can see a customization to the Task list.

Here you can see a column showing the status in a different way.

It is showing different color lights, as indicators or semaphores, depending on status field content.

http://www.sharepointmall.com/Demos/Projects/CustomPages/default.aspx


On 7/1/2008 8:27:19 AM John D'susa said ..
how to put gridview in Designer 2007 and how can i connect it using SQL Server.


if u help me in this regards then pls provide some snippet for this .


On 8/14/2008 5:04:09 AM emily said ..
I have had a website designed and set up for me by somebody and they have used iweb, just wondering if anybody knows if id be able to take over the editing and updating of the website using sharepoint designer by importing the already published website or if id have to continue using the iweb software


On 8/19/2008 6:38:20 AM Abin Jaik Antony said ..
Hello Friend,


I am newbie to the MOSS 2007.My doubt is very simple. I need to autopopulate a value in a Dropdown according to some selected value in other dropdown,scenario like Countries and States.Selecting a Country in one dropdown, it will populate one default state in second. I am using a List(Custom List in Sharepoint). Is it possible to Edit Code or make any custom logic for DROPDOWNS in a sharepoint site. is there any idea rather than making a custom code/Webpart. Is it possible make it up without any custom code and can it be accomplish with some configuration Options. Please Help me :( ..... Thanks in advance


On 8/22/2008 1:03:45 AM Abin Jaik Antony said ..
Hello Friend,


My problem is regarding editing the Newform.aspx of my list. What i need is to autopopulate/autoselect a dropdownlist according to a selected value in another dropdown. I will explain in detail. I do have a list that contains TaskId and TaskDescription.


Say Like T100 taskid corresponds to a task description "Collect Details from a customer", T200 taskid corresponds to a taskdescription "get Feedback from Customer B".. Likewise. And i do have another list which have 2 dropdowns Taskid and TaskDescription. What i need is to Autoselect a taskDescription item in TaskDesription Dropdown according to the selected TaskId. Only This change i need to have in Newform.aspx of my sharepoint List.How can i .... Plz help me up...


On 9/2/2008 2:07:19 AM moss1 said ..
Great article ... keep it up


On 11/13/2008 12:42:21 PM Tom said ..
You may want to check out my blog post "Preview of default content placeholders" where I took a screenshot of each placeholder and what it ultimately looks like on your web pages... http://sharepoint.microsoft.com/blogs/GetThePoint/Lists/Posts/Post.aspx?ID=115


On 11/26/2008 4:34:23 AM H@r! said ..
superb article!!!!


On 2/2/2009 1:12:13 PM Rob said ..
I am able to edit top-level websites using sharepoint designer but when I try to edit the low-level sites I get "This site has been configured to disallow editing with sharepoint designer" DisableWebDesignFeatures=wdfopensite was removed from from the onet.xml in STS and sps


On 2/5/2009 1:07:26 PM Finute Ndongo said ..
How does one add a footer on a publishing site?

Can't seem to find it anywhere?

Appreciate the help


On 3/19/2009 2:57:43 PM RSM said ..
Your articles are great! Very helpful and informative. Wondering if you can help answer a question: Need to know how to disable connection pooling for Sharepoint implementations when using Windows Integrated security. In ASP.NET, we can modify the connection string and enter "Pooling=False". How can we do it with Sharepoint Services?


On 10/10/2010 5:15:31 AM john said ..
I'm creating separate upload file control in sharepoint 2007 site., i got this error. please if any one can help me on this. I'm a newby in sharepoint and asp.net. thanks.


here's my code


<script runat="server">


protected void Button1_Click(object sender, System.EventArgs e) {


if (FileUpload1.HasFile)


{


try


{

FileUpload1.SaveAs (Server.MapPath("http://olaca1004/docs/prod/picture library/") + FileUpload1.FileName);


Label1.Text = "Uploaded File: " + FileUpload1.PostedFile.FileName +


"<br /> File Size: " + FileUpload1.PostedFile.ContentLength;


}


catch (Exception ex)


{


Label1.Text = "An Error occured: "+ ex.Message.ToString();


}


}

else


{


Label1.Text = "First choose an file then click button";


}

}


</script>

<asp:Label ID="Label1" runat="server" Font-Size="X-Large" ForeColor="Crimson"></asp:Label>


<hr />


<asp:FileUpload ID="FileUpload1" runat="server"/>


<br />


<br />


<asp:Button ID="Button1" runat="server" Text="Upload the selected file" OnClick="Button1_Click"/>

</td>


</tr>


<tr>


<td style="width: 489px"> </td>


<td> </td>


On 12/30/2010 12:46:34 AM Rajkumar said ..
Hi Everyone,


i saw many doubts above regarding the master page. I faced the same problem and explored few things that i felt i can share with every1.


To change a master page or to create a new master page and add it to your sharepoint sites


1. Add the master page to your master page gallery. Site settigns-> master page (under galleries menu)


2. In the master page there would be a CSS attached. Search for <link in the .master file and you can find a href attribute in the link tag. The href attribute would link have a link to $SPUrl:~SiteCollection/Style Library/yourcss.css. When you deploy a master page as a feature sharepoint stores the css files in Style library(a hidden document library in sharepoint site)


3.Go to http://sharepoint site/Style Library/forms/allitems.aspx. If you get file not found error. Go to site collection features and activate office publishing Infrastructure feature. Activating this creates style library.


4.Upload the CSS file corresponding to your custom master page in this style library.


5.If the Style sheet contains images put those images in image folder in style library. and link it in style sheet by /images/yourimage.gif


6.Now Go to master page gallery.The master page you have added will be on draft status. click on the drop down edit menu in your master page and choose Publish.Once you publish the master page will be on pending status.


7.Now again from the drop down menu of your master page choose Approve/Reject and it will redirect you to approve page.Click on Approve and select OK


8.Now in site settings. In look and feel column choose master page.Now you can see your master page listed on the drop down list that contains master page.Now select the master page and choose the same for custom master page and click on the check box if you want to inherit this master page to all your sites.

I hope this helps .Correct me if i am wrong.