Hide SharePoint List Header

When placing a SharePoint list on a webpage, by default it includes the column headers. Normally, this is great because you can then sort and filter the data in each column. However, in some instances it just doesn't make sense.
On my website we have a lot of FAQs and we put the questions/answers in a SharePoint list. When you place that list on the webpage, you get the column header, but since there are only two columns in the list, it's pretty obvious which is which. Furthermore, the sorting and filtering capability isn't really necessary.

THE BEFORE


The nature of this list makes the column headers look odd and out of place.

Sorting and filtering options just are necessary for a list like this.

 

By adding a Content Editor Web Part to your page and putting the following CSS in the HTML you can hide the column headers on the page.

<style>
TR.ms-viewheadertr > TH.ms-vh2 {
DISPLAY: none
}
</style>

THE AFTER
They are gone!

Content Editor Web Part Saves the Day (Again)

My friend and fellow SharePoint enthusiast Brad is my guest blogger for the week. I did not know of this trick until reading his post - can't wait to try it and show you all my results!!


------


I suppose I would call myself a SharePoint Designer at my company, but perhaps I’m just a glorified power user that has more access than others. Speaking of power, I’ve recently learned of a powerful way to, once again, use JavaScript in a content editor web part (CEWP) to modify how a SharePoint list is displayed. 

The issue: Users want to be able to “lock” the column headings that are displayed in a list. A user attempting to view contents in a long list may be required to scroll down the list, which effectively “hides” the column headings -- this can make the data confusing. 

A solution: Add the JavaScript pasted below into the source of a CEWP. Make sure to enter the list’s GUID into the code (replace the GUID in the example).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

<style type="text/css">
<!--
.DataGridFixedHeader { position: relative; top: expression(this.offsetParent.scrollTop);}
-->
</style>

<script type="text/javascript">
$(function(){
var $table = $("TABLE[ID^='{4C9CFF20-B467-4E10-820C-0A132442CF98}']:first", "#MSO_ContentTable");

<!--WRAP TABLE IN SCROLL PANE-->
$table.wrap("<DIV style='OVERFLOW: auto; HEIGHT: 575px'></DIV>");
<!--FROZEN HEADER ROW-->
$("TR.ms-viewheadertr:first", $table).addClass("DataGridFixedHeader");
});
</script>

Note: The GUID that must be replaced in this table is 4C9CFF20-B467-4E10-820C-0A132442CF98. I have included a link to some documentation on how to easily identify a list’s GUID - http://sanketinfo.blogspot.com/2009/05/how-to-find-guid-of-sharepoint-list.html

A List of List Ideas

A List is one of the most basic features of SharePoint. Think of it like an excel spreadsheet - it contains rows and columns of whatever data you want. You can then sort, filter, or group that data in any number of ways and display it on a webpage. In an environment when you have multiple people editing a webpage, sometimes it is advantageous to store information in a List and give a person access to update that, rather than access to the webpage itself.

Here are a few ideas for information you might want to store in a list:

• a list of items and how much they cost - SharePoint has the ability to automatically calculate the sum
• a list of questions and answers - you could include a "category" field and then group the list by category
• a list of people with their contact information
• a list of award winners
• a list of events - SharePoint allows you to create views of the data that allow you to only display the current events

Alternating Row Color of SharePoint List

When modifying the view of a SharePoint list there are several out-of-the-box styles that you can choose from that change the look and feel of how the data is displayed. My favorite one is the Shaded Style which applies an alternating row color to the data.

Here is a screen shot of the data on the page - I have information grouped, and when you expand the group you can see the alternating row color. Here is where the inbetweener comes in. I didn't like the out-of-the box color that was applied to the row color, so I changed it using SharePoint Designer.

It's not wise to modify the out-of-the box styles from sharepoint but you can override them by using the following CSS code:

.ms-alternatingstrong {
    background-color: #F2F1EC !important;
}
You should obviously #F2F1EC with your preferred color - although my warm grey is quite nice.