Branding User Guide

After you have a firm grasp on basic power user functionality using the Power User guide in this website, you should move on to this guide; the Branding User Guide.  It provides a sound foundation of branding elements in a SharePoint site on which to build more advanced skills.  Branding isn’t necessarily a difficult area to grasp, so long as you know what you’re looking for. After reading this guide, you should be able to apply basic branding concepts to a SharePoint Server 2010 site.

Branding User Guide: Introduction

Creating a visually appealing SharePoint site is an undervalued skill set and is in high-demand in the business world today. The SharePoint Server 2010: Branding Guide serves as a means to gain a base understanding of the various techniques, tools, and logic that goes into branding a SharePoint Server 2010 Enterprise site. It is best … Continue reading

Posted in Branding User Guide | Leave a comment

Chapter 1-1: Branding Overview

Branding is defined as “the creation of an entities image portrayed to people in such a way that makes that entity more recognizable and incites a certain feeling in the viewer”. In reference to web sites, branding is the graphics, colors, and logos that provide the visual representation of the site. Within a SharePoint site, this … Continue reading

Posted in Branding User Guide | Tagged | Leave a comment

Chapter 1-2: Branding Overview

Tools of the Trade To make code changes to the various branding pages and elements, you will use either Microsoft SharePoint Designer or Microsoft Visual Studio 2010 (2008 will work too). If the project is to be packaged and deployed, Visual Studio will be required. If the changes are not going to be packaged for … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 1-3: Branding Overview

