How to change Sharepoint look and feel like a professional website ?

Question

I am working on the MOSS 2007 site and looking to do some customisation like professional site. Professional means, at the first glance nobody can say it is a typical sharepoint site.

example :https://www.twynhamschool.com/

I know to add the header icons and images in the master page with much afforts but still not sure how to approach to change the site face entirely like professional site using CSS and master pages/site layouts.

BTW I am using sharepoint designer and very much confused with the programmatic approach to install the master pages as features/solutions. Any good tips and tricks are most welcome on this issue.

If some one knows the list of good sites and articles which explain the step by step instructions with examples, please let me know.

Thanks

Answer 1

You are on the right track as far as customizing SharePoint's look and feel is concerned. Master pages are the right way to go. Through them, you can completely redefine the appearance of a site.

A master page defines "zones" (placeholders) in the page, where page layouts will then add/overwrite content. You must be careful to keep the placeholders of the default master page, because SharePoint expects them to be there for its own pages. It is possible to place them in hidden DIVs, but you risk breaking the capability for site authors to edit the content. When the site is seen by visitors, you are free to hide them all.

To have a "professional" look, you need a professional designer. Then you take this professional design and divide it into zones. There are places that are constant, so their content can be in the master page; there are places where the content varies depending on the context and this is where placeholders are useful. Inside MOSS is a good book and has a chapter on branding a site.

You are free to use SharePoint designer for this purpose. Features/solutions are not a programmatic approach, they are a way of packaging changes to a SharePoint site for easy deployment. When you work with SharePoint designer, you are modifying a single site at a time. When you are happy with your modifications, which normally happened in a test environment, you need a way to copy them to a staging environment where users can test them. Then to a production environment. If you take the time to create features, then solutions, the deployment problem disappears. This is even "truer" in a multi-server environment where several Web front ends serve content.

Answer 2

To build a page or site structure of your liking, start with a minimal master page: http://msdn.microsoft.com/en-us/library/aa660698.aspx (copy & paste the master page from this article). Then use a custom theme to modify the presentation (for that, see MSDN article "How to: Customize Themes").

Answer 3

You can edit MasterPage fairly easily. Just start Sharepoint Designer and find _catalogs folder, there are MasterPages stored (usually). Then just simple Open (checkout), edit source code, Save, Publish.

Expect a lot of troubles when modifying visual look by using CSS, because SharePoint generates not intuitive class names (which are context sensitive, so different classnames in browse/edit mode) and maybe you will need to use some jQuery for making page design the way you wanted.

Answer 4

You can start by using a base masterpage as qp answered found here http://www.heathersolomon.com/blog/articles/BaseMasterPages.aspx

You can also go through the site it will give you a better idea of how to go about branding your sharepoint site. Also using firebug in Firefox is a greate help to target areas to see how they look before making changes to your css file.