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.
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
Virginia
My SharePoint Destinations Michigan
Florida
Denver
New York City
San Francisco
Los Angeles
Washington DC
Baltimore
Philidelphia
Boston
Re-Experience SharePoint
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. Global Nav Borders: Enhanced
body #s4-topheader2 {
margin-top:20px;
margin-bottom:20px;
height:50px;
background-
image:url("/Style%20Library/Images/bg_globalnav.png");
border-top:none;
border-bottom:none;
}
Re-Experience SharePoint
60. Global Nav Fill: Enhanced
body #s4-topheader2 {
margin-top:20px; /* Add padding on top of the global nav container */
margin-bottom:20px; /* Add padding on bottom of the global nav
container */
height:50px; /* Set the height of the global nav container */
background-image:url("/Style%20Library/Images/bg_globalnav.png");
/* Change background image to the global nav container */
border-top:none;
border-bottom:none;
}
Re-Experience SharePoint
Re-Experience SharePoint 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.
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
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 */}
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
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.