sharepoint styling & branding week - protiviti · introduction to sharepoint design ......
TRANSCRIPT
![Page 1: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/1.jpg)
Part One
Styling & Branding SharePoint 2010
![Page 2: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/2.jpg)
Introductions.
![Page 3: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/3.jpg)
@kyleschaeffer kyleschaeffer.com
![Page 4: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/4.jpg)
The Agenda
Part One SharePoint design strategy
Introduction to SharePoint design
Master pages & page layouts
Taking the “SharePoint” out of SharePoint
Part Two SharePoint content customizations
Getting creative in SharePoint
Advanced SharePoint design techniques
Awesome customizations with JavaScript and jQuery
![Page 5: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/5.jpg)
Strategy.
![Page 6: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/6.jpg)
User INTERFACE is what people see, hear, and interact with in an electronic interface (like a website).
User EXPERIENCE is how people react to the interface, controls, design, and organization of content.
“
![Page 7: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/7.jpg)
SharePoint Design Strategy
Discover Plan Design Implement
![Page 8: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/8.jpg)
SharePoint Design Strategy
Discover Plan Design Implement
![Page 9: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/9.jpg)
Perception vs. Expectation
![Page 10: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/10.jpg)
Perception vs. Expectation
Start Goal
![Page 11: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/11.jpg)
Perception vs. Expectation
Start Goal
![Page 12: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/12.jpg)
Tools of Discovery
Kickoff meetings What does the client want?
Information architecture Gather information about content
Determine audience, users, personas
Determine priority of content from the client’s perspective
![Page 13: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/13.jpg)
Perception vs. Expectation
Start Goal
![Page 14: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/14.jpg)
SharePoint Design Strategy
Discover Plan Design Implement
![Page 15: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/15.jpg)
SharePoint Design Strategy
Discover Plan Design Implement
![Page 16: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/16.jpg)
Tools of Planning
Set design goals Set measures of success
Identify and define aesthetic variables
Wireframes
Define level of customization (scope) Based on budget, resources, and design needs
Helps define the project scope
![Page 17: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/17.jpg)
Mood Boards
![Page 18: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/18.jpg)
Levels of Customization
SharePoint Themes
• Little to no effort (can easily be changed by end-users)
• Limited customization (colors & fonts only)
Low-Level Customization
• Less effort than most customizations
• Largely retain default SharePoint interface
• Limited to minor color and content changes (logos, header & footer, etc.)
Custom Master Page(s)
• Variable effort (depends on client’s needs)
• Allows for major layout changes and customization
• Utilizes the same controls as the default interface (navigation, search, breadcrumb,
etc.)
Extend SharePoint
• Variable effort (depends on client’s needs)
• Virtually no limit to what can be done
• Often requires a developer to implement
• Can create custom controls with additional functionality not found in the default
SharePoint interface
![Page 19: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/19.jpg)
Wireframes
![Page 20: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/20.jpg)
SharePoint Design Strategy
Discover Plan Design Implement
![Page 21: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/21.jpg)
SharePoint Design Strategy
Discover Plan Design Implement
![Page 22: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/22.jpg)
Tools of Design
Three C’s of design Components
Composition
Concept
Let’s get creative Brainstorming
Sketching
Graphic design
![Page 23: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/23.jpg)
![Page 24: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/24.jpg)
![Page 25: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/25.jpg)
SharePoint Design Strategy
Discover Plan Design Implement
![Page 26: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/26.jpg)
SharePoint Design Strategy
Discover Plan Design Implement
![Page 27: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/27.jpg)
Tools of Implementation
HTML, CSS, JavaScript SharePoint Designer 2010
You’re already doing it!
![Page 28: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/28.jpg)
![Page 29: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/29.jpg)
![Page 30: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/30.jpg)
![Page 32: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/32.jpg)
A brief introduction.
![Page 33: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/33.jpg)
SharePoint 2010
What’s new in SharePoint 2010? Accessibility
Browser support
Standards-compliance (DOCTYPE)
Simplified design process
More flexible themes and color schemes
The “Ribbon”
![Page 34: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/34.jpg)
The SharePoint 2010 Interface
![Page 35: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/35.jpg)
The SharePoint 2010 Interface
![Page 36: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/36.jpg)
![Page 37: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/37.jpg)
Also New in SharePoint 2010
![Page 38: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/38.jpg)
SharePoint Designer 2010
It’s free! Sharepoint2010.microsoft.com
32-bit vs. 64-bit SharePoint Designer 2010 – 32-bit AND 64-bit
SharePoint Designer 2007 – 32-bit ONLY
If you want to install both, ALL Office applications on your computer must be 32-bit!
![Page 39: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/39.jpg)
![Page 40: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/40.jpg)
SharePoint Designer 2010
New and improved Edit and create content types & site columns
Edit and manage permissions, security, site settings
Awesome new workflow editor
More control over SPD security (who can use SPD)
![Page 41: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/41.jpg)
SharePoint Terminology
SusQtech Pretzel Co.
About Us Specials Our Pretzels
Documents Images Pages
photo.jpg
Contacts Events
Site
Library
Pages
default.aspx
Jumbo.aspx
Sourdough.aspx
kittens.jpg
List
Holiday Sale!
Shipments in
![Page 42: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/42.jpg)
Master pages.
![Page 43: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/43.jpg)
COPYRIGHT SUSQTECH PRETZEL CO. • 2 NORTH CAMERON STREET, WINCHESTER, VIRGINIA
Search
![Page 44: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/44.jpg)
COPYRIGHT SUSQTECH PRETZEL CO. • 2 NORTH CAMERON STREET, WINCHESTER, VIRGINIA
Search
(page content)
![Page 45: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/45.jpg)
Page layouts.
![Page 46: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/46.jpg)
COPYRIGHT SUSQTECH PRETZEL CO. • 2 NORTH CAMERON STREET, WINCHESTER, VIRGINIA
Search
(page content)
![Page 47: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/47.jpg)
COPYRIGHT SUSQTECH PRETZEL CO. • 2 NORTH CAMERON STREET, WINCHESTER, VIRGINIA
Search
(page content)
![Page 48: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/48.jpg)
(page content)
Page Title Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a eros a turpis interdum pellentesque
a eu ligula. Sed convallis mattis tempus. Fusce elementum auctor massa eu volutpat. Maecenas
tempor turpis vel leo pellentesque sed aliquet sapien imperdiet. Pellentesque nisi purus, vehicula
vel fringilla a, tincidunt vitae purus. Quisque malesuada lorem quis lorem tempor id mollis sem
vestibulum. In ornare justo eu enim bibendum sed facilisis nulla viverra. Quisque vitae felis id
turpis fringilla posuere non sit amet eros. Sed eu enim lacus, quis lobortis erat. Quisque auctor
rutrum risus, id malesuada dui adipiscing quis. Nam eu lectus sed mi imperdiet dapibus sit amet in
dui. Aliquam pellentesque, erat non consequat luctus, nunc justo commodo enim, ut fermentum
arcu arcu a massa. Duis ac est est. Duis adipiscing, lacus hendrerit elementum aliquet, dui libero
euismod ipsum, et interdum odio tellus in eros. Duis tincidunt, ipsum vel euismod semper, quam libero venenatis orci, dictum
volutpat felis est id dui. Phasellus felis felis, cursus elementum elementum eget, facilisis sit amet enim. Nulla sodales hendrerit
condimentum. Ut in mi elit, at gravida sapien. Vestibulum consectetur nulla nec elit hendrerit non condimentum nunc tristique.
Nam sit amet commodo tellus. Nunc quis scelerisque nibh. Phasellus laoreet sagittis massa vitae tempor. Cras sagittis est quis
enim semper commodo. Nunc vel felis purus.
![Page 49: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/49.jpg)
(page content)
Page Title
euismod ipsum, et interdum odio tellus in eros. Duis tincidunt, ipsum vel euismod semper, quam libero venenatis orci, dictum
volutpat felis est id dui. Phasellus felis felis, cursus elementum elementum eget, facilisis sit amet enim. Nulla sodales hendrerit
condimentum. Ut in mi elit, at gravida sapien. Vestibulum consectetur nulla nec elit hendrerit non condimentum nunc tristique.
Nam sit amet commodo tellus. Nunc quis scelerisque nibh. Phasellus laoreet sagittis massa vitae tempor. Cras sagittis est quis
enim semper commodo. Nunc vel felis purus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a eros a turpis interdum pellentesque
a eu ligula. Sed convallis mattis tempus. Fusce elementum auctor massa eu volutpat. Maecenas
tempor turpis vel leo pellentesque sed aliquet sapien imperdiet. Pellentesque nisi purus, vehicula
vel fringilla a, tincidunt vitae purus. Quisque malesuada lorem quis lorem tempor id mollis sem
vestibulum. In ornare justo eu enim bibendum sed facilisis nulla viverra. Quisque vitae felis id
turpis fringilla posuere non sit amet eros. Sed eu enim lacus, quis lobortis erat. Quisque auctor
rutrum risus, id malesuada dui adipiscing quis. Nam eu lectus sed mi imperdiet dapibus sit amet in
dui. Aliquam pellentesque, erat non consequat luctus, nunc justo commodo enim, ut fermentum
arcu arcu a massa. Duis ac est est. Duis adipiscing, lacus hendrerit elementum aliquet, dui libero
![Page 50: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/50.jpg)
Lab Session #1 Lesson 1: Introduction to SharePoint Design
![Page 51: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/51.jpg)
SharePoint Design.
![Page 52: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/52.jpg)
SharePoint Web Technology
HTML Hypertext Markup Language
Content and structure
CSS Cascading Style Sheets
Presentation and style
JavaScript Interactive behavior (more on this later)
![Page 53: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/53.jpg)
HTML Elements
Powered by <a href="http://susqtech.com">SusQtech</a>.
Opening tag Closing tag
Attribute Value
![Page 54: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/54.jpg)
CSS Styles
.article { color: red; }
Select HTML element(s)
Modify them!
![Page 55: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/55.jpg)
Element Selectors
<p>
Paragraph of text.
</p>
p {
color: red;
}
![Page 56: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/56.jpg)
Class Selectors
<div class=“article”>
This is an article.
</div>
.article {
color: red;
}
![Page 57: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/57.jpg)
ID Selectors
<div id=“header”>
</div>
#header {
color: red;
}
![Page 58: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/58.jpg)
Descendant Selectors
<div id=“header”>
<h1>Hello.</h1>
</div>
#header h1 {
color: red;
}
![Page 59: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/59.jpg)
Composite Selectors
<div id=“header”>
<ul class=“top-nav”>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
#header ul.top-nav li {
color: red;
}
![Page 60: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/60.jpg)
Complex Selectors
<ul class=“top-nav”> <li>Item 1</li> <li> Item 2 <ul class=“menu”> <li>Menu 1</li> </ul> </li> </ul>
ul.top-nav > li {
color: red;
}
![Page 61: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/61.jpg)
More About CSS
Pseudo-selectors *
:hover, :active, :visited
:first-child
CSS3 selectors (:nth-child(3n+1), :not(), etc.)
In CSS, it pays to be in last place! New styles override old styles
More specific styles override less specific ones
This allows us to customize the SharePoint interface without re-writing all of Microsoft’s style sheets
![Page 62: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/62.jpg)
Customization.
![Page 63: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/63.jpg)
SharePoint Customizations
Themes Easy
Allow you to change color scheme, overall “feel” of the site
Master page customizations & CSS Much more control over the appearance of the site
More portable
Ideal for most designs
![Page 64: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/64.jpg)
SharePoint Customizations
Style Library Accessible through the “All Files” tab
Stores commonly used CSS, XSL, and image files
A great place to store your own design files (CSS, images, JavaScript, etc.)
![Page 65: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/65.jpg)
v4.master
Microsoft’s master page Customizations are relatively easy
Attach
• Attach a new style sheet
Override
• Override Microsoft’s default SharePoint 2010 styles in your new style sheet
Customize
• Avoid customizing the corev4.css file!
![Page 66: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/66.jpg)
More “v4” Customizations
Some things can’t be done with CSS alone Moving elements around on the page
Removing unwanted SharePoint components
Adding new components and controls
Major master page revisions and reorganization
![Page 67: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/67.jpg)
Not Good Enough!
Creating your own master page is truly the best way to customize the SharePoint interface Use a starter template
Add only the components and controls that you need
Create your own HTML structure
Style your HTML with attached CSS style sheets
![Page 68: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/68.jpg)
Create Your Own Master Page
http://goo.gl/jhfqN Starter-Master-2010-Fixed-Ribbon-v1.1.txt
![Page 69: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/69.jpg)
Create Your Own Master Page
![Page 70: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/70.jpg)
Lab Session #2 Lesson 2: Mastering the Master Page
![Page 71: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/71.jpg)
Part Two
Styling & Branding SharePoint 2010
![Page 72: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/72.jpg)
Reset your CSS.
![Page 73: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/73.jpg)
SharePoint 2010 CSS Reset
http://goo.gl/6Yf2t
![Page 74: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/74.jpg)
Settings & dialog pages.
![Page 75: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/75.jpg)
Settings & Dialog Pages
We’ve been avoiding the “system” master page Controls list views, settings pages, etc.
Pop-up dialog styles
Many other areas of SharePoint use this master page
Your new master page is compatible!
![Page 76: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/76.jpg)
![Page 77: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/77.jpg)
Settings & Dialog Pages
This was a BIG problem in 2007 NOT a problem in
2010!
![Page 78: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/78.jpg)
Settings & Dialog Pages
How they work SharePoint dialogs are floating <iframe/> tags
Loads your entire master page into a dialog window
<html class=“ms-dialog”>
Checks for the “s4-notdlg” class and removes those items
![Page 79: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/79.jpg)
![Page 80: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/80.jpg)
![Page 81: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/81.jpg)
Dialog Style
#wrapper {
width: 960px;
margin: auto;
}
html.ms-dialog #wrapper {
width: 100%;
}
![Page 82: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/82.jpg)
Publishing sites.
![Page 83: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/83.jpg)
Publishing Sites
The “Ribbon” You can add new buttons, tabs, and links
Convenient shortcuts to commonly-used features and functionality
Most ribbon features are admin-focused
Not needed for navigation
Doesn’t add design or content value
LOTS of JavaScript and CSS required to display the ribbon
Why show it on publishing sites?
![Page 84: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/84.jpg)
![Page 85: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/85.jpg)
Hiding the “Ribbon”
http://goo.gl/529lc
![Page 86: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/86.jpg)
Publishing Sites
Page Layouts Grants a lot of control over design
Create content areas, web part zones, etc.
Attach style sheets to your page layouts for even more customization
Add and remove columns for each page layout
![Page 87: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/87.jpg)
Lab Session #3 Lesson 3: Taking the “SharePoint” Out of
SharePoint
![Page 88: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/88.jpg)
SharePoint content.
![Page 89: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/89.jpg)
Web parts
Configurable, modular components Can be added to web part zones and in content areas
Zones are defined on page layouts
![Page 90: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/90.jpg)
Web parts
Editing a web part Common properties to ALL web
parts
Custom properties for each type of web part
![Page 91: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/91.jpg)
Web parts
The web part title All web parts use a few common CSS classes
![Page 92: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/92.jpg)
Web parts
The web part body All web parts use a few common CSS classes
![Page 93: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/93.jpg)
Content query.
![Page 94: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/94.jpg)
Item Styles
A repeating template for each item in the Content Query Web Part
Uses XSLT
![Page 95: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/95.jpg)
Creating an Item Style
![Page 96: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/96.jpg)
CSS and content.
![Page 97: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/97.jpg)
Lab Session #4 Lesson 4: Styling SharePoint Content
![Page 98: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/98.jpg)
CSS and SharePoint Content
Rich content styles Markup styles
Highlight styles
Lists & libraries List views
Calendars
Rows & columns
Site templates Blog
Wikis
Team sites, meeting workspace, etc.
![Page 99: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/99.jpg)
Part Three
Styling & Branding SharePoint 2010
![Page 100: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/100.jpg)
Lab Session #5 Sketching Workshop
![Page 101: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/101.jpg)
Lab Session #6 Experience Workshop
![Page 102: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/102.jpg)
Part Four
Styling & Branding SharePoint 2010
![Page 103: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/103.jpg)
jQuery.
![Page 104: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/104.jpg)
CSS Styles
.article { color: red; }
Select something
Style it!
![Page 105: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/105.jpg)
jQuery
$('.article').hide();
Select something
Do something!
![Page 106: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/106.jpg)
jQuery
$('.article').hide();
$('.article').slideUp();
$('.article').tabs();
$('.article').after('<em>Hello!</em>');
$('.article').css('color', 'red');
![Page 107: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/107.jpg)
jQuery Events
$('.article').click(function(){ // do something });
$('.article').mouseover(function(){ // do something });
![Page 108: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/108.jpg)
jQuery: “Document Ready”
$(document).ready(function({ // do something });
![Page 109: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/109.jpg)
jQuery in SharePoint.
![Page 110: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/110.jpg)
Image Carousel.
![Page 111: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/111.jpg)
Image Carousel
Picture Library
Content Query WP
Item Style jQuery Script
![Page 112: SHAREPOINT STYLING & BRANDING WEEK - Protiviti · Introduction to SharePoint design ... Information architecture Gather information about content Determine audience, users, personas](https://reader034.vdocuments.mx/reader034/viewer/2022050718/5e1698ea3a06b03a3320b427/html5/thumbnails/112.jpg)
Lab Session #6 Lesson 5: Advanced SharePoint Design
Techniques