The SharePoint 2010 Branding Experience

Chances are you found this class because you want to make SharePoint look like anything except for SharePoint. You may get hung up on the SharePoint part, but the key word is anything. Any branding, any layout, any number of design variations… this can all be done inside of SharePoint. You got the design and now you need the where and how. That is where the SharePoint 2010 Branding Experience course begins.

This on demand course will show you how to rebrand SharePoint at your pace and at your convenience.

Key Takeaways

  • Access to over over 12 hours of audio and video instruction, 45 recorded screencasts and electronic lecture notes with diagrams
  • The know-how to brand a large SharePoint implementation, from Master Pages to CSS branding
  • Confidence in your ability to effectively manage and maintain your SharePoint branding project
  • The knowledge on how to brand your site with the least number of files and in the most effective, template based way
  • A large code repository filled with CSS tips and tricks

In-Depth Course Syllabus

Introduction to SharePoint 2010

Don’t let the word “introduction” fool you. This is not regurgitation of what you could find in a help file! Walk through key components of SharePoint that make a difference when branding your site and what you should know and understand when working with SharePoint design. Topics include:

  • New features available in SharePoint 2010
  • Key architecture and developer tidbits that every designer should know
  • The web server vs. the content database
  • How SharePoint components layer together to create the rendered web site

SharePoint Publishing

Easily one of the top things that organizations pay for yet never use, are the publishing features in SharePoint. Dive into the tools that SharePoint provides for web content management and walk through the essential components of a publishing site and how to create web pages in SharePoint. Review essential information, such as:

  • Publishing sites vs. non-publishing sites
  • The Pages library and the purpose it serves
  • How to structure sub sites within your publishing site collection
  • Control end user access to site templates and page layouts (content templates)

Welcome to SharePoint’s own editor, SharePoint Designer 2010

Set aside what you might have heard, SharePoint Designer 2010 is not that bad, and it has certainly come a long way since FrontPage. Get to know the recommended tool for SharePoint site manipulation, development and branding, including:

  • View and edit code
  • Customize a file (unghosting) and reset it back to the original state
  • Use “Open” vs. “Edit File in Advanced Mode”, and what the heck this even means

Introduction to master pages and content pages

Ah, the Shangri-La of SharePoint branding, the all encompassing master page. Deep dive into the key components of a master page and truly understand how it works with its partner, the often overlooked but very important content page. Also learn why you should NOT start with a copy of v4.master for your custom SharePoint branding. Main discussion points:

  • Why master pages are awesome and how they will help cut your workload
  • Understand that the content page is actually the king of this castle
  • How the master page and content page talk to each other
  • What content/HTML components belong in a master page
  • Check out a Page Layout and understand what role it plays with master pages

Semantic HTML, HTML5 and CSS

No, you don’t have to wait till the year 2022 to use HTML5. Really. And you don’t have to toss aside common web foundations and strategies just because you are using SharePoint. AND you can even use CSS endlessly to brand your SharePoint sites! The next section of class will set you up for a successful branding implementation. Topics include:

  • Content first approach to HTML
  • A review of CSS concepts and methodologies
  • How to handle CSS within SharePoint
  • Utilize popular browser tools to locate SharePoint styles

Master page creation and editing

Push up your sleeves and crack those knuckles, it is time to get busy with code. Next up is creating a master page file and applying it to SharePoint. Move on to manipulating the code and trimming out SharePoint components you don’t want to use while shifting the placement of those that you do want. You will be given several starting point choices, including a boilerplate master page that uses a CSS based layout, a student exclusive. In addition to moving code around, you will learn how to add:

  • CSS files
  • Images
  • JavaScript files
  • Custom .NET controls

Brand a SharePoint site, from start to finish

It is time to make SharePoint not look like SharePoint. Through the use of a large collection of step-by-step screencasts, you can create the following customizations in a SharePoint site:

  • Hide the current navigation (Quick Launch)
  • Transition to a fixed width design
  • Manipulate the header area
  • Move and rebrand the search box
  • Redesign the global navigation (top bar/navigation)
  • Add social share icons

Taxonomy and content types

Joining publishing as a majorly underutilized feature of SharePoint would be custom content types. It is too bad since good taxonomy and well thought out content types can make or break a SharePoint implementation. Pause your branding efforts for a bit to learn more about content types and how to create them inside of SharePoint. And everything you do can be done in the web browser, or your new tool, SharePoint Designer. Understanding and creating content types is also vital to the final section of this branding course…

Page layouts for publishing sites

Now you are ready to create and apply a page layout – the ideal way to centrally connect and manage content in your web pages for a publishing site. There are a lot of steps in the process, starting with taxonomy and content types (which you just learned) and leading all the way to how to add web part zones to your page. Walk through all that and more in the final section of the course. Skills covered:

  • Create a content type and link it to a page layout
  • Add field controls (and understand where they come from within SharePoint)
  • Incorporate web part zones and web parts
  • Create special areas only seen in edit mode
  • Add more special areas only seen by authenticated users

Bonus materials

The heart of branding SharePoint isn’t comps, colors or graphics… it is code. That is why the entire course focuses on how to read it, create it and edit it. However there are other components to the branding process so the following bonus materials are provided for your review:

  • Building a design for SharePoint
  • Working with the SharePoint ribbon
  • Visual Upgrade and what does it mean

System Requirements

  • Access to a SharePoint 2010 site, preferably a top level site collection based on the Enterprise Wiki site template with administrator rights
  • SharePoint Designer 2010 (required)
  • Speakers or headphones for course audio
  • OPTIONAL: If you have access to a second monitor it can aid with viewing the course while trying out exercises