So, another Tech Ed’s come and gone. I spoke. I spent time with my friends. I came back. Some thoughts:
I think it’s time to call it a day, as far as conventions like Tech Ed are concerned. This will probably be my last Tech Ed.
To everyone who attended our sessions, I will have all the demos and presentations up for download in a couple of days. They will be on my web site (http://rajware.net) and Dr. Nitin’s (http://maxoffice.biz). Thank you for attending.
I thought I was so smart. Like the many people who think they have seen all sides of Ms. Basu. Just like Ms. Basu surprises the heck out of them from time to time (Bing an image search for “Shob charitro kalponik”), I got a major surprise.
I had the new master page all ready, and then discovered one thing; one pesky thing that doesn’t work. When you edit the properties of a web part, the propery editor does not come up.
The default styles in SharePoint are very table-oriented. I was avoiding tables as much as I could. Looks like this is another case (I’ll point them all out when I complete the master) where I have to use a table.
I am beginning to get a healthy appreciation of what Ms. Basu’s dress designers, jewellery designers, make up artists, shoemakers, etc. go through. (Not her hairstylist though. I don’t like her hairstylist.) Even when…especially when…the underlying technology (so to speak) is SO beautiful, dressing it up is a very involved process. Sometimes, very ugly hacks have to be used, although the results may look stunning. So it is, with the beauty that is SharePoint technology wrapped in layers of HTML and CSS and ASP.NET.
God, how do you web designers stay sane? HTML, CSS, tables, positioning, AARGH! To anyone who ever attends any of my SharePoint trainings, if I ever say “Changing the look and feel of a SharePoint site is easy”, please say “No it is not! You said so yourself.” It’s not very difficult. It’s tedious.
Here is a modified version of the outtabox CSS template, from http://www.freecsstemplates.org. I edited it to be broader in the content area. Armed with this, and the base master page I asked everyone to download from here, we will begin to create a new master page for SharePoint.
The basic design looks like this:
Note the big heading on top. We will put the Site title there. The smaller heading below that we will use for the page title.
We will place the site logo in the box down the side.
All navigation is on the right. We will keep this design. The SharePoint Top Link Bar and Quick Launch Bar will become sections on the sidebar.
Almost there now. One more post. Be warned: that one is going to be quite taxing.
I wonder if the SharePoint team at Microsoft will ever know just how great a compliment I have paid them.
Right. So to continue from last time, when changing the look and feel of a SharePoint site, there are certain elements that must be maintained, such that a new-look SharePoint does not lose its essential SharePoint-ness. The diagram in the last post enumerated these elements in a typical Windows SharePoint Services site.
First, the colors.
Next, the elements themselves:
There are other elements as well, notably the ones that add the SharePoint core CSS file and the current theme. But among visible elements, these nine, and one more: the Site Actions menu, should be considered a part of the basic SharePoint-ness. When we customize the look, we need to handle all of these elements appropriately.
You will notice that seven of the nine items listed are placed on the master page. Thus, the easiest way for us to completely change the look is to change the master page itself.
This is precisely what we will do, starting from the next post. To help us, we will need some resources. First, go to http://www.heathersolomon.com/blog/articles/BaseMasterPages.aspx and download the Base Master Page for Collaboration and WSS Sites. God bless Heather Solomon for creating a baseline master page. The one from Microsoft is pathetic in comparison. Read the page to get a lot of good information about master pages in SharePoint. While you are there, do read the rest of the site as well. This site should be required reading for anyone that works with SharePoint.
Next, since I don’t know John…I mean, jack about web design, we should get hold of a ready-made design template. I went to http://www.freecsstemplates.org (great stuff there), and chose a design called outtabox (http://www.freecsstemplates.org/preview/outtabox), because it is very different from regular SharePoint. You might want to download it and take a look. We will have to modify it a bit, because it is too narrow for regular SharePoint use. As we shall see, for most of SharePoint, the main content area should be at least a 1000 pixels wide.
Armed with these two things, we will proceed, in the next post, to make our SharePoint site look very different, while still retaining the basic Bipasha-ness.
Bipasha Basu (http://www.bipashabasunet.com/ ALERT: I got a HTML/Framer trojan notification when I went to her web site on 14th July, 2009. Please be careful.), in my opinion, is best thing to happen to admiring eyes that stare at Hindi cinema and associated visual media. There are a million things I like about her, but one of the most amazing is the versatility of her looks. I mean, she can carry off just about any look. With makeup. Without makeup. With a lot of dressy clothes. Without…okay, um, let me rephrase that, in less dressy (or just less) clothes. In “western” clothes. In “ethnic Indian” clothes. Doing the smart corporate look, or the rustic village belle (oh, yeah) look, or the beach bimbette. It all looks natural on her.
And the most amazing thing is this: throughout all the changes, there is an essential Bipasha-ness that shines through. There are other very beautiful actors that do a variety of roles. But none of them (again, in my opinion) can look perfectly natural in a role while retaining her own, um, identity/look/signature (you know what I mean, even if I don’t have the words to express it).
SharePoint (in my highly trained professional opinion) is like Ms. Basu.
Prakul Sairaha, you asked “I want to style my SharePoint site such that the users cannot even guess that it is SharePoint”. This one is for you.
Many others have asked me the same question. Prakul, let me start by telling you what I tell them. You don’t really want to do that. If you take away the essential SharePoint-ness of a SharePoint site, what’s the point? I mean, user settable-themes, security-trimmed navigation, personalizable web parts, UI elements that can be customized at any time uniformly by applications, these are all reasons why people use SharePoint in the first place. Right? Right? I mean, imagine a movie which stars Ms. Basu, in the role of Darth Vader, ever-present mask, voice box and all.
Let me try to rephrase your requirement. “I want a SharePoint site which does not look like the gazillion other boring SharePoint sites, but does everything that a regular SharePoint site does.” If this is indeed what you want, please read the rest of the post. If it isn’t, comment me, and we will talk further.
Let’s take a look at a typical SharePoint site. In this post, I will stick to the templates available with Windows SharePoint Services, and cover MOSS templates in a later version.
A typical SharePoint site has three points of user contact: the administration pages (the ones found in _layouts), the list maintenance pages (NewForm.aspx, EditForm.aspx etc., and the views) and the “other” pages which do not fall in the previous two categories, notably the home page. The three are styled differently, but have common elements.
To start with, all these pages use a uniform set of fonts and colors, and in some cases, background images. Some or all of these change when a theme is changed. This is achieved through CSS classes, which are defined in a file called Core.css, and re-defined by one or more CSS files that form a theme. A list of these classes, with the explanation of what is used where, can be found here, but just reading that will not give the complete picture. I recommend reading Core.css itself (it can be found at %CommonProgramFiles%\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS\1033\STYLES on your SharePoint server, assuming you are using US English), and studying the CSS styling of a page using the developer features of your browser.
Moving on, the overall look and feel of these pages are defined using ASP.NET master pages. In theory, at least, there are three master pages that are considered while viewing a single SharePoint site. The administration (layouts) pages use their own ASP.NET master page, most often Application.master, which can be found in the LAYOUTS directory in the “12” hive, and which is uniform across sites. The list maintenance pages and views are supposed to use a per-site master page, called the “system master”. The other pages are supposed to use a different per-site master page, called the “custom master”.
In practice, this does not always happen. For instance, the home page, as well as the list maintenance pages, for the templates included with Windows SharePoint Services uses the “system master”.
Finally, a page itself defines some of its own look. And of course, web parts may be added, moved around, or removed at any time.
Post-finally, within a page or a master page, controls define the look and feel. For instance, the top menu bar, the Site Actions menu, and the welcome section are all controls.
Ok, FINALLY finally, some UI elements are injected by Javascript, which can be found in a file called core.js.
To completely change the look and feel of a site, we have to take all these factors into consideration.
The most common look and feel change requirement can be spelt out thus: “change the look and feel of the home page and other content pages”. So, let us do this, using a brand-new site created using the “Blank Site” template. Here is a screenshot:
I have annotated some pertinent parts of the page, that can be considered part of the page’s inherent Bipasha-ness…sorry, SharePoint-ness. When we change the the look completely, these things should be retained in some form or another.
From the next post onwards, we will start creating a completely new look for this SharePoint site, starting with the home page shown above. In the meantime, here’s a small challenge for the two and a half people who read this blog. Can you name the elements on the page that I have marked with numbers? Bonus points if you can guess what the colors of the circles behind the numbers mean.