Join Gini von Courter for an in-depth discussion in this video Understanding branding in SharePoint, part of SharePoint Designer 2013: Branding SharePoint Sites.
- View Offline
- There are different ways that we can apply branding in SharePoint, starting from the very simple browser-based branding that we can do to using ASP.NET or tools like Dreamweaver. So, let's talk about how branding works in SharePoint. First, we have what are called composed looks. Composed looks have their root in the same themes that you find in the other office products, like Microsoft Word or Microsoft Excel or PowerPoint, where you have colors, different fonts put together as an entire set, but in SharePoint, composed looks are themes one better.
Let's take a look at how we'll intersect with composed looks, because this is all work that we can do in a browswer. I'm looking at the site settings for a SharePoint site that we're going to create and work with, and notice that there's this feature called change the look. Each one of these is a composed look. The composed look includes a set of colors, as you can tell, some fonts, a background image. For example, there's a large flower here and a weird octopus-looking thing over here, and each of these sets also has a master page behind it that determines where the different elements on the page will be.
More about that in a moment. But if I were to choose a different composed look, then I'd have the option to change some of the specifics. The colors, for example, the sets of fonts that are used, or the image that's being used here. So, this is browser-based branding and is relatively easy to do. We can use our own images, and you'll see how we're going to do that. A moment ago, I mentioned master pages. Master pages are like a shell, or another word for them sometimes is chrome.
It's how we lay content onto a page. So, we create a master page that determines how elements will look on pages created that rely on that master. There are actually two different master pages that are included with every version of SharePoint, and they're described as site layouts, but these are really master pages. One of them is called Seattle, and in Seattle we get, on the left-hand side, a traditional quick launch with first menu item, second, and so on, and at the top we get top navigation.
If, on the other hand, we choose the Oslo site layout, which relies on the Oslo master page, we have navigation at the top but no quick launch. And it really doesn't matter which look we try when we do this, because the master page is being used by the composed look, but it is separate from the composed look. So, if we return to the default page, the layout is Seattle, and that master page, seattle.master, has a quick launch at the left, but I can keep this same set of colors, these same fonts.
And switch to Oslo, and you'll notice the quick launch on the left. The area that has a navigation menu on it goes away, and at the top, we have a top navigation. So, what master pages do, is they determine where different elements will be placed on all of the pages that we create in our site. Rather than having to go change every single page when we want to institute a change, by tweaking the master page, we allow for very very quick design changes, because the change that we make to the master gets picked up on every single page that relies on that master.
So, what kind of pages rely on a master page? Well, the pages that display information inside the master page, and those are called content pages. And there are really three types of content pages, and we'll talk about them in a minute, but before I do, let me also say that all of this is made possible with the use of cascading style sheets or CSS. So, if you're not used to using CSS, you'll get used to it as you do more advanced branding in SharePoint. There are a number of CSS files that are used to store information, but most of it is in one large CSS file.
So the CSS file, cascading style sheet, determines how the page will be displayed in the browser, and we'll talk more about this later, but if you're wondering, does CSS fit in here, and is it one of these other things, CSS is actually used to style our master pages, which then are used to display information in our content pages. There are three different types of content pages in SharePoint. The first is a wiki page, and you may have heard of wiki. Wiki actually mean quick.
And wiki pages have the advantage in that they're quick to create, and in SharePoint 2013 and all of these versions, when we create a new page, by default, unless you as the designer or perhaps the farm manager has done something different to change the settings, a new page that's created will always be a wiki page. Wiki pages are fast to create, allow users to easily create and collaborate on pages. They don't provide as much enforced structure as some of the other page types, and that means that our users can just kind of go to town and collaborate with each other.
The second kind of SharePoint content page is still available. Web Part pages consist of various Web Parts, various parts displaying lists, information from libraries, images, information from other parts of the internet, roll-ups, whatever you would want to put in a Web Part, and until recently, these were really the heart and sole of SharePoint. You created SharePoint sites by creating lists and libraries, what are now called apps, and then displaying the Web Parts that SharePoint creates in Web Part pages.
You can still create those, if you wish. If all you want to do is display information on a page for your users, Web Part pages may still be the best way to do that. We will mostly work with wiki pages in this course, but I will show you how Web Part pages look as we talk about them briefly. So, less structured wiki pages, more structured Web Part pages, incredibly structured publishing pages. Now, publishing pages are not available at all in SharePoint Foundation, so if you're running SharePoint Foundation, you can just not listen to this part of it, or you can listen and wish it was something that you had, but SharePoint server, Enterprise SharePoint Server Standard and SharePoint Online all support publishing.
And so, you can only create publishing pages on a site where publishing has been enabled, but what publishing does is, it allows you, as the designer, to actually specify very clearly where different elements will go on a page, and this allows your users to be able to create content and easily have it look good, because you've stated how it's going to be published. The other thing that you get with publishing pages is you automatically get publishing approval workflow, so the imagination here is that we're creating a page, perhaps it's a customer facing page or for internal customers, an employee self-service portal, for example, and when anything is written, it's first approved by someone.
So, that's why we need an approval workflow. And then it's published in a very specific manner to specific audiences, and that's why we have a publishing page. Now, publishing pages come with page layouts, and we can create our own page layouts, just as we can create our own master pages. So, these are the types of content pages that we'll create. Most of the time, when we're using SharePoint for an intranet, we're going to be content using wiki pages and occasionally create a Web Part page, but there may be parts of your business that you want to create publishing pages for, either for an internet, rather than an intranet, or for some specific departments who really are in charge of the kind of content that we have many different people authoring, a small number of people approving, and it needs to be presented to the business in a very specific way.
This has been a quick overview of the parts and pieces that we will use to brand our SharePoint intranet and internet sites.
- Creating a new site
- Creating and editing pages
- Publishing a site
- Working with composed looks
- Modifying site navigation
- Adding images and video to your SharePoint site
- Customizing composed looks
- Creating master pages from HTML designs
- Using the Snippet Gallery