This document provides an overview of how to create custom branding for SharePoint. It discusses the design process, using master pages and page layouts, and deploying branding solutions. The presenters are SharePoint MVPs who provide information on their backgrounds and expertise. They outline the SharePoint design process and discuss elements like vision, requirements, design, development, testing and deployment. Details are provided on master page history and functionality in ASP.NET and SharePoint. The use of controls, content placeholders and CSS are explained. Methods for creating and customizing SharePoint master pages are described. Finally, deployment options like sandboxed and farm solutions are covered.
In this session, we are going to brand a SharePoint site from start to finish. We will use SharePoint Designer, HTML and custom CSS to design a site how not to look like SharePoint. We'll touch upon themes, page layouts as well as master page design. As well as learn how to upgrade a SharePoint 2007 design to SharePoint 2010.
This session is focused on designers well versed with HTML and CSS but might not have the SharePoint development experience. Within the session, we'll also look at usability, accessibility and best practices on branding SharePoint public facing sites.
Visit http://www.kanwalkhipple.com
Step into the SharePoint branding world, tools and techniquesBenjamin Niaulin
This presentation presents the basics for SharePoint branding tools and techniques. All of it was done during Demonstrations feel free to contact me on twitter @bniaulin for more information or CSS files
Create Engaging Branded SharePoint Portals and Plan for ContentCathy Dew
Making sure your content and branding align is always a challenge, but you can create portals that use content as a means to further push your "brand." In this session we will examine how to make use of SharePoint 2013 web part and content features that can be customized from a branding perspective. We will create a sample training portal that will display customized training information to users as well as visually give clues for direction.
In this session, we are going to brand a SharePoint site from start to finish. We will use SharePoint Designer, HTML and custom CSS to design a site how not to look like SharePoint. We'll touch upon themes, page layouts as well as master page design. As well as learn how to upgrade a SharePoint 2007 design to SharePoint 2010.
This session is focused on designers well versed with HTML and CSS but might not have the SharePoint development experience. Within the session, we'll also look at usability, accessibility and best practices on branding SharePoint public facing sites.
Visit http://www.kanwalkhipple.com
Step into the SharePoint branding world, tools and techniquesBenjamin Niaulin
This presentation presents the basics for SharePoint branding tools and techniques. All of it was done during Demonstrations feel free to contact me on twitter @bniaulin for more information or CSS files
Create Engaging Branded SharePoint Portals and Plan for ContentCathy Dew
Making sure your content and branding align is always a challenge, but you can create portals that use content as a means to further push your "brand." In this session we will examine how to make use of SharePoint 2013 web part and content features that can be customized from a branding perspective. We will create a sample training portal that will display customized training information to users as well as visually give clues for direction.
As the focus shifts towards working in the “cloud” more and more businesses are utilizing Office 365 for their corporate intranets. This creates new challenges from a User Experience design. In this session we will dive into the methods for customizing an intranet built on Office 365. We will look at the options for customizing and how you can take these options further.
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewCathy Dew
This presentation begins down the path of how to customize SharePoint 2013 On Premises environments going through the Design, Development and Deployment stages.
A business owner nowadays needs to be able to attract and engage people to their website. In this session, learn to implement your company's brand on SharePoint 2010. During this session, we'll use the right tools to take a design from concept to a fully functioning SharePoint 2010 site. Based on real world experiences, this session is sure to give you some practical tips, tricks, and advice you can use immediately. Learn to leverage SharePoint 2010 tools to customize your experiences, and make them unique. You will be able to take this knowledge and deliver the best end to end experiences to your customers.
Abstract - Designing SharePoint 2010 for Business
A business owner nowadays needs to be able to attract and engage people to their website. In this session, learn to implement your company's brand on SharePoint 2010. During this session, we'll use the right tools to take a design from concept to a fully functioning SharePoint 2010 site. Based on real world experiences, this session is sure to give you some practical tips, tricks, and advice you can use immediately. Learn to leverage SharePoint 2010 tools to customize your experiences, and make them unique. You will be able to take this knowledge and deliver the best end to end experiences to your customers.
Bio - Kanwal Khipple, is a SharePoint Most Valued Professional (MVP) and Principal SharePoint Architect for BrightStarr. Kanwal focuses on designing adoptable solutions using SharePoint. In the past 7 years, he has developed, implemented and architected hundreds of SharePoint solutions from small single server deployments to globally dispersed SharePoint server farms that can handle 120,000+ users. Kanwal lives in Toronto, Canada and you can find him tweeting, buzzing and blogging on his personal blog. Connect with him on LinkedIn to learn how you can quickly start getting ROI for your SharePoint Intranet.
You are about to embark on a journey of becoming a SharePoint Designer Ninja. SharePoint has infiltrated within your company and you want to master the art of css, master pages and page layouts. Within this one hour session, I will teach you the countermeasures required to masterfully brand SharePoint to your will. During this session, we will brand a site from scratch with our bare hands and this will be the initiation into the SharePoint Design. At the end of this session, I’ll teach you legendary abilities of SharePoint Designers including invisibility, walking on water, and control over master page content placeholders. You’ll also be given some secrets from within the walls of the Oniwaban such as practical tips, tricks, and advice so that you too can one day become a SharePoint Design Ninja.
http://www.kanwalkhipple.
In this session you will learn about how to change SharePoint site style and design?. We will review the topic related to branding as it relates to SharePoint as well as dive into the use of themes, master pages, page layouts and CSS to create a more good look and feel for SharePoint. We will also discuss the entire branding process from the creation of the design to the deployment.
Optimizing SharePoint 2010 for Internet sitesKanwal Khipple
Optimizing SharePoint 2010 for Internet Sites
This presentation is focused on public facing sites. Many of the tips can be used for intranets, extranets and are certainly applicable.
This is a level 200 session that includes beginner / intermediate tips
There are tips for administrators as well as developers
There will no demo’s
My goal for this presentation is to give ideas on things you might not have considered
I’d love to have a discussion around these tips and
share your war stories
Creating designs that will respond and work with multiple browser and device types has become more and more important. In this session we will examine the concepts behind Responsive Design and how you can and should apply them to SharePoint.
User Centered Design and SharePoint Publishing PortalsTom Pham
Usability and User Experience.
The User Centered Design Process (UCDP), taking designs from Abstract to Concrete.
Identifying Measures of Success.
Putting together a UX Team.
Microsoft’s Web Content Management System - SharePoint Publishing Portals.
Publishing Site Components - Master Page, Page Layouts, CSS, JS, XSLTs, Web Parts.
Leveraging CSS Frameworks for responsive web like Bootstrap.
In these slides we provides information about new technology (CSR) to learn you how to customize the way users interact with list data, and how to develop solutions that change the way data is rendered.
This presentation shows the new features in SharePoint 2013 that help in building/designing websites that are added to bridge the gap between design and development of Websites on SharePoint 2013
As the focus shifts towards working in the “cloud” more and more businesses are utilizing Office 365 for their corporate intranets. This creates new challenges from a User Experience design. In this session we will dive into the methods for customizing an intranet built on Office 365. We will look at the options for customizing and how you can take these options further.
Make SharePoint Look Not Like SharePoint - SPSNashville - Cathy DewCathy Dew
This presentation begins down the path of how to customize SharePoint 2013 On Premises environments going through the Design, Development and Deployment stages.
A business owner nowadays needs to be able to attract and engage people to their website. In this session, learn to implement your company's brand on SharePoint 2010. During this session, we'll use the right tools to take a design from concept to a fully functioning SharePoint 2010 site. Based on real world experiences, this session is sure to give you some practical tips, tricks, and advice you can use immediately. Learn to leverage SharePoint 2010 tools to customize your experiences, and make them unique. You will be able to take this knowledge and deliver the best end to end experiences to your customers.
Abstract - Designing SharePoint 2010 for Business
A business owner nowadays needs to be able to attract and engage people to their website. In this session, learn to implement your company's brand on SharePoint 2010. During this session, we'll use the right tools to take a design from concept to a fully functioning SharePoint 2010 site. Based on real world experiences, this session is sure to give you some practical tips, tricks, and advice you can use immediately. Learn to leverage SharePoint 2010 tools to customize your experiences, and make them unique. You will be able to take this knowledge and deliver the best end to end experiences to your customers.
Bio - Kanwal Khipple, is a SharePoint Most Valued Professional (MVP) and Principal SharePoint Architect for BrightStarr. Kanwal focuses on designing adoptable solutions using SharePoint. In the past 7 years, he has developed, implemented and architected hundreds of SharePoint solutions from small single server deployments to globally dispersed SharePoint server farms that can handle 120,000+ users. Kanwal lives in Toronto, Canada and you can find him tweeting, buzzing and blogging on his personal blog. Connect with him on LinkedIn to learn how you can quickly start getting ROI for your SharePoint Intranet.
You are about to embark on a journey of becoming a SharePoint Designer Ninja. SharePoint has infiltrated within your company and you want to master the art of css, master pages and page layouts. Within this one hour session, I will teach you the countermeasures required to masterfully brand SharePoint to your will. During this session, we will brand a site from scratch with our bare hands and this will be the initiation into the SharePoint Design. At the end of this session, I’ll teach you legendary abilities of SharePoint Designers including invisibility, walking on water, and control over master page content placeholders. You’ll also be given some secrets from within the walls of the Oniwaban such as practical tips, tricks, and advice so that you too can one day become a SharePoint Design Ninja.
http://www.kanwalkhipple.
In this session you will learn about how to change SharePoint site style and design?. We will review the topic related to branding as it relates to SharePoint as well as dive into the use of themes, master pages, page layouts and CSS to create a more good look and feel for SharePoint. We will also discuss the entire branding process from the creation of the design to the deployment.
Optimizing SharePoint 2010 for Internet sitesKanwal Khipple
Optimizing SharePoint 2010 for Internet Sites
This presentation is focused on public facing sites. Many of the tips can be used for intranets, extranets and are certainly applicable.
This is a level 200 session that includes beginner / intermediate tips
There are tips for administrators as well as developers
There will no demo’s
My goal for this presentation is to give ideas on things you might not have considered
I’d love to have a discussion around these tips and
share your war stories
Creating designs that will respond and work with multiple browser and device types has become more and more important. In this session we will examine the concepts behind Responsive Design and how you can and should apply them to SharePoint.
User Centered Design and SharePoint Publishing PortalsTom Pham
Usability and User Experience.
The User Centered Design Process (UCDP), taking designs from Abstract to Concrete.
Identifying Measures of Success.
Putting together a UX Team.
Microsoft’s Web Content Management System - SharePoint Publishing Portals.
Publishing Site Components - Master Page, Page Layouts, CSS, JS, XSLTs, Web Parts.
Leveraging CSS Frameworks for responsive web like Bootstrap.
In these slides we provides information about new technology (CSR) to learn you how to customize the way users interact with list data, and how to develop solutions that change the way data is rendered.
This presentation shows the new features in SharePoint 2013 that help in building/designing websites that are added to bridge the gap between design and development of Websites on SharePoint 2013
Getting Started with Site Designs and Site Scripts - NACollabSummit 2019Drew Madelung
The concept of building SharePoint site templates has evolved. We now have site scripts and site designs that we can utilize to build templates for modern SharePoint sites. With these solutions we can empower the end users or administrators to drive consistent SharePoint experiences. In this session I will break down what site designs and site scripts are and how you can get started using them today within your enterprise.
SUGUK Cambridge - Display Templates & JSLink for IT ProsPaul Hunt
This is another evolution of my Display Templates session. A few of the slides have been updated. The key differences between each session however is the demos.
These slides do contain the links called out during the session however.
I based my presention on the great "HTML5 for Web designers" by Jeremy Keith. Awesome and pragmatic book, the way I like it. Get your copy on: http://books.alistapart.com/products/html5-for-web-designers
Getting Started with Site Designs and Site Scripts - SPSChiDrew Madelung
The concept of building SharePoint site templates has evolved. We now have site scripts and site designs that we can utilize to build templates for modern SharePoint sites. With these solutions we can empower the end users or administrators to drive consistent SharePoint experiences. In this session I will break down what site designs and site scripts are and how you can get started using them today within your enterprise.
D1 - Building Great Client-side Web Parts with SPFx, PnP-JS-Core, ReactJS and...SPS Paris
Combine four key technologies to build great solutions for your company or clients. Build client-side web parts using the SharePoint Framework (SPFx) along with the open-source toolchain. The PnP-JS-Core library allows you to do a lot of work against the SharePoint REST API with just a few lines of code - sometimes even a single line of code! ReactJS is a view library that allows you to build lightning-fast user interfaces using a powerful component model. Finally, the Office UI Fabric, available in several forms including React components, allows you to build great-looking solutions that follow the design guidelines for SharePoint and Office Add-ins. Four great technologies in their own right, but in combination they allow you to deliver amazing SharePoint solutions with minimal effort.
Theming websites effortlessly with Deliverance (CMSExpo 2010)Jazkarta, Inc.
Learn how to theme any CMS in 5 minutes with Deliverance, a tool that makes theming easy. It takes content from a CMS and inserts it into placeholders in a theme destination.
3. John Ross
• MVP SharePoint Server
• Custom Solutions Lead – Rackspace
• Author
• Coming Soon- SharePoint 2013 Branding & UI Design
• http://bit.ly/SP2013Branding
• Professional SharePoint 2010 Branding
• http://bit.ly/sp2010-brandingbook
• Blog:
• http://johnrossjr.wordpress.com
• Twitter:
• http://twitter.com/johnrossjr
• Orlando, FL
4. The SharePoint Design Process
Vision and
Requirements Design
Goals
Create
Build HTML
dynamic SharePointify
and CSS
elements
Test Deploy Flip the switch
6. Before Master Pages
• Remember back to the bad old days
of web design
• Every page had 100% of the HTML
included
• ASP Includes helped with reuse
• With ASP.net 2.0 Master Pages were
introduced
• Page design separate from both content
and code
7. Master Pages Basics
• They can be thought of as the
outer shell of a site design
• The glue that holds the page
together
• HTML
• JavaScript
• CSS
• Content Placeholders
• Controls
• ASP.net code
8. Master Pages in ASP.NET
• Can be created in C# or VB.net
• For SharePoint they are created in C#
• ASPX Pages refer to MP’s by the @ Page directive
• <%@ Page Language="C#" MasterPageFile="demo.master" %>
11. HTML Page Result
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"... >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo Title</title>
</head>
<body>
<form name="aspnetForm" method="post" action="teched.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="..." />
</div>
<div>
Hello World
</div>
<div>
Override the Footer
</div>
</form>
</body>
</html>
12. Content Placeholders
• Content placeholders listed in ASPX pages
MUST have a matching placeholder on the
applied master page
• Pages will error if they aren't!
• Content placeholders listed in a master page
DO NOT need to be used in a ASPX page
• This is an important concept in SharePoint
because Microsoft uses a lot of Content
Placeholders
13. Controls
• Self contained built-in or custom functionality that can be
loaded on pages and master pages
• Examples: Search box control, Login control, Navigation control, etc.
• User Controls
• Usually simple functionality
• .ASCX file
• Server controls
• Compiled code
• DLL loaded on the server
14. Using Controls
• Registered at the top of the page
<%@ Register TagPrefix="Custom" TagName="Search"
src="searchbox.ascx" %>
<%@ Register Tagprefix="SharePoint"
Namespace="Microsoft.SharePoint.WebControls"
Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neu
tral, PublicKeyToken=71e9bce111e9429c" %>
• Use in the page
<Custom:Search ID="mySearchControl" runat="server" />
• Pass in property values
<Custom:Search ID="mySearchControl" ButtonImage="go.png"
runat="server" />
16. Master Pages in SharePoint
• Like ASP.NET master pages… but with more “stuff”
• Coded in C#
• They have required Content Placeholders
• The OOTB v4.master page is about 665 lines of code
• How many comments?
• Approximately 1/3 is code that builds the Ribbon
20. Beauty isn’t skin deep
• Planning
• Creative Design / User Experience (UX)
• Master Pages, CSS, Page Layouts
• Web parts
• Testing
• Content entry
• Custom Development
21. Where do you start?
• What do we hope to accomplish?
• How will we know when we get there?
• Audience? Goals?
• Type of site?
• Major types of content
• Corporate Style Guidelines?
• Navigation needs? Searching? Web Parts?
23. Wireframes and Creative Comps
• Useful for getting approval before spending effort making
in SharePoint
• Wireframes – Show basic concepts in black and white
• Creative comps – Realistic mockup of the site
24. HTML Version of the Site
• Good for complex designs
• Allows you to build out the design and test without dealing
with SharePoint issues
• Many of the assets can be re-used in SharePoint
• Be sure to start with XHTML 1.0 Strict for SP2010
25. Starting a New Master Page
• Start from an existing master page
• One option is to copy one of the OOTB master pages
• V4.master
• NightAndDay.master
• Good for when you only need to make minor changes
• Use a starter master page
• startermasterpages.codeplex.com
26. Using a Starter Master Page
• Add the starter master page to the master page gallery
• Rename it
• As changes are made, check-in major version and approve
27. Adding the HTML Assets
• Add the images and CSS to the Style Library
• Make sure your CSS is applied after CoreV4.css
<SharePoint:CssRegistration name="/Style Library/customstyle.css"
After="corev4.css" runat="server"/>
31. Handling Required CPH’s
• Referenced by various pages in SharePoint
• Deleting them will cause an error
• Instead hide them in an <asp:Panel>
<asp:Panel visible="false" runat="server">
<asp:ContentPlaceHolder ID="PlaceHolderNavSpacer"
runat="server"/>
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarBorder"
runat="server"/>
</asp:Panel>
32. Adjust CSS and HTML
• Use IE Developer Tools (built in to IE8/9) and Firebug to
debug CSS issues
• http://getfirebug.com/
• Highlight elements in the browser and see…
• What style is being applied to the HTML element
• How CSS classes are overriding each other
• Immediately see impact of CSS changes
38. Examples of how page layouts are used
• Allowing content authors to enter organized information
• Adding Fields that a Web Part can rollup
• Embedding a web part that filters based on URL parameters
41. What is deployment?
• The process of putting your design and related assets onto
a server – eventually production
• Where do you put the files and how do you get them there?
• Final piece of the branding process
• Options
• Upload files through the SP UI
• SPD
• Use Visual Studio 2010
• Sandboxed Solution
• Farm Solution
42. Method of deployment
• SharePoint Designer or upload through the UI
• Fine for dev and very small implementations
• Sandboxed Solutions
• Option of choice for Office 365
• Deploys files to the site collection only, limited functionality, low risk
• Farm Solutions
• Requires a farm admin to deploy
• Files can be used by all site collections, greater flexibility, more risk
43. Customized vs. Uncustomized Files
• Source of file lives on the server file system
• Many documents point to single file
• Ex. OOTB page layouts
• Source of the file lives in the content database
• Ex. Files modified through SharePoint UI and SharePoint Designer
44. Steps to deploy branding
Step 1
Create a Visual Studio Solution and Project
Step 2
Add files to modules which mirror SharePoint structure
Step 3
Configure Element.xml for each module to deploy files
Step 4
Use feature receiver to switch master page and event receiver to
automatically set master page for newly created sites.
Step 5
Deploy this as a SharePoint Solution (.WSP) to your SharePoint farm
45. Creating SharePoint Solutions
• What you’ll need
• Visual Studio 2010
• CKS:Dev (optional but very helpful!)
• http://cksdev.codeplex.com/
• Download from Extension Manager in VS2010
• Time and patience
47. Helpful resources
• Deploying Branding Solutions for SharePoint 2010 Sites
Using Sandboxed Solutions
• http://msdn.microsoft.com/en-us/library/gg447066.aspx
• Packaging master pages and page layouts
• http://blogs.msdn.com/b/bobgerman/archive/2011/01/31/packagin
g-master-pages-and-page-layouts-with-visual-studio-2010.aspx
48. Contact Information
Stop by the Rackspace booth if you have any questions!
• Our Book:
• http://bit.ly/SP2013Branding
• http://bit.ly/sp2010-brandingbook
• Blog:
• http://blog.drisgill.com
• http://johnrossjr.wordpress.com
• Twitter:
• http://twitter.com/drisgill
• http://twitter.com/johnrossjr
You have to walk before you runASP.NET master pages are easier to understand then SP master pagesLot less code
What is a master page?
In SP, Microsoft created the pages so you will need to make sure you have matching CPH
Apply one to sharepoint
John:Story:Not just 12 pages
John:Identify stakeholdersBe careful beware of design by committeeHow do we know when we are finished?
John:Avoid general non specific requirements – actionableAvoid design by committee - A Camel is a horse that was designed by committee
Show v4 and night and day
Show v4 and night and day
A The Ribbon - The entire top portion of the UI is actually part of the ribbon. It shows and hides depending on the user’s current context.B Site Actions - Used primarily by content authors and administrators. It is the main menu for interacting with SharePoint.C Global Breadcrumbs Pop-out - This is a new implementation of the global breadcrumbs from SharePoint 2007. When the user clicks the icon a dynamic HTML pop-out shows a hierarchical view of the site which can be used for navigating up from the current location.D Page State Action Button -This icon is used for controlling the page state; it typically shows a shortcut to edit / save the current page.E Ribbon Contextual Tabs - This section changes constantly based on what the user is interacting with on the page. The purpose is to bring up menus specific to the various functions of the SharePoint site.F Welcome Menu - This control shows the welcome message as well as allowing the user to view their profile, sign out, and sign in as another user. If other language packs are installed, the ability to change the user’s language is also available here. When the user is not logged in, this shows the Sign In link as well.G Developer Dashboard Launcher - This button launches the Developer Dashboard which is typically shown at the bottom of the screen. The Developer Dashboard contains statistics about the page rendering and queries. It is typically hidden, and can be activated via an STSADM command.H Title Logo - Sometimes referred to as Site Icon. Typically shows the SharePoint site icon, but can also show a user-defined logo.I Breadcrumb - This is a pseudo breadcrumb that is specific to the v4.master master page. It is comprised of the Site Title plus the placeholder for “Title in Title Area” which typically contains the Page Title. The Site Title is linked to the top level of the site.J Social Buttons - These buttons are used for marking things as liked and for adding tags and notes to content.K Global Navigation - Sometimes referred to as the Top Link Bar or Top Navigation Bar. This is the primary horizontal navigation for the site.L Search Area - The search box is used to enter terms for performing searches on the site.M Help Icon - The help icon links to the SharePoint 2010 help documentsN Current Navigation - Sometimes referred to as the Quick Launch or Left Navigation. It is used for secondary vertical navigation of the pages related to the current location.O Tree View - Provides a Windows Explorer–style representation of the site. Because of its appearance, the Tree View is often better suited for intranet sites.P Recycle Bin - A link to the Recycle Bin for the site. A collection of items that were deleted from the site. Typically better suited for intranet sites.Q All Site Content - A link to the All Site Content page of the SharePoint site. In SharePoint 2007 this was called the View All Site Content link. Typically better suited for intranet sites.R Body Area - The main content placeholder that will contain all of the page specific content. Required for rendering the actual content of the page.
Randy:Once you have a starter master page, creating a branded master page for SP is just a matter of merging your HTML design with the starter master pageYou take the functional areas of the starter and wrap your HTML layout around themI tried to make a crude animation to explain the process, I’m not sure how affective it is, but hopefully it gives you an idea of what we do
Randy:You can see with the finished result you have your HTML laying out the functionality that SharePoint uses
Copy _starter_publishing.master > demowaffles.masterCheck it outCopy in main div from html under mso_content divPaste areasDo css and logo
Be sure to check everything in /publish and approve