Supporters of End User
Web

MOSS 2007, CSS, and you, the Non-Developer – Part 3: the GlobalTitleArea

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; CSS for Non-Developers

 

In my last article we started our little journey by changing the look and feel of the Quicklaunch menu and column by making changes in our copy of the CORE.CSS file. We changed the background colors of the quicklaunch column, the quicklaunch menu header and item cells, the colors of the default links and the borders of the quicklaunch menu. Today we are going to focus on the area of the page that runs from the cell directly above the quicklaunch, actually part of the pagemargin, to the top of the global bread crumb links at the very top of the page.

Before we get started I would like to stress the following:

  1. We are making the changes documented in this article in a COPY of the CORE.CSS file and then applying those changes through the administrative UI of a SharePoint site. You can rename the copy to most anything you want, I am using My_Core.css.
  2. I am working in a virtual environment in order to minimize any risk.
  3. Most administrators will not have access to the server. If that is your case contact your server administration team and request a copy of the CORE.CSS file and test any changes you make in a test environment prior to implementing them in any way, shape or form in your production environment.

Once again we will focus on changing background and font colors. In addition to changing the background colors by setting the background-color declaration to a color (#ffccff for example) we will also look at how we can change the way some of those areas appear by adding our own images.

  1. We’ll get started by changing the color of ms-titleareaframe, which will change the color of the cell that runs the width of the page directly above the quicklaunch menu and page body.
  2. In the next step we will add a background color to the cell between the globalnavigation tabs and the site actions menu. In order to this we’ll have to add a background-color declaration to the .ms-banner class and assign that declaration a color.
  3. After adding the background color to the ms-banner class above you will see small cells on the left hand side of the global navigation tabs and the right hand side of the site actions menu. In order to set a background color on those cells we will have to remove the image that Microsoft uses for the background and then change the property of the background-color declaration.
  4. Next we will set the background color of the cell that runs from the left of the site title over to the search scope box. We will do this by adding a background-color declaration as shown in the following screenshot and then assigning a color to that declaration.
  5. Now if you look at the previous screenshot you’ll see that the ms-sitetitle class does not set the color of the entire row here. There will be a white background behind the sitetitle icon on the left hand side of the page header as well as a white background around the search scope drop down menu and search box on the right. We set the background color in both places by removing the default Microsoft image and then adding a background-color declaration and associated color in the ms-globaltitlearea class.
  6. At this point the last background area we have to change is the cell running the width of the page at the very top that contains the global breadcrumbs and the “Welcome User”, “My Site” and “My Links” links. This background is managed in the .ms-globalbreadcrumb class and can be changed by changing the background-color declaration.
  7. Now we’ll go back and change the font colors of the links in the header area of our page. It should be noted that in addition to changing the font colors here you can also change font-weight, font-family, font size etc… We’ll start with the global links which includes the breadcrumb links in the upper left of the page and the “My Site” link in the upper right. We’ll change those font colors in the .ms-globallinks class by changing the color declaration.
  8. As you can see above the font color of the “Welcome User” and “My Links” links did not change. For whatever reason SharePoint manages those font colors in the .ms-SPLink class and again by changing the color declaration.
  9. Next we’ll change the font color of the site title link. This color is managed in the .ms-sitetitle class and is changed by making a change to the color declaration.
  10. Our last font color change will be the color of the “Advanced Search” link. This is done in the .ms-sblink class and as with the other changes we have made done by changing the color declaration.
  11. As I mentioned in the opening we are also going to look at how we can change backgrounds using an image. For this I created a .jpg image in Photoshop that measures 200px wide and 40px high. I saved that image file in the /_layouts/images/ folder within the 12 hive. In order to display that image as a background all we need to do is either replace one of the images we removed in the steps above with the path to our new image or as I have done here add a background-image declaration to one of our classes and point that declaration to our new image as shown below.
  12. I think that it’s important to note that it appears to me that the image will resize itself in most cases to fit the height and width of the cell it is being added to. There may be cases where you will need to add a height or width declaration in order to accommodate the image you are trying to add. Additionally if your image is much wider or higher than the cell you are inserting it into you can try adding an overflow declaration and set the property to “hidden” in order for your image to fit properly. From what I have seen it’s more a trial and error thing to figure out than anything else.

  13. The last step we are going to take in this article involves some behavior I find to be a bit strange and don’t entirely understand. I am still looking into it but here’s the fix I used for this specific issue. After I made the changes to the .ms-titleframearea we identified above I started seeing a large blue box on all my list pages. I found that the box is apparently another Microsoft image and I was able to get rid of it by removing the image in the .ms-pagetitleareaframe class as you will see in the following screenshot.

And now a couple of shots of your customized page to date:

Well, that’s all for this article. Next time we’ll look at changing the remainder of the pagemargin around the main page body as well as changing the font colors of some of our default web parts. I hope you found this useful. If you have any questions or comments please don’t hesitate to post them!

Until next time…

Comments

Eric Schrader

MOSS 2007, CSS, and you, the Non-Developer – Part 3: the GlobalTitleArea

Hmm, seems to me, if you load the mega core.css file by default, and load your custom one on top, thats double the CSS right off the bat, making it now 10,000 lines of CSS for the client to load. (on top of other CSS includes as well)

Maybe I missed something though, just skimmed the article.

Posted 15-Mar-2010 by Eric Schrader
Jay

MOSS 2007, CSS, and you, the Non-Developer – Part 3: the GlobalTitleArea

That's a good point Eric. The plan is to point out options for deploying the customized .css file and some best practices in the closing article of the series. At this point we are still working in a virtual or test environment.

Thanks!

Posted 15-Mar-2010 by Jay
Eric Schrader

MOSS 2007, CSS, and you, the Non-Developer – Part 3: the GlobalTitleArea

What I like to do is use IE Developer Toolbar to get the specific selectors used to make the style I am trying to overwrite.

From there, I will add all my selectors as overwritters to my new CSS file.

I will then export this CSS to a theme and apply it to each seperate site.

Themes can reach pretty far into your site, branding the 12 hive application pages (anything with /_layouts/ in the url)

When you apply a theme, the CSS reference is added to the masterpage above any custom CSS, so you can move the theme css tag to just before the ending tag. This will insure your CSS theme will overwrite the Core.css and any other styling.

If you are still having problems, you can use specific selectors by tag name, eg. TD.ms-wp_header, etc will overwrite any inline ms-wp_header css. You can learn a lot about this on w3 schools, http://www.w3.org/TR/CSS2/selector.html#pattern-matching

Themes take some time to put together, but will drastically brand your site.

Posted 15-Mar-2010 by Eric Schrader
Links (3/21/2010) « Steve Pietrek-Everything SharePoint/Silverlight

MOSS 2007, CSS, and you, the Non-Developer – Part 3: the GlobalTitleArea

[...] MOSS2007, CSS and you, the Non-Developer – Part 3: the GlobalTitleArea [...]

Posted 21-Mar-2010 by Links (3/21/2010) « Steve Pietrek-Everything SharePoint/Silverlight
santhosh

MOSS 2007, CSS, and you, the Non-Developer – Part 3: the GlobalTitleArea

i have the same requirement but little change...i need to custom theme for the above requirement.....http://vspug.com/tigirry/2007/07/03/custom-site-theme-for-sharepoint-2007-moss-2007-and-wss-3-0/ i have followed the steps and created the custom themes ...i want to chnage the color of ms-titleglobalarea i have modified the color in the theme.css but the changes are not refelecting .....can u please help me in this........

Posted 10-May-2010 by santhosh
Jay

MOSS 2007, CSS, and you, the Non-Developer – Part 3: the GlobalTitleArea

Santosh,

I think the class you're looking for is .ms-globaltitlearea. make sure that you have set the url of the background-image attribute to "none". Once you do that you should be able to add a background-color attribute to set your backgorund color. It should look something like the following

.ms-globaltitlearea {
background-image:url("none");
background-color: #022800;

Make sure you close the class with the trailing {

See if that helps.

-Jay

Posted 10-May-2010 by Jay
Alberto

MOSS 2007, CSS, and you, the Non-Developer – Part 3: the GlobalTitleArea

Thanks a lot jay.
Only one thing. After doing 2 and 3 I still see the blue line (same color of defaul site action button) just ander site action button. It seems a border from the left to the right of the page.
Can you help me?
Thanks
Alberto

Posted 08-Oct-2010 by Alberto
Jay

MOSS 2007, CSS, and you, the Non-Developer – Part 3: the GlobalTitleArea

Alberto,

Sounds like the border of the bodyareaframe. Add a declaration for .ms-bodyareaframe to your custom CSS file and try changing border-top to something very distinct and easy to see. I usually use black or dark red.

Should look something like the following

.ms-bodyareaframe {
border-top: 3 px solid #000000 ;

I usually change the thickness of the border when I am trying to identify exactly what I'm looking at. Make sure to change it back to 1px if you do that.

Hope that hepls

- Jay

Posted 08-Oct-2010 by Jay
Alberto

MOSS 2007, CSS, and you, the Non-Developer – Part 3: the GlobalTitleArea

No, it's not bodyareaframe. It is upper than bodyframe. It is a blue line from the left side of the page to the right just attached to the bottom side of Site actions button. I send you a screenshot if you give me your mail.

Thanks again
Alberto

Posted 10-Oct-2010 by Alberto
Jay

MOSS 2007, CSS, and you, the Non-Developer – Part 3: the GlobalTitleArea

Alberto,

You can send it to me at jsimcox "at" sharepointmechanic.com and I'll take a look at it when I as soon as i get a chance.

Thanks,

- Jay

Posted 10-Oct-2010 by Jay

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: