0
Re-Experience SharePointInterface Enhancements inSharePoint 2010                            Re-Experience SharePoint
Mark Miller, @euspFounder and Editor, EndUserSharePointCo-Founder, NothingButSharePoint                                  R...
Re-Experience SharePoint
NothingButSharePoint                       Re-Experience SharePoint
International                                      Montreal                                      Ottawa                   ...
NothingButBranding                     Re-Experience SharePoint
NothingButBranding                     Re-Experience SharePoint
#SPTechConTwitter Hash               Re-Experience SharePoint
AgendaRe-Experience SharePoint                           Re-Experience SharePoint
Explore SharePoint 2010 Interface                            Re-Experience SharePoint
Examine Basic CSS Classes                       Re-Experience SharePoint
Re-Experience SharePoint                           Re-Experience SharePoint
Re-Experience SharePoint
SharePoint 2010 Interface OverviewDefault Interface, CSS Refresher                                   Re-Experience SharePo...
Default Interface                    Re-Experience SharePoint
Areas for Enhancement                        Re-Experience SharePoint
Enhanced Interface                     Re-Experience SharePoint
CSSBasic Review for Beginners                             Re-Experience SharePoint
Basic CSS Changes                    Re-Experience SharePoint
Font       Re-Experience SharePoint
Borders          Re-Experience SharePoint
Fill       Re-Experience SharePoint
How To Find CSS Classes                          Re-Experience SharePoint
Browser Tools                Re-Experience SharePoint
SharePoint Experience                        Re-Experience SharePoint
Home Page CSS Reference                     Re-Experience SharePoint
What the CSS Looks Like                          Re-Experience SharePoint
Font: Default Interfacebody {    font-family: Verdana,Arial,sans-serif;    font-size: 8pt;    color: #676767;    backgroun...
Borders: Default Interfacebody #s4-leftpanel-content {   padding: 0px 0px 5px;   background-color: #FCFCFC;   border: 1px ...
Fill: Default Interfacebody #s4-leftpanel-content {   padding: 0px 0px 5px;   background-color: #FCFCFC;   border: 1px sol...
Re-Experience SharePoint
The HeaderCreate a New Experience                          Re-Experience SharePoint
Header OverviewSite Actions, Site Title, Global Nav                               Re-Experience SharePoint
Interface: Default                     Re-Experience SharePoint
Header: Default                  Re-Experience SharePoint
Header: Enhanced                   Re-Experience SharePoint
Site Actions: Default CSS                            Re-Experience SharePoint
Site Actions Font: Default/* Entire page font inherited from body   font-family: Verdana,Arial,sans-serif;   font-size: 8p...
Site Actions Border: Defaultbody #s4-ribbonrow{     min-height:43px; /*    [ReplaceColor(themeColor:"Dark2",themeShad    e...
Site Actions Fill: Defaultbody #s4-ribbonrow{    min-height:43px;   /* [ReplaceColor(themeColor:"Dark2",   themeShade:"0.9...
Site Actions: Enhanced CSS                        Re-Experience SharePoint
Site Actions Font: Enhanced/* Site action button */.ms-siteactionsmenuhover {        border-color:#FFFFFF;        backgrou...
Site Actions Borders: Enhanced/* Site action button */.ms-siteactionsmenuhover {        border-color:#FFFFFF;        backg...
Site Actions Fill: Enhanced/* Site action button */.ms-siteactionsmenuhover {        border-color:#FFFFFF;        backgrou...
Title Area: Default CSS                          Re-Experience SharePoint
Title Area Font: Defaultbody #s4-topheader2{   background:url("/_layouts/images/selbg.png") repeat-x   left top;   backgro...
Title Area Borders: Defaultbody #s4-topheader2{   background:url("/_layouts/images/selbg.png") repeat-x   left top;   back...
Title Area Fill: Defaultbody #s4-topheader2{   background:url("/_layouts/images/selbg.png") repeat-x   left top;   backgro...
Title Area: Enhanced CSS                           Re-Experience SharePoint
Title Area Font: Enhanced.s4-breadcrumb-anchor:hover, .s4-breadcrumb-anchor-open, .ms-qatbutton:hover {       border-color...
Title Area Borders: Enhancedbackground:url("/_layouts/images/selbg.png") repeat-x lefttop;background-color:#f6f6f6;vertica...
Title Area Fill: Enhancedbackground:url("/_layouts/images/selbg.png") repeat-x lefttop;background-color:#f6f6f6;vertical-a...
Global Navigation: Default CSS                            Re-Experience SharePoint
Global Nav Font: Defaultbody #s4-topheader2{/* [RecolorImage(themeColor:"Light1")] */ background:url("/_layouts/images/sel...
Global Nav Borders: Defaultbody #s4-topheader2{/* [RecolorImage(themeColor:"Light1")] */ background:url("/_layouts/images/...
Global Nav Fill: Defaultbody #s4-topheader2{/* [RecolorImage(themeColor:"Light1")] */ background:url("/_layouts/images/sel...
Global Nav: Enhanced CSS                       Re-Experience SharePoint
Global Nav Font: Enhanced.s4-toplinks .s4-tn a {          background:none;          border:0px;          color:#cccccc;   ...
Global Nav Borders: Enhancedbody #s4-topheader2 {       margin-top:20px;       margin-bottom:20px;       height:50px;     ...
Global Nav Fill: Enhancedbody #s4-topheader2 {         margin-top:20px; /* Add padding on top of the global nav container ...
Re-Experience the Header                           Re-Experience SharePoint
Midnight Black                 Re-Experience SharePoint
Burgundy Wine                Re-Experience SharePoint
Smooth Slate               Re-Experience SharePoint
Indian Turquoise                   Re-Experience SharePoint
Deep Ocean Aqua                  Re-Experience SharePoint
Re-Experience SharePoint
The Quick LaunchCreate a New Experience                          Re-Experience SharePoint
Quick Launch: Default CSS                        Re-Experience SharePoint
Quick Launch Font: Default     .s4-ql,.s4-specialNavLinkList{        list-style-type:none;        margin:0px 0px 20px 0px;...
Quick Launch Border: Default     .s4-ql,.s4-specialNavLinkList{        list-style-type:none;        margin:0px 0px 20px 0p...
Quick Launch Fill: Default     .s4-ql,.s4-specialNavLinkList{        list-style-type:none;        margin:0px 0px 20px 0px;...
Quick Launch : Enhanced CSS                         Re-Experience SharePoint
Quick Launch Font: Enhanced     body #s4-leftpanel-content {            border:none; /* Remove the QL borders */          ...
Quick Launch Borders: Enhanced     body #s4-leftpanel-content {            border:none; /* Remove the QL borders */       ...
Quick Launch Fill: Enhanced     body #s4-leftpanel-content {            border:none; /* Remove the QL borders */          ...
QL Main Links: Default CSS                        Re-Experience SharePoint
QL Main Links Font: Default     .s4-tn li.static > .menu-item{        /* [ReplaceColor(themeColor:"Dark2")]        */ colo...
QL Main Links Borders: Default     .s4-tn li.static > .menu-item{         /* [ReplaceColor(themeColor:"Dark2")]         */...
QL Main Links Fill: Default     .s4-tn li.static > .menu-item{        /* [ReplaceColor(themeColor:"Dark2")]        */ colo...
QL Main Links: Enhanced CSS                       Re-Experience SharePoint
QL Main Links Font: Enhanced     .menu-vertical > ul.root > li.static > .menu-item {           color:#000000;           fo...
QL Main Links Borders: Enhanced     .menu-vertical > ul.root > li.static > .menu-item {           color:#000000;          ...
QL Main Links Fill: Enhanced     .menu-vertical > ul.root > li.static > .menu-item {           color:#000000;           fo...
QL Sub Links: CSS                    Re-Experience SharePoint
QL Sub Links Font: Default     .single-level-menu .menu-vertical li.static{     border-bottom: 1px solid #ffffff;     /* F...
QL Sub Links Borders: Default     .single-level-menu .menu-vertical li.static{     border-bottom: 1px solid #ffffff;     }...
QL Sub Links Fill: Default     .single-level-menu .menu-vertical li.static{     border-bottom: 1px solid #ffffff;     /* N...
QL Sub Links: Enhanced CSS                       Re-Experience SharePoint
QL Sub Links Font: Enhanced      .menu-vertical > ul.root > li.static > ul.static > li.static {                 padding-le...
QL Sub Links Borders: Enhanced      .menu-vertical > ul.root > li.static > ul.static > li.static {                 padding...
QL Sub Links Fill: Enhanced      .menu-vertical > ul.root > li.static > ul.static > li.static {                 padding-le...
Re-Experience the Quick Launch                          Re-Experience SharePoint
Midnight Black                 Re-Experience SharePoint
Burgundy Wine                Re-Experience SharePoint
Smooth Slate               Re-Experience SharePoint
Indian Turquoise                   Re-Experience SharePoint
Deep Ocean Aqua                  Re-Experience SharePoint
Re-Experience SharePoint
The Content AreaCreate a New Experience                          Re-Experience SharePoint
Content Area: Default CSS                        Re-Experience SharePoint
Content Area Font: Default.s4-ca{   /* [ReplaceColor(themeColor:"Light1")]   */ background:#fff;   margin-left:155px;   ma...
Content Area Borders: Default.s4-ca{   /* [ReplaceColor(themeColor:"Light1")]   */ background:#fff;   margin-left:155px;  ...
Content Area Fill: Default.s4-ca{   /* [ReplaceColor(themeColor:"Light1")]   */ background:#fff;   margin-left:155px;   ma...
Content Area: Enhanced CSS                       Re-Experience SharePoint
Content Area Font: Enhanced/* Default used    .s4-ca{    /* [ReplaceColor(themeColor:"Light1")]    */ background:#fff;    ...
Content Area Borders: Enhanced/* Default used    .s4-ca{    /* [ReplaceColor(themeColor:"Light1")]    */ background:#fff; ...
Content Area Fill: Enhanced/* Default used    .s4-ca{    /* [ReplaceColor(themeColor:"Light1")]    */ background:#fff;    ...
Re-Experience the Content Area                           Re-Experience SharePoint
Midnight Black: Content                          Re-Experience SharePoint
Burgundy Wine: Content                         Re-Experience SharePoint
Smooth Slate: Content                        Re-Experience SharePoint
Indian Turquoise: Content                            Re-Experience SharePoint
Deep Ocean Aqua: Content                       Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePointPutting it all together                          Re-Experience SharePoint
Default SharePoint 2010 Interface                            Re-Experience SharePoint
Re-Experience SharePoint
Enhanced SharePoint 2010                       Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Premium Experiences                      Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Re-Experience SharePoint
Conclusion:7000+ Lines of CSS inSharePoint                        Re-Experience SharePoint
DownloadNBB Community Color Templates                         Re-Experience SharePoint
Re-Experience SharePointInterface Enhancements inSharePoint 2010                            Re-Experience SharePoint
Upcoming SlideShare
Loading in...5
×

Re-Experience SharePoint - Ripping Apart the Interface on SharePoint 2010

2,575

Published on

How do you get started with branding SharePoint? In this very high level presentation, Mark Miller of NothingButBranding.com walks through the default interface for a SharePoint 2010 team site and shows how you might quickly enhance the interface.


The presentation is an extension of the NothingButrBranding Color Enhancement themes that are available for free download.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,575
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
41
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Re-Experience SharePoint This presentation is for site managers and site collection administrators who would like to have more control over the display in their SharePoint sites. It is a basic investigation of the CSS classes that control the opening page of a SharePoint team site. The icons at the bottom of each slide are navigation to the main sections of the presentation:HomeExamination of the default SharePoint interfaceThe HeaderThe Quick LaunchThe Content AreaExamines of Enhanced SharePoint Experiences
  • About the PresenterMark Miller is recognized internationally as a Senior Storyteller, weaving engaging tales to simplify the explanation of complex, technological solutions. He is the founder of two of the largest, online SharePoint communities in the world: NothingButSharePoint.com and EndUserSharePoint.com. Mark travels internationally from his home base in New York City, speaking on the building of community, methods for using social media to engage an online audience, the uses of SharePoint for enterprise level collaboration, and the future of productivity. His most recent excursion included stops in Argentina, Uruguay, Chile and Antarctica, where he spoke to a colony of penguins on the comparison of on-premises SharePoint implementations vs hosted solutions.
  • NothingButSharePoint: https://www.nothingbutsharepoint.com/Pages/default.aspxEndUserSharePoint: https://www.nothingbutsharepoint.com/sites/eusp/Pages/default.aspxNothingButBranding:http://www.nothingbutbranding.com/
  • I have spoken throughout the world at major SharePoint conferences as well as to small, local enthusiast groups.
  • I am part of a new startup called “NothingButBranding”.
  • Our sole mission is to save the world from the aliens who brought you the default SharePoint interface.
  • What is the agenda for today’s presentation?
  • What is the agenda for today’s presentation?
  • We will explore the SharePoint interface by examining the general areas on the page and exploring the underlying structure.
  • We will examine the CSS classes that drive the display of each of the main areas on a SharePoint team site entrance page.
  • The presentation concludes with examples of what can be done just by changing the color of various elements within the SharePoint page.
  • Default team site screenshot: SharePoint 2010An absolute thing of beauty.
  • Header/Top of PageLeft hand QuickLaunchContent Area
  • Colors, borders, fonts, fill, background, positioning
  • Three references for finding the CSS classes in SharePoint 2010
  • Each of the major browsers have developer tools either built in or available for download. What you see here is the developer view in Google’s Chrome browser.(Show a demo of the browser tool by opening any web page and exposing the underlying structure.)
  • Heather Solomon, The Queen of Theme: The SharePoint Experience CSS Charthttp://sharepointexperience.com/csschart/csschart.html
  • Benjamin Niaulin has written a series of article on CSS and branding in SharePoint 2010. In one of those articles, he does a breakdown of the CSS classes available on the entrance page of a SharePoint 2010 team site.https://www.nothingbutsharepoint.com/sites/eusp/Pages/Brand-SharePoint-SharePoint-Home-Page-CSS-Reference.aspx
  • Colors, borders, fonts, fill, background, positioning
  • Show default CSS w/ font highlighted
  • Show default CSS w/ border highlighted
  • Show default CSS w/ fill highlighted
  • Enhance the header to create a new SharePoint Experience.
  • Header has Three PartsSite Actions (ribbon)Site Title (Logo, title of page, breadcrumbs, social sharing)Global Navigation (navigation, search)
  • Default team site screenshot: SharePoint 2010An absolute thing of beauty.
  • Header/Top of Page
  • 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;}Resource – SharePoint Experience CSS Chart by Heather Solomonhttp://sharepointexperience.com/csschart/csschart.html
  • Resource – SharePoint Experience CSS Chart by Heather Solomonhttp://sharepointexperience.com/csschart/csschart.htmlTakes the one from the body
  • Resource – SharePoint Experience CSS Chart by Heather Solomonhttp://sharepointexperience.com/csschart/csschart.htmlNo borders set by default
  • Resource – SharePoint Experience CSS Chart by Heather Solomonhttp://sharepointexperience.com/csschart/csschart.htmlNo fill set by default
  • /* SITE ACTION *//* Site action bar container */.ms-cui-topBar2 { padding-left:5px;}/* Site action button */.ms-siteactionsmenuhover { border-color:#FFFFFF;background:none;background-color:transparent;}.s4-breadcrumb-anchor:hover, .s4-breadcrumb-anchor-open, .ms-qatbutton:hover { border-color:#FFFFFF;background:none;background-color:transparent;}
  • No change
  • No change
  • No change
  • /* Set height and background color to the top logo container */.s4-title { min-height:100px; /* Min-height of the logo container */ background-color:#FFFFFF;}.s4-titletable { height:100px;}/* Page Title (Link on the right of the logo */.s4-title h1 a, .s4-title h2 a { color:#000000;text-decoration:none;}.s4-title h1 a:hover, .s4-title h2 a:hover {text-decoration:underline;}
  • http://www.youtube.com/watch?v=y-qEbMPJr3Q&list=PLC809F7D32CB7745B&index=2&feature=plpp_videoShow all of CSS for Global Navigation in notes. Only a small subset on slide
  • Enhanced Global Navigation by NothingButBranding/* ----------------------------------------------------------------------- 3- Global navigation ----------------------------------------------------------------------- *//* GLOBAL NAVIGATION */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;}.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;}.s4-toplinks .s4-tn a.selected {background:none; border:0px; color:#cccccc;font-family:'Verdana'; font-size:14px; padding:0px; margin:0px; height:50px;}.s4-toplinks .s4-tn a.selected:hover { color:#000000;text-decoration:none;}.s4-tn { height:50px;}.s4-tn > div { height:50px;}.s4-tn li.static > a:hover { color:#000000;text-decoration:none;}.s4-tn li.static > .menu-item { color:#cccccc; padding:0px;border:none; height:50px; padding-left:15px; padding-right:15px;}.s4-tn li.static > .menu-item > span > span { padding-top:15px; /* Set padding-top to the link in the global nav */}.s4-toplinks .s4-tn a:hover, .s4-toplinks .s4-tn a.selected {background-image:url("/Style%20Library/Images/bg_globalnav-hover.png"); /* Change background image to the global nav container */}.ms-titlerowborder {border-right:none; /* remove right border between logo container and global nav */}/* SEARCH BAR & HELP ICON */.s4-wpTopTable, .s4-help { padding-top:12px; /* Center align search and help icon inside the global nav container */}
  • .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;}
  • .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;}
  • .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;}
  • Example from Community Themes
  • Example from Community Themes
  • Example from Community Themes
  • Enhance the Quick Launch to create a new SharePoint Experience
  • Resource – SharePoint Experience CSS Chart by Heather Solomonhttp://sharepointexperience.com/csschart/csschart.html
  • Resource – SharePoint Experience CSS Chart by Heather Solomonhttp://sharepointexperience.com/csschart/csschart.html
  • Resource – SharePoint Experience CSS Chart by Heather Solomonhttp://sharepointexperience.com/csschart/csschart.html
  • Show all of CSS for title in notes. Only a small subset on slide
  • http://www.youtube.com/watch?v=y-qEbMPJr3Q&list=PLC809F7D32CB7745B&index=2&feature=plpp_videoShow all of CSS for Global Navigation in notes. Only a small subset on slide
  • /* SUB LINKS */.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;}
  • Link – On Hover.s4-toplinks .s4-tn a.selected:hover { color:#000000;text-decoration:none;}
  • Link – On Hover.s4-toplinks .s4-tn a.selected:hover { color:#000000;text-decoration:none;}
  • Link – On Hover.s4-toplinks .s4-tn a.selected:hover { color:#000000;text-decoration:none;}
  • Example from Community Themes
  • Example from Community Themes
  • Example from Community Themes
  • Enhance the content area to create a new SharePoint Experience
  • Resource – SharePoint Experience CSS Chart by Heather Solomonhttp://sharepointexperience.com/csschart/csschart.html
  • Resource – SharePoint Experience CSS Chart by Heather Solomonhttp://sharepointexperience.com/csschart/csschart.html
  • Resource – SharePoint Experience CSS Chart by Heather Solomonhttp://sharepointexperience.com/csschart/csschart.html
  • All stays default because it’s filled with web parts, utilizing over 300 classes.
  • All stays default because it’s filled with web parts, utilizing over 300 classes.
  • All stays default because it’s filled with web parts, utilizing over 300 classes.
  • Example from Community Themes
  • Example from Community Themes
  • Example from Community Themes
  • Put all the pieces back together.. the head, the quick launch, the content area… and you have created a new experience in SharePoint.
  • Here are a few NBB Premium Themes. These are mainly done through color enhancements and the inclusion of a large background image to completely transform the default SharePoint experience.
  • The dark, abstract image in the background draws out the color of the Quick Launch icons in the left column.
  • The dark, abstract image in the background draws out the color of the Quick Launch icons in the left column.
  • This is the same layout, but uses a photograph as the background. It gives a completely different user experience compared to the previous interface.
  • The very large Quick Launch icons are the central focus of this theme. It starts to resemble a Metro style UI. The inclusion of a small, replaceable image in the Quick Launch as a touch of personality to SharePoint which is lacking within the default interface. The background image can be easily changed through the inclusion of various other images within the style library for this theme.
  • This presentation has shown simple ways to change the colors on your site, but in reality, do your really have enough time and resources to do that? Between learning CSS, discovering the classes to make the desired color changes and fixing mistakes along the way, this could be a time consuming process. There is a better way…
  • Enhance the color of your site in as little as 60 seconds. At NothingButBranding we have created a set of color templates that you can download for free. We call these our “Community Color Templates” since we are donating them to the community. The Community Color Templates can be installed by anyone who has site manager privileges. There is no manual installation of multiple CSS files, no adding of images to the style gallery. We’ve made it simple: Choose a color template from our gallery, press the button and Re-Experience SharePoint in less that 60 seconds.Isn’t it time for your team to Re-Experience SharePoint?
  • Thank you for your support in participating in our SharePoint branding community. Please let us know when you enhance your site and the response from your team.
  • Transcript of "Re-Experience SharePoint - Ripping Apart the Interface on SharePoint 2010"

    1. 1. Re-Experience SharePointInterface Enhancements inSharePoint 2010 Re-Experience SharePoint
    2. 2. Mark Miller, @euspFounder and Editor, EndUserSharePointCo-Founder, NothingButSharePoint Re-Experience SharePoint
    3. 3. Re-Experience SharePoint
    4. 4. NothingButSharePoint Re-Experience SharePoint
    5. 5. 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 VirginiaMy SharePoint Destinations Michigan Florida Denver New York City San Francisco Los Angeles Washington DC Baltimore Philidelphia Boston Re-Experience SharePoint
    6. 6. NothingButBranding Re-Experience SharePoint
    7. 7. NothingButBranding Re-Experience SharePoint
    8. 8. #SPTechConTwitter Hash Re-Experience SharePoint
    9. 9. AgendaRe-Experience SharePoint Re-Experience SharePoint
    10. 10. Explore SharePoint 2010 Interface Re-Experience SharePoint
    11. 11. Examine Basic CSS Classes Re-Experience SharePoint
    12. 12. Re-Experience SharePoint Re-Experience SharePoint
    13. 13. Re-Experience SharePoint
    14. 14. SharePoint 2010 Interface OverviewDefault Interface, CSS Refresher Re-Experience SharePoint
    15. 15. Default Interface Re-Experience SharePoint
    16. 16. Areas for Enhancement Re-Experience SharePoint
    17. 17. Enhanced Interface Re-Experience SharePoint
    18. 18. CSSBasic Review for Beginners Re-Experience SharePoint
    19. 19. Basic CSS Changes Re-Experience SharePoint
    20. 20. Font Re-Experience SharePoint
    21. 21. Borders Re-Experience SharePoint
    22. 22. Fill Re-Experience SharePoint
    23. 23. How To Find CSS Classes Re-Experience SharePoint
    24. 24. Browser Tools Re-Experience SharePoint
    25. 25. SharePoint Experience Re-Experience SharePoint
    26. 26. Home Page CSS Reference Re-Experience SharePoint
    27. 27. What the CSS Looks Like Re-Experience SharePoint
    28. 28. Font: Default Interfacebody { font-family: Verdana,Arial,sans-serif; font-size: 8pt; color: #676767; background-color: white; margin: 0px; padding: 0px;} Re-Experience SharePoint
    29. 29. Borders: Default Interfacebody #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
    30. 30. Fill: Default Interfacebody #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
    31. 31. Re-Experience SharePoint
    32. 32. The HeaderCreate a New Experience Re-Experience SharePoint
    33. 33. Header OverviewSite Actions, Site Title, Global Nav Re-Experience SharePoint
    34. 34. Interface: Default Re-Experience SharePoint
    35. 35. Header: Default Re-Experience SharePoint
    36. 36. Header: Enhanced Re-Experience SharePoint
    37. 37. Site Actions: Default CSS Re-Experience SharePoint
    38. 38. 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
    39. 39. Site Actions Border: Defaultbody #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
    40. 40. Site Actions Fill: Defaultbody #s4-ribbonrow{ min-height:43px; /* [ReplaceColor(themeColor:"Dark2", themeShade:"0.9")] */ background-color:#21374c; overflow- y:hidden; } Re-Experience SharePoint
    41. 41. Site Actions: Enhanced CSS Re-Experience SharePoint
    42. 42. Site Actions Font: Enhanced/* Site action button */.ms-siteactionsmenuhover { border-color:#FFFFFF; background:none; background-color:transparent; font-size: 25px !important;} Re-Experience SharePoint
    43. 43. Site Actions Borders: Enhanced/* Site action button */.ms-siteactionsmenuhover { border-color:#FFFFFF; background:none; background-color:transparent; font-size: 25px !important;} Re-Experience SharePoint
    44. 44. Site Actions Fill: Enhanced/* Site action button */.ms-siteactionsmenuhover { border-color:#FFFFFF; background:none; background-color:transparent; font-size: 25px !important;} Re-Experience SharePoint
    45. 45. Title Area: Default CSS Re-Experience SharePoint
    46. 46. Title Area Font: Defaultbody #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
    47. 47. Title Area Borders: Defaultbody #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
    48. 48. Title Area Fill: Defaultbody #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
    49. 49. Title Area: Enhanced CSS Re-Experience SharePoint
    50. 50. 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
    51. 51. Title Area Borders: Enhancedbackground:url("/_layouts/images/selbg.png") repeat-x lefttop;background-color:#f6f6f6;vertical-align:middle;min-height:25px;/* border-top:1px solid #e0e0e0; - HIDDEN/* border-bottom:1px solid #b8babd; - HIDDEN Re-Experience SharePoint
    52. 52. Title Area Fill: Enhancedbackground:url("/_layouts/images/selbg.png") repeat-x lefttop;background-color:#f6f6f6;vertical-align:middle;min-height:25px;/* border-top:1px solid #e0e0e0; - HIDDEN/* border-bottom:1px solid #b8babd; - HIDDEN Re-Experience SharePoint
    53. 53. Global Navigation: Default CSS Re-Experience SharePoint
    54. 54. Global Nav Font: Defaultbody #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
    55. 55. Global Nav Borders: Defaultbody #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
    56. 56. Global Nav Fill: Defaultbody #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
    57. 57. Global Nav: Enhanced CSS Re-Experience SharePoint
    58. 58. 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
    59. 59. Global Nav Borders: Enhancedbody #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
    60. 60. Global Nav Fill: Enhancedbody #s4-topheader2 { margin-top:20px; /* Add padding on top of the global nav container */ margin-bottom:20px; /* Add padding on bottom of the global navcontainer */ 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
    61. 61. Re-Experience the Header Re-Experience SharePoint
    62. 62. Midnight Black Re-Experience SharePoint
    63. 63. Burgundy Wine Re-Experience SharePoint
    64. 64. Smooth Slate Re-Experience SharePoint
    65. 65. Indian Turquoise Re-Experience SharePoint
    66. 66. Deep Ocean Aqua Re-Experience SharePoint
    67. 67. Re-Experience SharePoint
    68. 68. The Quick LaunchCreate a New Experience Re-Experience SharePoint
    69. 69. Quick Launch: Default CSS Re-Experience SharePoint
    70. 70. Quick Launch Font: Default .s4-ql,.s4-specialNavLinkList{ list-style-type:none; margin:0px 0px 20px 0px; padding:0px; } Re-Experience SharePoint
    71. 71. Quick Launch Border: Default .s4-ql,.s4-specialNavLinkList{ list-style-type:none; margin:0px 0px 20px 0px; padding:0px; } Re-Experience SharePoint
    72. 72. Quick Launch Fill: Default .s4-ql,.s4-specialNavLinkList{ list-style-type:none; margin:0px 0px 20px 0px; padding:0px; /* No fill } Re-Experience SharePoint
    73. 73. Quick Launch : Enhanced CSS Re-Experience SharePoint
    74. 74. Quick Launch Font: Enhanced body #s4-leftpanel-content { border:none; /* Remove the QL borders */ background-color:transparent; /* Inherits body font } Re-Experience SharePoint
    75. 75. Quick Launch Borders: Enhanced body #s4-leftpanel-content { border:none; /* Remove the QL borders */ background-color:transparent; } Re-Experience SharePoint
    76. 76. Quick Launch Fill: Enhanced body #s4-leftpanel-content { border:none; /* Remove the QL borders */ background-color:transparent; } Re-Experience SharePoint
    77. 77. QL Main Links: Default CSS Re-Experience SharePoint
    78. 78. 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
    79. 79. 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
    80. 80. 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
    81. 81. QL Main Links: Enhanced CSS Re-Experience SharePoint
    82. 82. 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
    83. 83. 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
    84. 84. 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
    85. 85. QL Sub Links: CSS Re-Experience SharePoint
    86. 86. QL Sub Links Font: Default .single-level-menu .menu-vertical li.static{ border-bottom: 1px solid #ffffff; /* Fonts inherited from body } Re-Experience SharePoint
    87. 87. QL Sub Links Borders: Default .single-level-menu .menu-vertical li.static{ border-bottom: 1px solid #ffffff; } Re-Experience SharePoint
    88. 88. QL Sub Links Fill: Default .single-level-menu .menu-vertical li.static{ border-bottom: 1px solid #ffffff; /* No fill in default } Re-Experience SharePoint
    89. 89. QL Sub Links: Enhanced CSS Re-Experience SharePoint
    90. 90. 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
    91. 91. 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
    92. 92. 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
    93. 93. Re-Experience the Quick Launch Re-Experience SharePoint
    94. 94. Midnight Black Re-Experience SharePoint
    95. 95. Burgundy Wine Re-Experience SharePoint
    96. 96. Smooth Slate Re-Experience SharePoint
    97. 97. Indian Turquoise Re-Experience SharePoint
    98. 98. Deep Ocean Aqua Re-Experience SharePoint
    99. 99. Re-Experience SharePoint
    100. 100. The Content AreaCreate a New Experience Re-Experience SharePoint
    101. 101. Content Area: Default CSS Re-Experience SharePoint
    102. 102. 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
    103. 103. 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
    104. 104. Content Area Fill: Default.s4-ca{ /* [ReplaceColor(themeColor:"Light1")] */ background:#fff; margin-left:155px; margin-right:0px; min-height:324px;} Re-Experience SharePoint
    105. 105. Content Area: Enhanced CSS Re-Experience SharePoint
    106. 106. 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
    107. 107. 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
    108. 108. 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
    109. 109. Re-Experience the Content Area Re-Experience SharePoint
    110. 110. Midnight Black: Content Re-Experience SharePoint
    111. 111. Burgundy Wine: Content Re-Experience SharePoint
    112. 112. Smooth Slate: Content Re-Experience SharePoint
    113. 113. Indian Turquoise: Content Re-Experience SharePoint
    114. 114. Deep Ocean Aqua: Content Re-Experience SharePoint
    115. 115. Re-Experience SharePoint
    116. 116. Re-Experience SharePointPutting it all together Re-Experience SharePoint
    117. 117. Default SharePoint 2010 Interface Re-Experience SharePoint
    118. 118. Re-Experience SharePoint
    119. 119. Enhanced SharePoint 2010 Re-Experience SharePoint
    120. 120. Re-Experience SharePoint
    121. 121. Re-Experience SharePoint
    122. 122. Re-Experience SharePoint
    123. 123. Re-Experience SharePoint
    124. 124. Re-Experience SharePoint
    125. 125. Premium Experiences Re-Experience SharePoint
    126. 126. Re-Experience SharePoint
    127. 127. Re-Experience SharePoint
    128. 128. Re-Experience SharePoint
    129. 129. Re-Experience SharePoint
    130. 130. Re-Experience SharePoint
    131. 131. Conclusion:7000+ Lines of CSS inSharePoint Re-Experience SharePoint
    132. 132. DownloadNBB Community Color Templates Re-Experience SharePoint
    133. 133. Re-Experience SharePointInterface Enhancements inSharePoint 2010 Re-Experience SharePoint
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×