aarebrot.net Frode's blog on Sharepoint and other stuff

Branding BlueBand.master Part 1: Site logo, description and background

Posted on June 11, 2008
VN:F [1.9.22_1171]
Rating: 4.3/5 (3 votes cast)

This is the first of a series of articles covering how to customize the BlueBand.master masterpage that is part of the default Sharepoint installation. In this article I'll take a look at how to customize the header area, which includes the logo and site description as well as a fancy background.

The nice thing about this page is that is has a fairly nice Web 2.0ish layout which can be easily branded for your company.

The downside to blueband.master (and Sharepoint in general unfortunately) is the extremely frequent use of tables as design layout elements. Later I'm going to go through and convert the stock page into a table-less(-ish) design using <div> tags, but for now we'll stick to the original.

The content of the page is organized in a <table> tag with.

It has the following five <tr> tags inside:

  1. The first is empty tag with 0px height
  2. The second is the top bar (my links, login, site actions)
  3. The third is Logo with site name, as well as the navbar
  4. The fourth is the breadcrumb menu
  5. The fifth is the main content of the page (list navigation, web parts, etc)

What we're interested in is enclosed in the third <tr> tag. By using FireBug you can change these properties on the fly while reading this article, to view the effects.

.topArea

This is a <td> tag that actually loads the background image for the header. You can easily change the image and move it around as you see fit by overriding the following in your own CSS:

.topArea
{
  background: transparent url('../../images/bl_band.jpg') no-repeat scroll right top;
}

If your image fades into a color on one side, you may want to change transparent to the color of your choice, depending on what your background color is. If you're fading into white you won't have to worry about this.

You can also move the image to the left side and move the logo and text to the right side.

Example:

.topArea
{
  background: #00ff00 url('../../images/bl_band.jpg') no-repeat scroll left top;
  /* loads the image aligned to the left side of the <td> tag */
  /* doesn't repeat (tile) and is aligned to the left top corner of the tag */
  /* any part not covered by the image, will be green */
}

.logo

This is a <table> tag which contains the logo picture, as well as the text.

.logo
{
  float: left;
  font-family: tahoma;
  font-size: 14pt;
  height: 42px;
  padding: 3px 0px 3px 4px;
}

The float makes sure that the logo is aligned to the left side. we can also do float: right and have it aligned to the right side.

After replacing with your logo picture, make sure you adjust the height in case your logo is taller/shorter than the current setting. You can also try to remove the height altogether and hope it auto adjusts. Your mileage may vary depending on browser.

Example:

.logo
{
  float: right;
  font-size: 0pt;
  padding: 0px;
}

Font type and size can easily be changed here using the font-family and font-size properties. If you want to hide the text, you can set the font-size property to 0pt. You'd probably be better off doing changes in the masterpage however.

.logo a

This is an <a> tag that load the actual logo image and the site description text.

.logo a
{
  background-image: url('../../images/bl_logo.jpg');
  background-position: left center;
  background-repeat: no-repeat;
  color: #656B77;
  display: block;
  padding: 15px 5px 0px 75px;
}

The actual image is displayed in the '.logo a' element. The picture can be changed by changing the background-image property. You can also move the logo to the right side and modifying the padding.

Example:

.logo a
{
  background-position: right center;
  padding: 15px 75px 0px 0px;
}

This will align the image to the right side of the a tag. Additionally it removes the left padding and adds a right side padding so the text and image doesn't overlap. To adjust for your image, change 75px until you find something that fits (depending on the size of your logo). Even if you don't swap the text and logo, you'll still have to adjust the padding if your logo image is a different size than the original.

Next time I'll take a look at how to customize the Navigation bar.

Branding BlueBand.master Part 1: Site logo, description and background, 4.3 out of 5 based on 3 ratings
Comments (0) Trackbacks (0)

No comments yet.


Leave a comment

 

No trackbacks yet.