Mark opened his session by explaining that it would be a "presentation around the concepts behind the themes used ... in order to make SharePoint look good for the end user." Stressing that you don't have to be a designer to enhance the look-and-feel of a SharePoint site, Mark pleaded with attendees to "help us save the planet from the aliens who designed the default SharePoint interface."
To get things started with some eye candy, Mark showed a screenshot of the simple yet effective CSS treatment (full deck on slideshare.net) that resulted in a sleek looking SharePoint site. Mark reiterated that creating such an interface doesn't require a designer, and that "a site manager can do it. The dramatic changes to the look-and-feel that he was talking about can be accomplished simply through changes to the font, fills, and borders. As Mark put it, these are "simple ways to make changes that will really make a difference to your site."
Mark said that his approach is "to break down the interface into manageable chunks: the header/top of page, the Quick Launch, and the content area." Mark then demonstrated that by changing just the title backgrounds on a page to black, that one simple color "change will make an immediate impact on your end user."
Following a brief review of the default SharePoint 2010 interface, Mark said of making basic changes to the CSS, "changing the font can make a really nice, subtle change to your site." He also brought up an important caveat regarding font changes: Make sure the people using the site will have the font on their machine. Of borders around all objects on a page, Mark said that the fill color is another area you can easily make a difference with a change from the default.
Moving on to the topic of browser-based tools, Mark said, "There are developer tools in all of the major browsers now." He explained that what this means is that, in real-time, you can experiment with changes to a site, and see your changes immediately in the browser - without any danger of breaking the site. Mark praised Heather Solomon for having documented all of the major CSS classes in both 2007 and 2010, calling her efforts "an indispensable resource." Heather Solomon and Benjamin Niaulin are Mark's go-to resources to help get a handle on the over 7,000 lines of CSS code in SharePoint.
Addressing the font in the default interface, Mark's advice is that you "get a handle on the body tag" (and how to override it), since this is where you will make most of the changes (font, fill color, border) throughout your site. "The entire page font is inherited from the body tag," making changes that much easier to accomplish.
Mark said that, "In my experience, the header is the thing that people will notice immediately if you make a change." One tip he offered is that increasing the default font size can help with legibility. Font, border, and background are the three specific areas in the code that you'll be looking to change to accomplish your desired changes. Again, Mark suggests that Heather Solomon's sheet will help.
With enhancements to the global navigation font, you can change the font family, color, size, padding, margins, and more. Mark showed a variety of examples of the overall effect on site look and feel just by making these kinds of changes to the header. As a bonus, templates of all of Mark's examples, with the colors / look and feel shown are available for free at NothingButBranding.com.
With changes similar to the ones just discussed, Mark also showed examples of an enhanced Quick Launch, explaining that these are simple changes "to make [Quick Launch] a little more user-friendly on mouseover."
Of the content area on a page, Mark said it's "just default all the way across: everything inherits." The content area is composed of Web Parts, so it's in those Web Parts that changes need to be made in order for your efforts to be most effective in terms of matching your changes in the header and Quick Launch.
In conclusion, Mark suggested that you get a handle on the code using: the available developer tools in the browser; Heather's and Benjamin's resources; and help yourself to some of the free templates from NothingButBranding.com, and you'll be on your way.
Sharing the Point Africa Tour is made possible through the generous sponsorship of Colligo.
All sessions on the STP Africa Tour:
Posted
Sep 17 2012, 10:00 AM
by
John Anderson
Filed under: CSS, Mark Miller, Heather Solomon, STP Africa, Sharing the Point Africa, SharePoint Interface Enhancements, NothingButBranding, #STPAfrica, SharePoint 2010 UI, CSS Classes, Benjamin Niaulin, Free SharePoint Templates, #SPSCPT, SharePoint Saturday Cape Town
John Anderson joined Bamboo Solutions as Manager of Content & Syndication in May of 2008 after a 12-year career at AOL. New to SharePoint at the time of his hiring, John was tasked with creating a new blog for the just-launched Bamboo Nation community in which he would document his daily SharePoint learning process. Thus was born the end user-centric SharePoint Blank, for which John authored 200 posts within a year, and which he continues to write today (albeit much more sporadically). Currently serving as Managing Editor, John sets the tone for Bamboo Nation as its lead blogger, and oversees content across Bamboo properties.