LOGIN | REGISTER NOW | SUBSCRIBE
 
print Printable version 
Most Read Latest News Blog Resources
Does Windows cost Microsoft opportunities?
Microsoft's decision to focus .NET on Windows is stifling innovation due to the specter of...

Mono brings .NET to Android
At Microsoft MIX, Mono will unveil the ability to port .NET applications to the Android op...

OSBC focus turns to best practices for open-source adoption
Businesses are no longer asking why they should adopt, but how do they use open source leg...

Digg!  Digg
Reddit  Reddit
Slashdot  Slashdot
Share on facebook  Facebook
Share on Twitter  Twitter

Share Pointers: Quick Branding


By Randy Drisgill
November 26, 2008 — 
I was talking to a group about SharePoint Branding recently and was asked what kind of branding a group of consultants could use without writing custom code (including not making themes or master pages). I decided that the best solution for them would be the Alternate CSS capabilities that come with Microsoft Office SharePoint Server 2007 (MOSS) in Publishing sites. Note: This technique is for a quick-branding solution only, not for completely restyling a SharePoint site. Also, please ensure you have a MOSS Publishing site with the default master page selected, because you cannot use this technique without that.

To begin, pick an out-of-the-box SharePoint theme that you think will look good with your company’s logo or colors by clicking Site Actions > Site Settings > Modify All Site Settings and then select Site Theme. Next, you will need to create a header graphic (including a logo on the left) that is about 125 pixels high and that can span the entire width of the browser. If you don’t know how wide to make it, err on the side of really wide. Because the graphic will be used as a CSS background image, anything over the width of the browser will be hidden. Name this graphic QuickBranding.jpg and upload it to your SharePoint site’s Style Library. To do this, click Site Actions > Manage Content and Structure and from there, select Style Library from the list of files and directories on the left-hand side. The Style Library will load on the right-hand side. From there, click New > Item and upload your header image. Next, create a new text file in Notepad and add the following CSS code:

.ms-main { background: white url('/Style Library/QuickBranding.jpg') no-repeat scroll left top !important; }
.ms-globalbreadcrumb, .ms-globalTitleArea, .ms-bannerContainer { background: transparent none !important; }
.ms-globalTitleArea { height: 75px; }
td.ms-titleimagearea img, .ms-sitetitle h1.ms-sitetitle { display: none; }
td.ms-globalbreadcrumb { border:0px transparent none !important; }
td.ms-globallinks { white-space:nowrap; }

Save the file as QuickBranding.css and upload it to the Style Library using the same method as the header graphic. This CSS will hide the site title and icon as well as all of the background images and colors that show in the header section. It then shows your QuickBranding.jpg in their place.

Next, you need to Publish the CSS and header image. To do this from the Manage Content and Structure screen, click beside both of their filenames (QuickBranding.jpg and QuickBranding.css) and select Publish for each of them.

Finally, you need to apply the Alternate CSS for the site. Click Site Actions > Site Settings > Modify All Site Settings and select Master Page. For the Alternate CSS URL setting, enter Style Library/QuickBranding.css and then click the checkbox to Reset all subsites to inherit this alternate CSS URL.

That’s all you have to do to apply the Quick Branding. You should now see your custom header image at the top of the page behind all of the SharePoint functionality.

Example Source: www.sharepoint911.com/Downloads/QuickBranding.zip

Randy Drisgill is branding and UI lead at SharePoint 911, a technology consultant company.


Related Search Term(s): SharePoint


Share this link: http://www.sdtimes.com/link/33084
 

Add comment


Name*
Email*  
Country     


  • Comment
  • Preview
Loading



 
 
 
 
News on Monday
more>>
SharePoint Tech Report
more>>


   

 
 
Download Current Issue
ISSUE 3/15/2010 PDF

Need Back Issues?
DOWNLOAD HERE

Receive the print Edition?


 
blogs tab
Google Code turns 5
Google Code Turns 5, and adds a Paxos Algorithm to make the system more stable and reliable.
03/17/2010 11:16 AM EST

Test your Visual Studio 2010 know-how
Microsoft is offering free beta certification exams for Visual Studio 2010.
03/17/2010 11:08 AM EST

Microsoft lifts the hood on IE9
Microsoft is previewing IE9.
03/16/2010 01:10 PM EST

 

Events calendar tab
EclipseCon
3/22/2010 to 3/25/2010
Santa Clara, Calif.
The Eclipse Foundation

DevConnections
4/12/2010 to 4/14/2010
Las Vegas
Penton Media

MySQL Conf. and Expo
4/12/2010 to 4/15/2010
Santa Clara, Calif.
O'Reilly Media

High Performance Computing Linux Financial Markets
4/19/2010
New York City
Flagg Management

Informix User Conf.
4/25/2010 to 4/28/2010
Overland Park, Kans.
IIUG