Re-Experience SharePoint - Ripping Apart the Interface on SharePoint 2010
-
Upload
endusersharepoint -
Category
Technology
-
view
2.566 -
download
0
description
Transcript of Re-Experience SharePoint - Ripping Apart the Interface on SharePoint 2010
Re-Experience SharePoint
Re-Experience SharePoint
Interface Enhancements in
SharePoint 2010
Re-Experience SharePoint
Mark Miller, @eusp
Founder and Editor, EndUserSharePointCo-Founder, NothingButSharePoint
Re-Experience SharePoint
Re-Experience SharePoint
My SharePoint Destinations
International
Montreal
Ottawa
Toronto
Birmingham, UK
London
Nottingham, UK
Dubai
Sydney
Canberra, AU
Wellington, NZ
Philippines
Beijing
Shanghai
Switzerland
France
Uruguay
Argentian
Chile
Antarctica
United States
Virginia
Michigan
Florida
Denver
New York City
San Francisco
Los Angeles
Washington DC
Baltimore
Philidelphia
Boston
Re-Experience SharePoint
Re-Experience SharePoint
SharePoint 2010 Interface Overview
Default Interface, CSS Refresher
Re-Experience SharePoint
Font: Default Interface
body {
font-family: Verdana,Arial,sans-serif;
font-size: 8pt;
color: #676767;
background-color: white;
margin: 0px;
padding: 0px;
}
Re-Experience SharePoint
Borders: Default Interface
body #s4-leftpanel-content {
padding: 0px 0px 5px;
background-color: #FCFCFC;
border: 1px solid #DBDDDE;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0px;
}
Re-Experience SharePoint
Fill: Default Interface
body #s4-leftpanel-content {
padding: 0px 0px 5px;
background-color: #FCFCFC;
border: 1px solid #DBDDDE;
border-top-width: 0px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 0px;
}
Re-Experience SharePoint
Re-Experience SharePoint
Header Overview
Site Actions, Site Title, Global Nav
Re-Experience SharePoint
Site Actions Font: Default
/* Entire page font inherited from body
font-family: Verdana,Arial,sans-serif;
font-size: 8pt;
color: #676767;
background-color: white;
margin: 0px;
padding: 0px;
Re-Experience SharePoint
Site Actions Border: Default
body #s4-ribbonrow{
min-height:43px; /*
[ReplaceColor(themeColor:"Dark2",themeShad
e:"0.9")] */ background-color:#21374c; overflow-
y:hidden;
/* border: 1px solid red;
}
Re-Experience SharePoint
Site Actions Fill: Default
body #s4-ribbonrow{
min-height:43px;
/* [ReplaceColor(themeColor:"Dark2",
themeShade:"0.9")]
*/ background-color:#21374c; overflow-
y:hidden;
}
Re-Experience SharePoint
Site Actions Font: Enhanced
/* Site action button */
.ms-siteactionsmenuhover {
border-color:#FFFFFF;
background:none;
background-color:transparent;
font-size: 25px !important;
}
Re-Experience SharePoint
Site Actions Borders: Enhanced
/* Site action button */
.ms-siteactionsmenuhover {
border-color:#FFFFFF;
background:none;
background-color:transparent;
font-size: 25px !important;
}
Re-Experience SharePoint
Site Actions Fill: Enhanced
/* Site action button */
.ms-siteactionsmenuhover {
border-color:#FFFFFF;
background:none;
background-color:transparent;
font-size: 25px !important;
}
Re-Experience SharePoint
Title Area Font: Default
body #s4-topheader2{
background:url("/_layouts/images/selbg.png") repeat-x
left top;
background-color:#f6f6f6;
vertical-align:middle;
min-height:25px;
border-top:1px solid #e0e0e0;
border-bottom:1px solid #b8babd;
}
Re-Experience SharePoint
Title Area Borders: Default
body #s4-topheader2{
background:url("/_layouts/images/selbg.png") repeat-x
left top;
background-color:#f6f6f6;
vertical-align:middle;
min-height:25px;
border-top:1px solid #e0e0e0;
border-bottom:1px solid #b8babd;
}
Re-Experience SharePoint
Title Area Fill: Default
body #s4-topheader2{
background:url("/_layouts/images/selbg.png") repeat-x
left top;
background-color:#f6f6f6;
vertical-align:middle;
min-height:25px;
border-top:1px solid #e0e0e0;
border-bottom:1px solid #b8babd;
}
Re-Experience SharePoint
Title Area Font: Enhanced
.s4-breadcrumb-anchor:hover, .s4-breadcrumb-anchor-
open, .ms-qatbutton:hover {
border-color:#FFFFFF;
background:none;
background-color:transparent;
font-size: 25px;
}
Re-Experience SharePoint
Title Area Borders: Enhanced
background:url("/_layouts/images/selbg.png") repeat-x left
top;
background-color:#f6f6f6;
vertical-align:middle;
min-height:25px;
/* border-top:1px solid #e0e0e0; - HIDDEN
/* border-bottom:1px solid #b8babd; - HIDDEN
Re-Experience SharePoint
Title Area Fill: Enhanced
background:url("/_layouts/images/selbg.png") repeat-x left
top;
background-color:#f6f6f6;
vertical-align:middle;
min-height:25px;
/* border-top:1px solid #e0e0e0; - HIDDEN
/* border-bottom:1px solid #b8babd; - HIDDEN
Re-Experience SharePoint
Global Nav Font: Default
body #s4-topheader2{
/* [RecolorImage(themeColor:"Light1")] */
background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Light2")] */
background-color:#f6f6f6;
vertical-align:middle;
min-height:25px;
/* [ReplaceColor(themeColor:"Light2-Lightest")] */
border-top:1px solid #e0e0e0;
/* [ReplaceColor(themeColor:"Light2-Lighter")] */
border-bottom:1px solid #b8babd;
}
Re-Experience SharePoint
Global Nav Borders: Default
body #s4-topheader2{
/* [RecolorImage(themeColor:"Light1")] */
background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Light2")] */
background-color:#f6f6f6;
vertical-align:middle;
min-height:25px;
/* [ReplaceColor(themeColor:"Light2-Lightest")] */
border-top:1px solid #e0e0e0;
/* [ReplaceColor(themeColor:"Light2-Lighter")] */
border-bottom:1px solid #b8babd;
}
Re-Experience SharePoint
Global Nav Fill: Default
body #s4-topheader2{
/* [RecolorImage(themeColor:"Light1")] */
background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Light2")] */
background-color:#f6f6f6;
vertical-align:middle;
min-height:25px;
/* [ReplaceColor(themeColor:"Light2-Lightest")] */
border-top:1px solid #e0e0e0;
/* [ReplaceColor(themeColor:"Light2-Lighter")] */
border-bottom:1px solid #b8babd;
}
Re-Experience SharePoint
Global Nav Font: Enhanced
.s4-toplinks .s4-tn a {
background:none;
border:0px;
color:#cccccc;
font-family:'Verdana';
font-size:14px;
padding:0px;
margin:0px;
height:50px;
text-decoration:none !important;
}
Re-Experience SharePoint
Global Nav Borders: Enhanced
body #s4-topheader2 {
margin-top:20px;
margin-bottom:20px;
height:50px;
background-
image:url("/Style%20Library/Images/bg_globalnav.png");
border-top:none;
border-bottom:none;
}
Re-Experience SharePoint
Global Nav Fill: Enhanced
body #s4-topheader2 {
margin-top:20px; /* Add padding on top of the global nav container */
margin-bottom:20px; /* Add padding on bottom of the global nav
container */
height:50px; /* Set the height of the global nav container */
background-image:url("/Style%20Library/Images/bg_globalnav.png");
/* Change background image to the global nav container */
border-top:none;
border-bottom:none;
}
Re-Experience SharePoint
Re-Experience SharePoint
The Quick Launch
Create a New Experience
Re-Experience SharePoint
Quick Launch Font: Default
.s4-ql,.s4-specialNavLinkList{
list-style-type:none;
margin:0px 0px 20px 0px;
padding:0px;
}
Re-Experience SharePoint
Quick Launch Border: Default
.s4-ql,.s4-specialNavLinkList{
list-style-type:none;
margin:0px 0px 20px 0px;
padding:0px;
}
Re-Experience SharePoint
Quick Launch Fill: Default
.s4-ql,.s4-specialNavLinkList{
list-style-type:none;
margin:0px 0px 20px 0px;
padding:0px;
/* No fill
}
Re-Experience SharePoint
Quick Launch Font: Enhanced
body #s4-leftpanel-content {
border:none; /* Remove the QL borders */
background-color:transparent;
/* Inherits body font
}
Re-Experience SharePoint
Quick Launch Borders: Enhanced
body #s4-leftpanel-content {
border:none; /* Remove the QL borders */
background-color:transparent;
}
Re-Experience SharePoint
Quick Launch Fill: Enhanced
body #s4-leftpanel-content {
border:none; /* Remove the QL borders */
background-color:transparent;
}
Re-Experience SharePoint
QL Main Links Font: Default
.s4-tn li.static > .menu-item{
/* [ReplaceColor(themeColor:"Dark2")]
*/ color:#3b4f65; white-space:nowrap;
border:1px solid transparent;
padding:4px 10px;
display:inline-block;
height:15px;
vertical-align:middle;
/* Inherits from body
}
Re-Experience SharePoint
QL Main Links Borders: Default
.s4-tn li.static > .menu-item{
/* [ReplaceColor(themeColor:"Dark2")]
*/ color:#3b4f65; white-space:nowrap;
border:1px solid transparent;
padding:4px 10px;
display:inline-block;
height:15px;
vertical-align:middle;
}
Re-Experience SharePoint
QL Main Links Fill: Default
.s4-tn li.static > .menu-item{
/* [ReplaceColor(themeColor:"Dark2")]
*/ color:#3b4f65; white-space:nowrap;
border:1px solid transparent;
padding:4px 10px;
display:inline-block;
height:15px;
vertical-align:middle;
/* No fill
}
Re-Experience SharePoint
QL Main Links Font: Enhanced
.menu-vertical > ul.root > li.static > .menu-item {
color:#000000;
font-size:14px;
font-family:'Verdana';
border-bottom:1px solid #000000;
padding-bottom:5px;
}
Re-Experience SharePoint
QL Main Links Borders: Enhanced
.menu-vertical > ul.root > li.static > .menu-item {
color:#000000;
font-size:14px;
font-family:'Verdana';
border-bottom:1px solid #000000;
padding-bottom:5px;
}
Re-Experience SharePoint
QL Main Links Fill: Enhanced
.menu-vertical > ul.root > li.static > .menu-item {
color:#000000;
font-size:14px;
font-family:'Verdana';
border-bottom:1px solid #000000;
padding-bottom:5px;
/* NO FILL
}
Re-Experience SharePoint
QL Sub Links Font: Default
.single-level-menu .menu-vertical li.static{
border-bottom: 1px solid #ffffff;
/* Fonts inherited from body
}
Re-Experience SharePoint
QL Sub Links Borders: Default
.single-level-menu .menu-vertical li.static{
border-bottom: 1px solid #ffffff;
}
Re-Experience SharePoint
QL Sub Links Fill: Default
.single-level-menu .menu-vertical li.static{
border-bottom: 1px solid #ffffff;
/* No fill in default
}
Re-Experience SharePoint
QL Sub Links Font: Enhanced
.menu-vertical > ul.root > li.static > ul.static > li.static {
padding-left:10px;
}
.menu-vertical > ul.root > li.static > ul.static > li.static:hover {
background-color:#cccccc;
}
.menu-vertical > ul.root > li.static > ul.static > li.static > a {
color:#000000;
font-size:14px;
font-family:'Verdana';
text-decoration:none;
}
.s4-ql a.selected {
background:none;
background-color:transparent;
border:0px solid transparent !important;
}
Re-Experience SharePoint
QL Sub Links Borders: Enhanced
.menu-vertical > ul.root > li.static > ul.static > li.static {
padding-left:10px;
}
.menu-vertical > ul.root > li.static > ul.static > li.static:hover {
background-color:#cccccc;
}
.menu-vertical > ul.root > li.static > ul.static > li.static > a {
color:#000000;
font-size:14px;
font-family:'Verdana';
text-decoration:none;
}
.s4-ql a.selected {
background:none;
background-color:transparent;
border:0px solid transparent !important;
}
Re-Experience SharePoint
QL Sub Links Fill: Enhanced
.menu-vertical > ul.root > li.static > ul.static > li.static {
padding-left:10px;
}
.menu-vertical > ul.root > li.static > ul.static > li.static:hover {
background-color:#cccccc;
}
.menu-vertical > ul.root > li.static > ul.static > li.static > a {
color:#000000;
font-size:14px;
font-family:'Verdana';
text-decoration:none;
}
.s4-ql a.selected {
background:none;
background-color:transparent;
border:0px solid transparent !important;
}
Re-Experience SharePoint
Re-Experience SharePoint
The Content Area
Create a New Experience
Re-Experience SharePoint
Content Area Font: Default
.s4-ca{
/* [ReplaceColor(themeColor:"Light1")]
*/ background:#fff;
margin-left:155px;
margin-right:0px;
min-height:324px;
/* Inherited from body
}
Re-Experience SharePoint
Content Area Borders: Default
.s4-ca{
/* [ReplaceColor(themeColor:"Light1")]
*/ background:#fff;
margin-left:155px;
margin-right:0px;
min-height:324px;
/* No borders
}
Re-Experience SharePoint
Content Area Fill: Default
.s4-ca{
/* [ReplaceColor(themeColor:"Light1")]
*/ background:#fff;
margin-left:155px;
margin-right:0px;
min-height:324px;
}
Re-Experience SharePoint
Content Area Font: Enhanced
/* Default used
.s4-ca{
/* [ReplaceColor(themeColor:"Light1")]
*/ background:#fff;
margin-left:155px;
margin-right:0px;
min-height:324px;
}
Re-Experience SharePoint
Content Area Borders: Enhanced
/* Default used
.s4-ca{
/* [ReplaceColor(themeColor:"Light1")]
*/ background:#fff;
margin-left:155px;
margin-right:0px;
min-height:324px;
}
Re-Experience SharePoint
Content Area Fill: Enhanced
/* Default used
.s4-ca{
/* [ReplaceColor(themeColor:"Light1")]
*/ background:#fff;
margin-left:155px;
margin-right:0px;
min-height:324px;
}
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Putting it all together
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Conclusion:
7000+ Lines of CSS in
SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Interface Enhancements in
SharePoint 2010