Thursday, February 25, 2010

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!

Wednesday, February 10, 2010

Update: Creating a Two Tier Global Navigation

There have been multiple request for the source code related to my original post for creating a two tier global navigation in SharePoint 2007. Click HERE to download the supporting files.

Here is what it will look like with once implemented with just the OOTB styles:

image

Steps to get it implemented:

  1. Download the .zip file: HERE
  2. Navigate on your server to the following location: C:\inetpub\wwwroot\wss\VirtualDirectories\80
  3. Rename original “web.config” to “web_original.config”
  4. Copy custom web.config file to this location
  5. Open up the “_app_bin” folder in that same directory and copy in the “mainMenu.sitemap” file
  6. Upload the custom master page “globalnav.master” into the site collection master page gallery.
  7. Choose the globalnav.master as your site master page
  8. Once you see that it is working simply update the mainMenu.sitemap file in with your custom nodes.

Thanks

Tuesday, February 2, 2010

SharePoint Designer 2010 Edit in Advanced Mode

In SharePoint Designer 2007 you can simply open up any type of file you wanted even if it did not reside in SharePoint. Well now things have change for 2010… Now you are forced to open up a SharePoint site before attempting to open up a file that resides outside of SharePoint. If you try before opening up a site you get the following error message: “You must first open a Web site before editing external Web pages…” Not really sure why they changed this maybe they want to ensure that you are not downloading the free SharePoint designer and simply using it as a HTML editor for non-SharePoint sites…

image

Anyways that is not the focus of this post. I also noticed that SharePoint designer tricks you to thinking that you cannot edit pages. Say you want to modify a file that does reside in SharePoint. By Default it will open up in a read only view (HTML) and will not allow you to change the file. It will have a orange like highlight to areas that are not editable.

image

So the trick is to right click on the document and choose the option “Edit File in Advanced Mode”.

image

Now you can edit the file as you wish!

image

Hope this helps! If you know of a better way please leave a comment.

Monday, February 1, 2010

SharePoint 2010 Layered Photoshop File!

I am in the mood for sharing today so here is a great starter file to get your new design rolling. I created one for 2007 and now here is one for SharePoint 2010. I increased the resolution to 1280x800.

image

Download it Here.