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

Joschix 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?
Joschix said…
I am currently testing with IE 7.
Joschix 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.
Unknown 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.
Tall Joe 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.
Unknown 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.
Unknown 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: Create Hyperlink to Modal Pop-Up Form

I was asked by a client recently if there was a way to create a hyperlink to a New Item Form anywhere within a site but still get the rich experience of the Modal pop-up window that grays out the background. (Note this is for SharePoint 2010 Only…) I basically took the code directly from the “Add new item” and the “Add Document” link within the list view. What this allows you to do is simply add in the following code to any content editor web part, Master page, or Page Layout in any site collection and display the form to be filled out. The user will get the nice experience of the modal window and not have to navigate away from their current page. This could be used for example a feedback form that is included in the master page so whenever someone wants to give feedback it is always going back to a central list. The only that is required for you to know is the List ID and the site name. Full Code For a List Item: <a onclick="javascript:NewItem2(event, &quot

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 Row Table Row Left Site Actions Navigate Up Edit Tab List Browse Page Table Row Right Give Feedback Welcome Menu Workspace Body Container Title Row Title

SharePoint 2013 Responsive Table Columns

I have been wanting to write this one for a while now. It is really amazing how UX is really finding is way into everything that we use and interact with. From Custom applications both mobile and on a desktop to document management or large data visualizations. There is always room for better usability and new concepts. SharePoint lists and library functionality really has not changed much for the past 10 years... I remember back in 2003 when I saw the same table/grid based views of documents and list items that exists in SharePoint 2013. But now we can look at them in a whole new way! In this video blog you will see how to create a responsive CSS table so that when the browser size is reduced it will hide specific columns. However hiding data is not always the right thing to do. What if a user needed those columns to filter on or to use for comparison to another document? Well that is where the custom jQuery Column chooser comes in. It allows you to see what columns are displ