Supporters of End User
Web

MOSS 2007, CSS, and you, the Non-Developer - Part 6: Banners and Administrative pages

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:SharePoint 2010 Branding; Branding; Site Manager/Power User; MOSS; WSS; 2007; 2010; Content Editor Web Part; CSS for Non-Developers

 

In my last ARTICLE we changed the way that our TopNavigation and SiteActions menus looked and displayed on our main page. In today's article we'll make some changes to the GlobalTitleArea, add a banner to our page and make some changes to classes that are tied to pages that reside in the _layouts directory. Making changes to those classes will allow us to completely "skin" or "brand" our site and not have pages that appear to be incompletely altered or customized (the �Site Settings� page for example).

We'll start by adding a header image to our main page. There are a couple of ways to do this; add the header image directly to the cells that hold the site title, the titlegraphic.gif, search boxes and "Advanced Search" link or you could customize your master page and add a table directly above those items and add your header image to that table. I don't want to customize my master page so I am going to take the first approach. We'll begin by hiding the existing elements of this row in the page, make some changes to the row height and then add our image.

As a reminder here is how our GlobalTitleArea currently looks.

Now let's make the changes necessary to display a header image as a background to the site title.

  1. We'll start by hiding the title graphic image that appears at the left hand side of the header area. We'll do that by adding a declaration telling the browser not to display the td.ms-titleimagearea class on our SharePoint page.
  1. Now that we've hidden the graphic we'll hide the site title. We'll add a declaration to the .ms-sitetitle class telling the browser not to display that class. This will actually take care of 2 things for us, it will hide the site title and it will also hide the cell that runs across the width of the page and will show up in the middle of your header image after you add it.
  1. The next piece is a little tricky. Once you tell the browser not to display the .ms-sitetitle class the search boxes will all re-align to the left hand side of the page. A post by Heather Solomon on her blog pointed me in the right direction (SharePoint CSS Trick: Align your Search Inputs). We'll start by setting the width of the .ms-sblastcell, .ms-rightbodysectionsearchbox class to "0". By default the width here is set to 100% which pushes all the search box components to the left of the page.
  1. In order to get the search boxes back where they belong we'll change the width setting of the .ms-sbtable-ex class to "0" as well. In addition we are going to set the position of the search box here by using a "position" declaration and setting the "position" declaration to "absolute" and the "right" declaration to "0". If you wanted to move the search boxes up or down you could add an additional declaration for "top: 20px;" or similar. This declaration will actually move the search boxes to the top of the page directly below the Welcome and My Site links.
  1. In the last step we'll add a reference to our header image. We'll do this where we had earlier removed a reference to one of Microsoft's background images in the GlobalTitleArea. You'll notice that I changed the font color of the "Advanced Search" link to make it more visible against the background image I've added.

With the header out of the way we'll go back and tie up a few loose ends. If you've been working through this on your own you've probably noticed that in some of the administrative pages or in the "All Site Content" page there are cells that have not been customized but should have been. We did change those on the main page didn't we?

Well, we did and we didn't. There are some separate css classes for some of the administrative pages. This is where the IE Developer tools come in really, really handy because you can't add Todd's script to any of these pages. Anyway, let's get those fixed up so we're consistent across the site.

  1. If you look at the "Site Settings" page now you'll notice that the vertical pagemargin cell we had changed way back in part 2of this series hasn't been changed. That's because it uses a different class to determine the color of the cell. To fix this we'll need to make 2 changes, one to the .ms-areaseparatorleft class and another to the div.ms-areaseparatorleft class. These changes will consist of removing the background images and then setting a background-color for each class.
  1. Now we'll make the same changes to fix the other side of the page. The only difference will be the classes we are applying those changes to. In this case it will be .ms-titlearearight .ms-areaseparatorright and div.ms-areaseparatorright.

Now there may be other places that changes didn't trickle down or classes may have changed. These are the only two that I saw that were obvious. If you do find some you should have the ability to figure out what needs to be changed now.

Next time we'll wrap it all up and talk about how SharePoint handles style sheets, some best practices, how to deploy the changes we've made and some lessons I've learned as part of this process. Additionally I'll provide you with a copy of my customized .css file complete with comments and markup.

As always if you have any questions or comments please don't hesitate to ask!

Until next time...

Comments

Doug

MOSS 2007, CSS, and you, the Non-Developer – Part 6: Banners and Administrative pages

Hi Jay

Great article(s) .. have been reading all your articles , is there a way to change the quick launch and add a background image the the otherwise bland blue bar ..

Posted 29-Apr-2010 by Doug
Jay

MOSS 2007, CSS, and you, the Non-Developer – Part 6: Banners and Administrative pages

Hey Doug!

I'm glad you're getting someting useful out of the articles, thanks!

To answer your question there are a number of graphics tied to the quicklaunch. Any of those could be replaced with the graphic, or graphics, of your choice. I'd use the core.css to identify which graphics are tied to the quicklaunch and then use those as a template so to speak (size, dimensions etc...) for the graphic you want to create as a replacement.

If you go back and look at Part 3 of the series that's basically what I did with the image that Microsoft uses for the GlobalTitleBreadCrumb class.

Hope that helps you some.

-Jay

Posted 29-Apr-2010 by Jay
Doug

MOSS 2007, CSS, and you, the Non-Developer – Part 6: Banners and Administrative pages

Thanks Jay .. what are you going to tackle next ....eagerly waiting

Posted 30-Apr-2010 by Doug
Jay

MOSS 2007, CSS, and you, the Non-Developer – Part 6: Banners and Administrative pages

You're welcome Doug.

What's next? Well there's a lot of stuff rattling around in this big ole head that I want to do, I just have to prioritize and do it. For now there are 3 things I definitely have planned:

1. Next article in this series......implementation, best practices, lessons learned. Hope to have that done and submitted by Monday or so.

2. Convert the presentation I'll be doing at SharePoint Saturday - Huntsville (and did in Atlanta 2 weeks ago) to an article.

3. An extension of this series where we convert the custom css we've created into a theme.

In addition to those I've been looking at seeing if I can go back and take a post I did for SPS 2003 on my old blog on how to auto-number a SharePoint list and update it for MOSS.

Mark, Christophe or Jim Bob could probably do it using jquery but i don't write any kind of code so I have to find an alternative solution.

The last thing would be based off of an information session my customer wants me to do for the executive staff. I haven't decided about that one yet. It's one of those subjects that most of us don't think about but that will need to be addressed at some point in time (probably sooner, rather than later).

I'll probably decide whether I'm going to do it or not in the next few days. Until then I don't want to say what it is.

Anyway, that's the plan at this point and as with anything we all do on a day to day basis is subject to change at a moments notice.

-Jay

Posted 30-Apr-2010 by Jay
newbeez

MOSS 2007, CSS, and you, the Non-Developer – Part 6: Banners and Administrative pages

Some great tips here, however will these work with WSS3?

cheers

Posted 02-May-2010 by newbeez
Jay

MOSS 2007, CSS, and you, the Non-Developer – Part 6: Banners and Administrative pages

I don't work with WSS much but I would say off the top of my head that it should. WSS uses the same core.css that MOSS uses and the classes are the same. You might have to play around a little to get the same look I have here on your WSS site but it shouldn't be all that much.

Hope that helps

-Jay

Posted 03-May-2010 by Jay

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: