Skip to main content

Datasheet View Background Color Issue

As you design your sites it is very critical that you test, test, test. Here is a common issue that has caused a lot of people headache in the past. If you have ever had the issue of your datasheet background color being the same color as the body of your site here is a fix to get it back to normal.

Say you wanted a SharePoint design that was fixed width and center justified. This is pretty easy as long as you don’t change the body color to anything other than white.

Example: Fixed Width site with dark body background.

image

You might think to use the following CSS:

body{
background-color:#000;
text-align: center;
}
.ms-main{
margin:0 auto;
width: 980px;
background-color:#FFF;
}
#mainTable{
width: 100%;
}

Well that would be great if you never wanted to use the datasheet viewer… Here is how it looks with the CSS from above:

image

Whoa… Look familiar? Well with just using the following classes you can keep the background color for your site but not show it in the datasheet view.

form#aspnetForm{
background-color:#000;
height: 100%;
text-align: center;
}

body{
background-color:#FFF;
text-align: center;
}
.ms-main{
margin:0 auto;
width: 980px;
background-color:#FFF;
}
#mainTable{
width: 100%;
}

Simply add your background color or image to the form#aspnetForm class and keep the body background to white and you should be golden! Here is what your datasheet view will look like now:

image

Hope you find this helpful!

Comments

Joschi said…
Hi Erik,

first of all thanks a lot for sharing your experience. Your posts helped me twice greatly now!

One question though: I am using the technique you describe to justify the ms-main table. Sadly the content-editor-webpart's rich text editor dialogue gets centered as well.

It is heavily used by my users. Did you ever stumble across a solution to this issue?

Best Joschi
Erik Swenson said…
Hi Joschi,

What browser are you having this issue with?
Joschi said…
I am currently testing with IE 7.
Joschi said…
Found the answer myself. In case anyone needs it:


The layout of the Editor is stored in the htmledit.aspx somewhere in the layouts folder. Its body-tag uses a class called 'ms-BuilderBackground'.

In addition there's an input field, which is a bit hard to get by. -this guy tipped me of in the right direction:

http://www.graphicalwonder.com/?p=167
(Carefull: Firefox gave a malware warning)

Seems a div is placed around it, that uses the .ms-WPbody class.

And here we go:

/* Fix for Content Editor WP: htmledit.aspx*/
body.ms-BuilderBackground{
text-align:left;
}
.ms-WPbody{
text-align:left;
}

So far no additional errors encountered.
Sarah said…
My design had a fixed background, so the height:100% caused a problem for me because as you scrolled down, the background image started being cut off. I found a different solution; I separated the background colors and images into a new css class, and then used jQuery to add the class to the body of the page after the DOM completely renders.
cpojoe said…
Excellent -- been trying to figure this out. This will be my first foray into modifying the CSS in SharePoint -- can you tell me what file I need to edit?
Bruce said…
Hi Erik,

your site is awesome!!

is it possible to also brand the hyperlink color in datasheet view??

cheers

Bruce
Jenf said…
Hi Erik,

Is it possible to change the background color of datasheet view in Sharepoint 2010? I have yet to find a solution in 2010.

Thanks,
Jen
Michael said…
Any idea doing this in SP2010? Can't get this to work in 2010 so I assume its 2007.
Mark Hendley said…
For SharePoint 2010 -
I wrapped my #aspnetForm with a div; set my body bgcolor to white; set my new div's bgcolor to my desired color along with a width of 100%; then set my #aspnetForm to auto side margins, my fixed width, and bgcolor to my desired color as well.
This fixed my datasheet view color problem.
Charlotte Long said…
Easiest simple way to change the datasheet background is create a background image with the color you want your background to be.
}
body.v4master {
background: #FFFFFF url('../../images/BrandingImages/Backgroundgrey.jpg');
jaya said…
Awesome blog. Thank you very much Erik.

Popular posts from this blog

How To: Hide Left Side Navigation on Home Page

I was recently asked: "How can I hide the side nav bar on the main homepage layout ?? I want to be able to use the side NAV with in the team site etc etc, but I don't want it on the front page.. " There are a couple of ways to do this in SharePoint 2010. If you are using a non-publishing site you can add a Content Editor Web Part to the page and add the following to the HTML Source.
<Style>
body #s4-leftpanel
{
display: none;
}
.s4-ca
{
margin-left: 0px;
}
</style>
Basically the CSS above hides the left navigation Div, and then sets the content area to not have a left margin. Once you are done, simply modify the web part and hide it on the page. If you are using a publishing site for your homepage simply add the same styles specified above to a custom page layout. That way if you have a need for other pages that do not need the left side navigation you can re-use the page layout.

SharePoint 2010 Base CSS Classes

This will be the first of many SharePoint 2010 posts. I will be focusing on a few of the main CSS classes used for SharePoint 2010 Public Beta. As the product becomes more final there might be some changes to the class names but I will be sure to create a new post if that happens. This will be quite a lengthy but it should be helpful. The default CSS given below are just highlights of the full CSS attributes for that class.I will be using a basic team site as my base for the screenshots. Here is a basic structure of the main areas that I will cover.Ribbon RowTable Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu WorkspaceBody Container Title Row Title Title Logo Title Text / BreadcrumbPage DescriptionSocial Data SeparatorI like It Tags/Notes Top Header 2/Top Links li Static-Selected li Static SearchHelpStatus Bar Container Main A…

Small Calendar for SharePoint 2010 & 2013

First off I would like to apologize for the lack of posts. I have been really busy with my new role as the UX Design lead within Slalom Consulting Boston. I will share more about that in another post. In a previous post Create Really Small Calendar I showcased how to do this for SharePoint 2007. However the 2010 and 2013 calendar views have changed and therefore we cannot use the same method or CSS as 2007.SharePoint 2010 Small Calendar:
SharePoint 2013 Small Calendar:
See video below for a video walk through on how to create a small calendar for SharePoint 2010 and & SharePoint 2013 with just CSS.Per the video above here is the code that I referenced:2010 CSS link reference in Master Page:
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/smallcalendar.css %>" After="corev4.css" runat="server"/>2010 CSS:
/**** Small Calendar ***/
.ms-acal-item{height: 10px !important;}
.ms-acal-sdiv,
.ms-acal-mdiv,
.ms-…