• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Re-Experience SharePoint - Ripping Apart the Interface on SharePoint 2010
 

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

on

  • 2,671 views

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 ...

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.

Statistics

Views

Total Views
2,671
Views on SlideShare
2,669
Embed Views
2

Actions

Likes
1
Downloads
36
Comments
0

2 Embeds 2

http://us-w1.rockmelt.com 1
https://si0.twimg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Re-Experience SharePoint - Ripping Apart the Interface on SharePoint 2010 Presentation Transcript

  • Re-Experience SharePointInterface Enhancements inSharePoint 2010 Re-Experience SharePoint
  • Mark Miller, @euspFounder and Editor, EndUserSharePointCo-Founder, NothingButSharePoint Re-Experience SharePoint
  • Re-Experience SharePoint
  • NothingButSharePoint Re-Experience SharePoint
  • 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
  • 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 SharePoint
  • 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; background-color: white; margin: 0px; padding: 0px;} Re-Experience SharePoint
  • 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
  • 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
  • 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: 8pt; color: #676767; background-color: white; margin: 0px; padding: 0px; Re-Experience SharePoint
  • 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
  • Site Actions Fill: Defaultbody #s4-ribbonrow{ min-height:43px; /* [ReplaceColor(themeColor:"Dark2", themeShade:"0.9")] */ background-color:#21374c; overflow- y:hidden; } Re-Experience SharePoint
  • Site Actions: Enhanced CSS 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: Default CSS Re-Experience SharePoint
  • 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
  • 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
  • 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
  • Title Area: Enhanced CSS 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: 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
  • 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
  • Global Navigation: Default CSS Re-Experience SharePoint
  • 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
  • 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
  • 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
  • Global Nav: Enhanced CSS 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: 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
  • 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
  • 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; 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 : Enhanced CSS 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: Default CSS 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: Enhanced CSS 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: CSS 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: Enhanced CSS 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 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; 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: Enhanced CSS 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 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