web consultant + designer
Looking for master pages & themes for your SharePoint 2010 installation? While still in its infancy, check out nothing but branding. A collaboration between Mark Miller of EUSP and GSoft Group, this site covers branding of SharePoint in their blog, while selling premium (and a free one) themes for SharePoint. It seems like a promising project, and I’m looking forward to seeing where it goes.
Greetings from China, where we’ve just launched a public-facing website built in SharePoint 2010! It is for the International School of Beijing, and was built in SharePoint so that the website and internal portal (one of my other projects) speak the same language. This will make for easier management, training, and usability for people who have already been using the school’s internal portal. It took us a while to get past a few glitches, but it’s finally out!
Visit the site now: International School of Beijing
Key elements of this site:
So, it’s a fairly straightforward site, and of course could be accomplished without using SharePoint, but I’m proud of what came out in the end. It took a core team of 3 people to push it out the door, with a few more people involved in the planning and launch. This is the first step in a bigger re-branding project that the school is going through, so expect design changes to happen throughout the year.
I’ve been in the SharePoint world for a couple of years now, and feel like I’m finally able to start seeing clearly what branding in SharePoint really entails. For those of you just getting started, prepare for a long journey. But no need to worry, branding in SharePoint isn’t too scary once you get into it.
I started out (and still do) hand-coding websites. I then progressed to CMS’s like Drupal and WordPress. I have since taken the plunge into SharePoint 2010 as well. If designing a website is like putting together a Lego castle, then designing a website in SharePoint is kind of like putting together a Lego castle where all the pieces are individually wrapped in little plastic bags, and are strangely shaped. It takes a long time to strip away all the “SharePoint-y” stuff to get down to your real design. But once you get there, it’s not so bad.
Not being a developer, SharePoint was a bit daunting at first. A lot of .aspx pages, as well as strange new programs like SharePoint Designer, InfoPath, and Visual Studio (although I don’t use this one). As you begin designing in SharePoint, you’ll want to consider your approach, and it will be slightly different than your typical approach to web design.
Don’t jump in and start opening every file in SharePoint Designer that you find…you’ll go crazy. Here is my three-step basic process to get started with branding in SharePoint. Move through each step slowly and see how it goes. Once you’re done, you’ll want to repeat the process (probably backwards) to create your own solution.
You’re a designer, so this is something you can be comfortable with as a first step. First, register your CSS file in the master page (all we will touch in the master page for now), and then create a new CSS file in “/Style Library/”. Using the web developer toolbar in Firefox, or Chrome’s built in developer tools, you should have what you need to get started customizing right away. You could do just this step, and be totally fine. However, if you keep digging the grave gets deeper.
To keep things clean, I would suggest creating your own content type(s), and from there create unique page layouts for your content. With a page layout you can add your own html wrappers to your content (titles, body text, custom fields, etc.), which gives you that much more control of layout within a page. Also, you can add header styles in these documents to call CSS files and .js scripts without editing a Master Page (not best practice…but it’s possible).
[note] Don’t forget to enable any new page layouts in “Site Settings > Page Layouts and Site Templates” so your pages can use them.
This is the trickiest feat. I would suggest starting with something like Kyle Schaeffer’s HTML5 Master Page, or the Starter Master Pages on CodePlex (I believe by Randy Drisgill and others). My method? I printed out v4.master on giant A3 sheets, along with a couple of other master pages, and sat down at a table, analyzing line by line what I needed to pay attention to, what I was confused about, and what I could edit. So grab a couple of highlighters, print out a sample master page, and get familiar with your blueprint. You’ll learn soon enough what you can and can’t get rid of. A great tip I learned from Heather Waterman at a branding session in Las Vegas one year is to give yourself a bunch of blank space at the beginning of the document, put in your (working) html, and then slowly add in little pieces of the master page as needed. This way you don’t delete stuff you need, and you keep your html intact.
There is so much more you can do with SharePoint than just CSS and master pages. It gets really fun when you start working with jQuery and interacting with SharePoint services, for example. But that’s for another time. If you want to explore some more about branding in SharePoint, here are a few resources (some articles of mine, as well as other things you might find useful):
I just created a post about rolling up list items from multiple subsites within a site collection. In that post we took all of the titles of all the items in all the “Pages” lists in all of the subsites of the site collection. In this post we’ll add to that code, and send that resultset into an empty list (already created). We’ll cover creating the new list using SPServices and jQuery in a different post.
Here’s the order of how it happens:
I’m going to let the code speak for itself. As usual, check out SPServices and Mark Anderson’s blog.
$().SPServices({
operation: "GetAllSubWebCollection",
webURL: "/",
async:false,
completefunc: function(xData, Status) {
$(xData.responseXML).find("Web").each(function(){
$().SPServices({
operation: "GetListCollection",
webURL: $(this).attr("WebFullUrl"),
async:false,
completefunc: function(xData, Status) {
$(xData.responseXML).find("List").each(function(){
//function to get all items inside every list called "Pages"
if($(this).attr("Title") == "Pages") {
$().SPServices({
operation: "GetListItems",
webURL: $(this).attr("WebFullUrl"),
async: false,
listName: $(this).attr("Title"),
CAMLViewFields: "<ViewFields><FieldRef Name='EncodedAbsUrl' /><FieldRef Name='Title' /></ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var title = $(this).attr("ows_Title");
$().SPServices({
operation: "UpdateListItems",
async:false,
batchCmd: "New",
listName: "My new list",
valuepairs: [["Title", title]],
completefunc: function(xData, Status) {
}
})
});
}
});
}
})
}
});
})
}
})Let’s say you want to display all of the titles of every page library in your site collection. Using jQuery and SPServices, it’s a breeze it’s definitely possible.
What we have here are three calls of the SPServices function. First, we call the GetAllSubWebCollection operation. This will bring us all sites (webs) within a certain site collection. Once we have that, we’ll then iterate through each web to find all lists (2nd SPServices call) using the GetListCollection function. Once we have all lists, we’ll iterate through each list to look for any lists with the title “Pages”. This will give us every page library of every site in our site collection. Then we we will call our 3rd and final SPServices function, GetListItems to bring us all of the titles of all the items (in every list, in every site of this site collection). Finally, for our last act, we’ll then link each title of each item of each list of each subsite of the site collection to it’s specific URL.
But then we have to do something with that chunk of data. The last line in our code is a simple jQuery function that appends an LI with each title inside an empty UL tag with the ID of #sitelist (somewhere in your page).
Phew!
…ok, here’s the code (I just tested it, it works!):
$().SPServices({
operation: "GetAllSubWebCollection",
webURL: "/",
async:false,
completefunc: function(xData, Status) {
$(xData.responseXML).find("Web").each(function(){
$().SPServices({
operation: "GetListCollection",
webURL: $(this).attr("WebFullUrl"),
async:false,
completefunc: function(xData, Status) {
$(xData.responseXML).find("List").each(function(){
//function to get all items inside every list called "Pages"
if($(this).attr("Title") == "Pages") {
$().SPServices({
operation: "GetListItems",
webURL: $(this).attr("WebFullUrl"),
async: false,
listName: $(this).attr("Title"),
CAMLViewFields: "<ViewFields><FieldRef Name='EncodedAbsUrl' /><FieldRef Name='Title' /></ViewFields>",
completefunc: function (xData, Status) {
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var url = $(this).attr("ows_EncodedAbsUrl") + "";
var liHtml = "<li><a href='" + url + "'>" + $(this).attr("ows_Title") + "</a></li>";
$("#sitelist").append(liHtml);
});
}
});
}
})
}
});
})
}
})
As usual, thanks to Marc Anderson and his SPServices library
me: designer, coder, front-end web developer. I specialize in WordPress and SharePoint, with a special place in my heart for jQuery and CSS.
life: wife + daughter + me.
work: I design and consult for a lot of great clients, and would love to talk about your next project!
