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

2,948 views

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,948
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
43
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.
  • 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

    ×