MOSS 2007, CSS, and you, the Non-Developer – Part 4: the BodyArea
Guest Author: Jay Simcox
The SharePoint Mechanic
Last week we continued our tour of the SharePoint site main page by walking through some changes to the GlobalTitleArea and surrounding areas of the page. In addition to making changes in the way the page displays by altering the default colors in the css declarations we also created, and used, a basic image file as a background image in the .ms-globalbreadcrumb class.
In today’s article we are going to continue our tour and walk through some changes to the main page area of our SharePoint site. In reality there isn’t much here to change. We are going to make the changes necessary to make the pagemargin cells to the right of the main body area and directly beneath it reflect the same colors as the column for the quicklaunch menu. Additionally we’ll look at how we can make some changes to the web parts that are on our page by default.
- We’ll start this article by changing the background color of the cell directly under the body area. To make this change you’ll need to change the background declaration of the .ms-bodyareapagemargin class.
- Now that we have the bottom cell changed to match the rest of the page we’ll change the vertical cell on the right to match. We’ll do this by changing the background-color declaration of the .ms-rightareacell class.
- Next we’ll make the changes to the borders that surround the body area so that they match the other body cell backgrounds. You’ll see that in addition to making changes to the border–top, right and left declarations of the .ms-bodyareaframe, .ms-viewareaframe class we’ll need to make changes to the border-top declaration under the .ms-bodyareapagemargin and the border-left declaration of the .ms-rightareacell classes as well.
- The last real background we are going to change is the cell that runs horizontally across the top of the body area and contains the page breadcrumb. To do this we’ll change the background-color declaration of the .ms-pagebreadcrumb, .ms-pagebreadcrumb a{ class.
- If you look closely around the pagebreadcrumb cell you can see a border that runs across the top and down the left of the cell. We can change those border colors directly within the .ms-pagebreadcrumb class.
- With the majority of our work done we’ll make a couple of changes to the web parts on our page. Because we could work for days on this I am just going to make a few basic changes to the title and border of my web parts. Once you have that you’ll be able to follow through if you decide you want to make other changes (font types, weights, colors etc…) of your web parts. I’ll begin by working with the title of my web parts. It’s important to remember that not all your web parts have titles that render as links, some are static text. To change the color of the static text of a web part title we’ll make the appropriate change to the .ms-wptitle class. If you look at the class and associated declarations you’ll see that you could also change the font family, weight etc… here.
- Next I am going to change the color of the font in the Announcements and Calendar web parts titles. Both of these web part titles do render as links back to the related list. The change will be made to what I would call a “subset” of the .ms-wptitle class. The subset tells SharePoint how to render the font colors when the title is a link and also if it has been visited (clicked on). The subset is identified as .ms-wptitle A:link,.ms-wptitleA:visited
- You’ve all obviously seen web pages where the font changes when you hover your mouse cursor over a link on the page. We’ll do this with the title of the Announcements web part by changing another subset of the .ms-wptitle class. This time instead of the class being appended with A:visited it is appended with A:hover. This tells SharePoint to change the way the link displays when you hover your mouse cursor over the link.
- In today’s last step we’ll set the border color around the Announcements web part. As you can see by the screen shot you’ll be making two changes, one change to the .ms-wpborder class and the other to the .ms-wpborder subset.









Here’s a screenshot of the changes we have made applied to the home page of a SharePoint site on my dev box.

Next time we’ll walk through making some changes to the top navigation tabs, the site actions menu and maybe how we can apply a custom banner or image to the header area of our site. I hope you have found this useful! As always if you have any questions or comments please let me know.
Until next time…
Guest Author: Jay Simcox
The SharePoint Mechanic
Jay Simcox is a SharePoint Architect/Administrator currently disguised as a “Programmer III” for his current employer. Jay has been supporting and managing Microsoft technologies for 10 years with the focus of the last 7 years being SharePoint. With his background in end user training, support and network administration Jay focuses on finding those “no-code” solutions that all “Non-Developers” working with the SharePoint platform crave, developing and providing training for his end user community and sharing his knowledge with as many as he can.
- SharePoint 2007, CSS and you, the Non-Developer – the Intro
- MOSS 2007, CSS, and you, the Non-Developer – Part 2: the Quicklaunch
- MOSS 2007, CSS, and you, the Non-Developer – Part 3: the GlobalTitleArea
- MOSS 2007, CSS, and you, the Non-Developer – Part 4: the BodyArea
- MOSS 2007, CSS, and you, the Non-Developer – Part 5: the TopNavigation and the SiteActions Menus
- MOSS 2007, CSS, and you, the Non-Developer – Part 6: Banners and Administrative pages
- MOSS 2007, CSS, and you, the Non-Developer – Part 7: Pulling It All Together
- MOSS 2007, CSS, and you, the Non-Developer – Part 8: Customizing a Blog Site
- MOSS 2007, CSS, and you, the Non-Developer – Part 9: Customizing the Blog Body
Very cool… I’m going to be able to tweak a theme a whole lot easier with this article. Thanks for sharing!
Jay – I’m really enjoying your series. Keep it up! — Mark
Thanks Mark, I’m having fun doing it!
Matt, glad you are finding it useful. Keep your eyes out for more coming soon.
Jay
Thats great. Any plans to come up with similar posts on SharePoint 2010?
Kamlesh, I might at some point but unfortunately I am one of the many out there that supports an organization that will not be making a move to the 2010 platform any time in the near future so I tend to focus on the 2007 stuff.
That being said I have downloaded the VHD from Microsoft and have been playing with it a little. However, that is mostly to support a specific article I am writing on implementing consistent navigation across multiple site collections using an XML file as the sitemap datasource.
That will probably be out in a week or two and I hope to present it at a SharePoint Saturday event at some point intime.
Jay
Great series, Jay. I’m brand new to the MOSS2007, and have been trying to immerse myself (mostly via Google searches) in as much info as I can. This was great info… unfortunately, I’m guessing I don’t have access to the .css files, so I haven’t been able to practice what you’re teaching. I’m just a content manager for my department, responsible for posting documents and anouncements, etc. Maybe I have access to “my own” .css files, and I just don’t know it?
Perhaps you can point me in the right direction for my question (below). Google has not been able to answer it yet, and my IT guys that run the server are not helpful at all… “they just keep the server running – they don’t know how to post documents”… whatever.
What I want to do seems so simple. I have a list, which I post multiple things to every day (just “body” and “title”). Each day, I have to quickly breif the boss on what was posted yesterday (along with all the other department reps). I’ve designed a “view” to show only what was posted the previous day (big accomplishment for my newbie status!), and I created a web-part page to display this view. My problem is that the default fonts for this page are too small… we (each department rep) display our topics on a big screen TV in the conference room. I’d like to display my new page, but it’s too small to read. All I want to do is make a custom font for this page so that the “title” is bold and big, and that the “body” is also big.
Do you know of any guides that can point me to what I want to do?
Keep up the great products – I’ve learned a lot these past few days from reading your stuff.
Jim, probably the easiest way for you to make a change to your web part page is by using a Content Editor Webpart (CEWP) to override the default css that SharePoint applies. This is a nice solution because it only apples the changes you want to make on the page that the CEWP is added to.
What you’ll need to do is this:
1. Add a Content Editor Webpart to your webpart page.
2. Click the Edit dropdown on your CEWP and then select “Modify Shared Web Part”
3. Open the “Source Editor” and add something along the lines of the following:
.ms-vb2
{
font-size: 24;
}
Click OK and see if your font size has changed. I would suggest loading the script that Todd Bleeker wrote that will show you the css class of the part of the page you are trying to change it will be a great help. There is a link to that script in the Intro article of this series as well as my blog.
Just to verify that the above works I have a virtual machine that I created a custom list on with just title and body columns and added the css above and it changed the font size of the contents of the body column of my custom list. Note that the title column uses a different css class (.ms-vb on my VM).
I’m glad you’re finding the series useful. I know how frustrating trying to find an answer specific to your needs can be and hope I am helping some folks with that.
In the last article in this particular series we’ll talk about how we can apply css changes to our sites and/or pages. The solution I’ve outlined here will definitely be a part of that.
Let me know if there is somthing that isn’t clear or that doesn’t work.
Jay
It looks as if Todd’s web part isn’t available on his site anymore. I’ve got a copy and sent him a request to let me make it available. Give it a day or two and we’ll see what he says. — Mark
Thanks Jay. Unfortunately, that doesn’t seem to be doing anything. To be clear, here’s what I’ve done:
1. Create a “web part page”
2. Add a webpart, select CEWP
3. Add a second webpart, select my list that I’ve created with appropriate view
4. Make changes to CEWP as described above.
(also tried again, swapping order of steps 2 & 3)
Now what I see is a page with 2 sections. The first section simply displays the text “.ms-vb2 { font size: 24;} The second section displays my list (still with small fonts).
Even though the I haven’t found Todd Bleeker’s script, I have verified that the class .ms-vb2 is what is being used. I looked at the source html, which definitely had <table class=".ms-vb2" right where my text is at that I would like to be bigger.
Thanks again, and if there's any ideas on where I might be going wrong with the CEWP, I'm all ears.
Jim
JIm you’ll need to add the style tags. For some reason they don’t display here when I add them to my reply. Take a look at the following link and about halfway down is a piece on overriding the branding on a single page. That should help.
Also try putting the CEWP at the bottom of the page (not sure if that really makes a difference with CSS but it does with scripts so I make a habot of doing it that way).
http://5280solutions.wordpress.com/2009/07/08/reasons-to-love-the-content-editor-web-part-cewp/
Let me know if that help you out.
Jay
Thanks Mark. If he doesn’t respond for some reason I have a link to a similar script from Microsoft somewhere I can dig up.
Todd has placed the Style Under Cursor web part in a zip file containing his presentation resource for “Todd’s Content Editor Web Part (CEWP) Tricks”. Go here, http://mindsharp.com/?premium=Default , and you can download the package containing his web part. — Mark