Remove select/de-select checkmark column, column headers, edit/new options, and border in SharePoint list view web parts

tooltiplinkedtitlesIn a recent post, I discussed hyperlinking URL title text and adding tooltips. I used the above screenshot which also illustrates what we’ll accomplish in this post which is to remove the select/deselect checkmark column, column headers, toolbar edit/new options and chrome border. This leaves us with a simple title and list. Pick and choose what you’d like to remove for your specific needs, and let me know if you run into any issues.

A. Remove Select/De-select checkmark column and column headers

  1. Edit page (Settings–> Edit Page or select “Page” from the ribbon and “Edit”)
    edit-page
  2. Add a Content Editor Web Part or Script Editor Web Part to your page
  3. Save the following code as a .css file in your site assets and reference it via your content editor web part or, if you used a script editor web part, just click “Edit Snippet” and paste inside the dialog.
    <style type="text/css">
    /* This #WebPart section removes the column headers */
    #WebPartWPQ1 .ms-viewheadertr {
    display: none;
    }
    /* And this #WebPart section removes the select/de-select checkmark column */
    #WebPartWPQ1 .ms-vb-itmcbx {
    display: none;
    }
    </style>
    
  4. NOTE: You must replace the WPQ1 in both locations in the script above with the actual number of the list view web part you’re editing so the changes only apply to that web part. You can find this WPQ# by hitting F12 on your keyboard when viewing your saved page (goes to developer tools). You can then use find or search in the developer tools to search for “wpq” and make sure it’s referencing the correct web part. Another way is to use the DOM explorer to select the web part and expand the script until you see WPQ somewhere. Change the number in the code above to the number of your web part. You should be able to find it in a number of places in the code.
    domexplorewpq.JPG
  5. Make sure to select “apply” or “okay” after referencing your script and then save your page.

B. Remove “New Item” and “Edit” toolbar options, and web part chrome border

Do you want to make these options no longer visible to everyone (including yourself) or just for certain individuals? Keep in mind this will only apply to the list view web part, and not the “parent” list itself.

Just for some:

  1. Create a permissions group and assign the users read or view only access to your site or list.

For all:

  1. Edit page (Settings–> Edit Page or select “Page” from the ribbon and “Edit”)
  2. Edit list view web part
    editwebpart
  3. Change “Toolbar Type” to “No Toolbar”
    notoolbar
  4. If you also want to remove the border, continue. Otherwise skip to step 5.
    Expand the “Appearance” section and change “Chrome Type” to either “Title Only” or “None”. If you keep your title but want to remove its default hyperlink back to the whole list, expand the “Advanced” section and remove the content in the “Title URL” field.
    removechromeborder
  5. Click “Apply” and then “Save” the page.
    savepage

Good luck!

Advertisements