Browser Compatability Microsoft has provided a table to notate what browser versions are compatible with SharePoint Server 2010 Enterprise. Browser Supported Supported   with limitations Not   tested Internet Explorer 8 (32-bit) X Internet Explorer 7 (32-bit) X Internet Explorer 8 (64-bit) X Internet Explorer 7 (64-bit) X Internet Explorer 6 (32-bit) X Mozilla Firefox 3.6 (on … Continue reading

Posted in Branding User Guide | Tagged | Leave a comment

Chapter 2-1: Microsoft SharePoint Designer

SharePoint Designer 2010 is the latest version of Microsoft’s SharePoint Designer software. It is the recommended tool for customizing user interfaces and doing a majority of the tasks that aren’t code and logic heavy. The name of the product implies that this software is used primarily for design elements, but the truth is that Designer is … Continue reading

Posted in Branding User Guide | Tagged | Leave a comment

Chapter 2-2: Microsoft SharePoint Designer

Site Setting’s Page After you’ve connected to a site, the next page that appears is the “Site Settings” page. This page displays various data about the site such as title, permission levels, URL, available sub-sites, and other important (and some not-so-important) information. The navigation on the left contains the file structure of the elements that … Continue reading

Posted in Branding User Guide | Tagged | Leave a comment

Chapter 2-3: Microsoft SharePoint Designer

Common Commands Here is a quick list of some of the common things you will be doing with files in Designer. This list isn’t all inclusive but it serves as a basis for doing other tasks that will be discussed later in this guide. Read it to understand the concept and then refer back to … Continue reading

Posted in Branding User Guide | Tagged | Leave a comment

Chapter 2-4: Microsoft SharePoint Designer

Workflows Workflows are a process of formulating steps, procedures, and ways to operate for a user to follow. They automate tasks and help alleviate the time it takes for a business process to completely work through its cycle. These automations equate to decreased time in the cycle because of the fact that it takes less … Continue reading

Posted in Branding User Guide | Tagged , , | Leave a comment

Chatper 2-5: Microsoft SharePoint Designer

Data Sources SharePoint Designer allows for easy connectivity between SharePoint data and containers and other types of data and containers. By clicking the “Data Sources” file in the navigation, you can see the various types of connections, both internal and external, that can be made.                     … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 2-6: Microsoft SharePoint Designer

Advanced Mode When you edit a file in Designer, you will often need to do so in “Advanced Mode”. Designer will warn you when you are attempting to edit a file that has no editable regions in the standard “Safe Mode”. If you do not click “Yes” when prompted, it will open the file in … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 3-1: Master Pages

Microsoft SharePoint 2010 master pages are ASP.NET 2.0 files that set the framework for a rendered page which is separate from the content. They define common elements on a page or series of pages and allow creation of a consistent layouts and behaviors by separating the content from the structure. The master page files end … Continue reading

Posted in Branding User Guide | Tagged , , | Leave a comment

Chapter 3-2: Master Pages

Changing a Page’s or Site’s Master Page By using master pages, it is easy to update the look of a page by simply changing the master page that is set on that page. If you do change a master page on a page, all children pages inside of that sub-site will also have their master … Continue reading

Posted in Branding User Guide | Tagged | Leave a comment

Chapter 3-3: Master Pages

Resetting the Site Definition As discussed before, a site definition is the sum of the parts that gets deployed in SharePoint. Sometimes it is necessary to reset this data to accomplish certain tasks. If you do need to reset the site definition for all files in the browser, you can go to “Root” ⇒ “Site … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 3-4: Master Pages

Reviewing the Code We will begin our review of master page code by opening v4.master in Designer. The code begins with declarations that state the language the code is written, which server controls and assemblies are registered, as well as declarations for JavaScript and CSS.       After the standard declarations in red, the … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 3-5: Master Pages

Content Place Holders Navigating through the code, there is one or more areas called content place holders. The code for content placeholders looks like this: <asp:ContentPlaceHolder id=”Main” runat=”server”> </asp:ContentPlaceHolder> Content placeholders are, in essence, containers that signify where to render sections of content. They get their content from the content controls that are placed in … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 4-1: Page Layouts

Page layouts pair with master pages to give the user the templates that control the look and feel of a SharePoint site. While master pages provide controls such as navigation, company logos, and search functionality across the site, the page layouts contain other layout elements such as Web Parts and field controls. If you need … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 4-2: Page Layouts

Page Layout Code Code of page layouts is best viewed and modified in SharePoint Designer. To find a page layout that is either OOTB or one that you created previously through the page layout gallery in the browser, simply click the “Page Layouts” section in the navigation bar in Designer. To open a file, click … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 4-3: Page Layouts

Field Controls Another element you can place in content place holders in a page layout are field controls. Field controls are determined by the site columns which are established through the content types. For instance, if you use an article page layout, you will only see the field controls that are available to the article … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 4-4: Page Layouts

Adding HTML, CSS, ASP.NET, or Text to a Page Layout Inside the content area in a page layout’s code, you can type HTML elements, declare inline styles, set CSS classes, provide default text, or make custom ASP.NET controls that will be applied to only the pages that use that page layout. This is useful to … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 4-5: Page Layouts

Content Types A stated before, page layouts use content types to display data. A content type is a data holder that is used to store a specific type of data. If you have a need for a new type of content on a page layout, you will need to create a new content type. It … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 5-1: Navigation

Chapter 5: Navigation Navigation in SharePoint requires some forward thinking when designing the site. The logical architecture of sites and pages within your site can dictate if a user returns again or avoids the site due to the lack of simplified and easy to use navigation. There are various types of navigation that you can … Continue reading

Posted in Branding User Guide | Tagged , , | Leave a comment

Chapter 5-2: Navigation

Tree View Inside the site settings page is an option called “Tree View”. By clicking this and checking the “Enable Tree View” option, the users will see a new means to navigate a site in the quick launch menu area. It is similar to the navigation view that Designer uses and is entirely optional to … Continue reading

Posted in Branding User Guide | Tagged , , , | Leave a comment

Chapter 6: CSS Cascading Style Sheets (CSS) are a topic that is not unfamiliar to web developers and designers. Chances are that if you’re reading this guide, you already have at least some notion of what CSS’s capabilities are. If you are not at all familiar with the language, I recommend visiting W3School’s website for a … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 6-2: CSS

Tools To aid in the CSS coding process, different browsers offer different resources to pinpoint which styles are being applied to specific elements. Firefox as an add-on called Firebug that allows a user to select an element on a rendered page and then display all the styles that are being applied to that element. Additionally, … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 7-1: Themes

Chapter 7: Themes Themes are a means to distribute basic design elements such as colors and fonts across the site through a few clicks. In SharePoint 2010, themes have been extended to integrate very well with Microsoft PowerPoint and Word (versions 2007 or later). For instance, you could choose a selection of colors using Word … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 8-1: Web Parts and XSLT

Chapter 8: Web Parts and XSLT There are many OOTB Web Parts that come with preconfigured functionality which are simple to integrate and highly useful. We’ve already discussed a number of these Web Parts in previous chapters. Although the OOTB setup of Web Parts has well formed logic, often times it is very difficult to … Continue reading

Posted in Branding User Guide | Tagged , , , | Leave a comment

Chapter 8-2: Web Parts and XSLT

Content Editor Web Part The content editor Web Part (CEWP) is a useful Web Part that allows a user to place HTML, CSS, and script languages directly in a page. This is useful because a basic rich HTML area will remove any script code you place directly in them. The alternative is to place this … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 8-3: Web Parts and XSLT

Content query Web Part The Content Query Web Part (CQWP) allows you to customize the display of content that you pull from various sources throughout your site. It is located under the “Content Rollup” category in the Web Part placement dialog. Once you’ve placed a CQWP, edit its properties to find a lot of beneficial … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 8-4: Web Parts and XSLT

eXtensible StyleSheet Language and Transformations XSL is very similar to CSS in its functions. CSS is used to primarily style HTML and XSL is used to style the XML language. The difference is in the format as well as the fact that CSS is limited to calling on specific tags while in XSL, anything can … Continue reading

Posted in Branding User Guide | Tagged , , , | Leave a comment

Chapter 9-1: The Ribbon

Chapter 9: The Ribbon The ribbon in SharePoint works in the same general manner that the ribbons in other Microsoft applications do. They provide a means to edit and modify the current page or site by dynamically generating buttons grouped and tabbed together with like characteristics. This chapter looks at some really helpful modifications you … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 9-2: The Ribbon

Custom Ribbon buttons To add a custom button to the ribbon, you would need to create a solution file with a feature that includes an element with some simple lines of code using Visual Studio. Working with Visual Studio is beyond the scope of this guide. But, to demonstrate its effectiveness, we will quickly discuss … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Chapter 9-3: The Ribbon

Modal windows Windows introduced the concept of modal windows with its operating systems. Since Microsoft is also the parent of SharePoint, it seems only natural that SharePoint also be able to display modal windows when needed. Another name for modal windows is dialog windows or “pop-ups”. The idea here is that the window will appear … Continue reading

Posted in Branding User Guide | Tagged , | Leave a comment

Appendix A: Adding Files to a Package

Appendix A: Adding Files to a Package To add a file to a package, open Visual Studio and double check that you have the latest file. Also make sure you have the solution mapped locally. If you don’t have it mapped, do so. Once it’s mapped, click on the folder (not the expand arrow) until … Continue reading

Posted in Branding User Guide | Tagged | Leave a comment

Branding Terms and Definitions

Glossary Advanced Mode A mode in   SharePoint Designer that allows for full modification of code. Aggregation The CSS concept that renders   styles on the same element regardless of where the style is declared. ASP.NET A Web application framework that allows web programmers to develop   dynamic web sites, web applications, and web services. … Continue reading

Posted in Branding User Guide | Tagged | Leave a comment

Appendix B: Turning on Full Error Messages

When SharePoint throws an error, the message is often vague in its meaning and hides the true source of the problem. Although some would argue the error message should be specific by default, it is possible to change the settings to allow for a deeper error message to be displayed so proper debugging can commence. … Continue reading

Posted in Branding User Guide | Tagged | Leave a comment