Tag: design

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.

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

Highlight specific column headers in a SharePoint list

columnheaderhighlight.png

Highlighting specific column headers can be useful in drawing attention to specific information areas to make sure they’re complete or just to aid users in seeing the most important info quickly.

You can insert this script in a Script Editor webpart or save it in a css file in your Site Assets and reference the link in a content editor web part on the list page (much more accessible and easy to edit later).

Simply replace “Column1” with the exact name of your column header. Repeat the script as many times as you wish for each column header you want to highlight. Remember to change the script if you change a column name. And if this yellow isn’t your thing, check out this color wheel to help pick a new color code to use in your script.


<style>

.ms-vh-div[DisplayName="Column1"]

{

background-color:#FFFF66;

}

.ms-vh-div[DisplayName="Column2"]

{

background-color:#FFFF66;

}

</style>

 

 

Create old web part page instead of using SharePoint framework’s new page experience

newpage

The new SharePoint framework has a lot to offer in the way of development possibilities and user-friendliness. Creating a page using their new default page experience seen above is much more intuitive, inherently mobile-friendly and easy to whip together some decent-looking dynamic content in just a few clicks. But this new experience doesn’t allow for adding web parts like you may be used to. And customizing layouts isn’t as accessible as it once was. The following few steps will allow you to create a page that utilizes familiar layouts (columns and sidebars) and web parts.

Continue reading “Create old web part page instead of using SharePoint framework’s new page experience”

Replacing SharePoint’s double arrow icon in connected list view web parts

capture

Intro:

If you’ve created a dashboard and have multiple list view web parts that you’ve connected to one another so that they share parameters or filters, then you may be familiar with this default double arrow icon: doublearrow

You may have even found it to be located at _layouts/images/rbunsel.gif or _layouts/images/rbsel.gif (depending on whether it’s the “selected” or “unselected” icon).

And now you’re ready to replace it with something a little more fashionable. I recommend installing an icon package (free) on your site so that you can use icons from the set throughout your site to continue customizing various out of the box, and quite ordinary, icons. In this post, we’ll use FontAwesome. Check out their amazing set of icons at http://fontawesome.io/icons/ and even try searching for “open” or “expand” to see some good alternatives to the less-than-perfect double arrow default. For this example, let’s use fa-search-plus.

Ready to step up your icon game? Me too.

Continue reading “Replacing SharePoint’s double arrow icon in connected list view web parts”

Adding sticky/floating headers to a SharePoint list

Outcome:

stickyheadersbeforeafter

Intro:

Large lists carry with them a number of challenges, one being the ease of keeping everything straight when you’re thirty scrolls deep into a page. Sticky/floating headers are an excellent addition to your SharePoint lists that keep your headers at the top of your columns no matter where you’re at in the list for ease of viewing. This solution uses a script created by Daniel Stölzner of spoodoo.com and I’ve added a reference to jquery to simplify steps for those of you without jquery built into your master page.

Continue reading “Adding sticky/floating headers to a SharePoint list”