Adjust column widths in classic SharePoint lists using CSS (including “Quick Edit”/datasheet views)

Once upon a time two years ago (two years?!?) I shared how you can adjust SharePoint column widths in traditional views using JQuery.

But adjusting the same widths in datasheet mode (quick edit, for example) is a bit different. After a bit of fiddling around, I found an answer that will allow you to adjust column widths for both standard and datasheet view types using just CSS.

The difference is in how you reference the column names in the css:

  • Standard (catches both filterable and non-filterable columns such as multi-line text): div[DisplayName=’Column1′], div[DisplayName=’Column1′]{…
  • Datasheet: th[Title=’Column1′] {…

Everything that follows that first line is the same in both types of views, fixing a minimum and regular width property for the column(s).

Standard Views (not quick edit)

<style> div[DisplayName='Justification'], div[DisplayName='Justification']{

Datasheet/Quick Edit Views


All Views

So if you’re including just one script reference for all views in your list, you’d be safe to include all formats in the script.

th[Title='Justification'], div[DisplayName='Justification'], div[DisplayName='Justification']{

Multiple columns

For multiple column width adjustments, just include another block for each column as seen here:

th[Title='Justification'], div[DisplayName='Justification'], div[DisplayName='Justification']{
th[Title='Other Column'], div[DisplayName='Other Column'], div[DisplayName='Other Column']{

Improve the look of the likert rating question type in SharePoint surveys

You want your surveys to be easy to complete because chances are they’re optional in the first place. If you’re using a likert rating question type, the look of the entire survey can get out of hand pretty quickly.

A likert rating question type with no styling applied other than site styles

Just by adding alternating row shading and giving the options some more room to breathe, we zap the anxiety right out of the question and give the question a more polished look. Just two tiny changes make a big difference.

  1. Click “Respond to Survey” to open the newform.aspx page
  2. Edit page
  3. Add a web part
  4. Under Media & Content choose either Content Editor or Script Editor (your preference)
    1. Content Editor: Create a .css file in your Site Assets named something like form-alt-row-shading.css and reference its path in the web part’s properties. For the file’s content, copy and paste the script below.
    2. Script Editor: Click “Edit Snippet” then copy and paste the script below directly into the dialog that appears
  5. Save and check it out!
.ms-formbody tr:nth-child(even) {
background-color: #ffffff;
} {

You could modify the css file further, adjusting the question itself, the option headers, etc. by using F12 and selecting each element to find its class label, then adding it to your css file with its modified styling within the brackets. But just these two adjustments alone give you options on a single line (not breaking lines) and easy visibility with alternating row options.

Improve your navigation and design with free and easy Unicode symbols to complement links

It doesn’t have to cost anything to improve your user experience and make links look more like, well, links. We’re accustomed to a modern navigation experience driven not just by underlined text anymore but by visual cues. We rely on iconography and buttons to get us more quickly from A to B.

So if you can’t (or don’t want to) install an icon library like Font Awesome, and if you’re not using a web part that has the built-in Office UI Fabric icons (such as the Quick Links web part), why not stick to the basics and use Unicode characters? While limited, you still have some great options for quick wins.

Note: These characters appear slightly different in different browsers or when used with pre-existing themes. For example, when writing this post they’re black-and-white, but when published, my styles are applied which give them color. They may also look different on a mobile device than they do on desktop.

Compart has a great listing of all the Unicode symbols you can search and filter. Here are a few examples I selected that could be useful:

☎ Directory
♻ Recycle vs Trash FAQ
♬ Fall Concert Details
☂ Inclement weather procedures
⛱ Vacation Requests
⛟  Track a Delivery
☃ Winter Sale

How to use Unicode characters on your site

Example used in the left navigation

To use Unicode characters, you can either:

  • Copy and paste the actual symbol -OR-
  • In your html, wrap the four-digit number in &#x and ; as follows


Here are many more icons, some of which might have purpose in your organization. You can also download this excel file for easier viewing/customizing.


25A0 260E 25AE
2601 25A1 260F 25AF
2602 25A2

2610 21C9
2603 25A3 2611 21CA
2604 25A4 2612 25B2
2605 25A5 2613 25B3
2606 25A6 2614 25B4
2607 25A7 2615 25B5
25A8 2616 25B6 21CF
2609 25A9 2617 25B7
260A 25AA 2618 25B8
260B 25AB 2619 25B9
260C 25AC 261A 25BA
260D 25AD 261B 25BB
2678 23F6 2686 21D5
2679 23F7 2687

267A 23F8 2688 2191
267B 23F9 2689 2192
267C 23FA 268A 2193
267D 2390 2194 21DA
267E 2391 2195 21DB
267F 2392 2196 21DC

2680 2197 21DD 269C
2681 2394 2198 21DE
2682 2396

2690 2199
2683 2397 2691 219A
2684 2398 2692 219B
2685 2399 2693 219C
26CC 26CF 26D2 26D5

26D0 26D3 26D6
26DA 26DE 2.60E+02 2.60E+05
21EE 2315 21F4 21F5
262A 25CA

2640 25D8
262B 25CB 2641 25D9
25CC 2642

2650 25EE
25CD 2643 2651 25EF
262E 25CE 2644 2652
262F 25CF 2645 2653

25D0 2646 2654
2639 25D1 2647 2655
25D2 2648 2656 23C4
263B 25D3 2649 2.50E+08
263C 25D4 264A 2.50E+09
263D 25D5 264B 2.50E+10
263E 25D6 264C 25EA
263F 25D7 264D 25EB

26B0 21B9 26F2
26A3 21AC 26B1 21BA
26A4 21AD 26B2 21BB
26A5 21AE 26B3 26F5
26A6 21AF 26B4 26F6

21B0 26B5 26F7 26C3
21B1 26B6 26F8 26C4
21B2 26B7 26F9 26C5
26B8 26FA 26C6 2672
21B4 26B9 26FB 26C7
26AC 21B5 26BA 26FC
26AD 21B6 26BB 21C4
26AE 21B7 26BC 21C5
26AF 21B8 26BD 21C6
2.60E+03 2.60E+09 26EB 26EF
2.60E+04 2.60E+10 26ED

2.10E+09 21F3 21FC 21FD

235F 23F4 23F5
21C7 261C 25BC

21C8 261D 25BD 2671
261E 25BE 262C 231B
261F 25BF 262D 2673


25C0 26C8
21CC 2621 25C1 26FD
21CD 2622 25C2 26FE
21CE 2623 25C3

2624 25C4 263A 26EC

21D0 2625 25C5 26DB
21D1 2626 25C6 21FE
21D2 2627 25C7 26D1
21D3 2628 25C8 2319
21D4 2629 25C9 231A
2694 219D 26A2 21F9
21D6 2695 219E 21FA
21D7 2696 219F 2674
21D8 2697

21A0 26C9
21D9 2698 21A1 26CA
2699 21A2 26A7 2.60E+08
269A 21A3 26A8 2.60E+06
269B 21A4 26A9 2.60E+07
21A5 26AA 21B3 21FF
269D 21A6 26AB 26D4
21DF 269E 21A7 21F6

2.10E+01 269F 21A8 21F7

26A0 21A9 21F8
2.10E+03 26A1 21AA 2.10E+07
26D8 26DC 26DF 2.10E+08
26D9 26DD

2.60E+01 21FB
26EA 26EE 26F1 2675

21F0 21F1 2676
264E 25EC 265C 2677
264F 25ED 265D 26CE
265E 2.10E+06 2.10E+04 26CB
265F 23CD 2.10E+05 26D7

23C0 2668 23CE

23C1 2669 23CF 2661
23C2 21ED 2.10E+10 2662
23C3 266B 21EA 2663
2664 21EB 21EC 2665
2657 23C5 266C 2666
2658 23C6 2316 2667
2659 23C7 2317 266A
265A 23C8 266E 26BF
265B 23C9 2318

26BE 26F4 26C2 266D
26F3 26C1 266F

Change “Specify your own value” label to “Other” in SharePoint choice columns

In classic list views/forms and on-premise environments, your choice columns allow you let users specify their own value. But the label is literally “Specify your own value:”. This can be changed.

Note: If you’re using the modern experience, you don’t have this issue.

To change the label, add the following script to your newform.aspx page, changing the name of the field referenced (see below). You can add this script in a script editor web part as a snippet or save it as a .js file to your Site Assets and reference it in a content editor web part.

To get the actual field label, use F12 (developer tools) when viewing the form and select the checkbox. Copy everything after the ‘#’ sign or whatever the column name is, ending in ‘FillInRadio.’

Once you’ve added that script (and updated the field name with your own), save the page and you’ll see your new label:

New Modern Page Title/Banner Layouts in SharePoint Online/O365

Recently, SharePoint Online/O365 (and soon SP 2019?) released an upgrade to the page title area of modern pages. Previously, the header area of a page was restricted to a banner image and text. Then they released an update that allowed customizing the image. Then removing the image. Now we’ve leaped ahead and you can choose from four layouts:

First edit the modern page and click the “Edit” icon on the title area:

Select a layout & alignment

Image and title


Color block


Add “tag” text above the title

Show published date

Don’t forget to save your changes and publish your page when finished.

Customize styles/formatting of SharePoint list column header rows

Note: This post applies to on-premise/server lists or O365 lists set to “classic” view. This will not work on modern views.

A little style on column header rows goes a long way. For example, just a background color and font adjustment can take your list from:





Here’s how you can apply your own styles to your list(s).

Continue reading “Customize styles/formatting of SharePoint list column header rows”

A better way to display “today’s events” from multiple calendars in SharePoint on your intranet home page

today at LMH

Below on the left are two traditional, out-of-the-box solutions for showing Today’s events in SharePoint. Notice how both take up a lot of extra space repeating today’s date (which we don’t need to see at all in a web part called “Today’s Events”) or showing gray space where there are no events. Soak that in – prime real estate on your home page goes to non-existent events. These also may require overlays and other manual labor processes that need adjusted every time a calendar is added or removed.

But on the right is what you could have. It uses search instead and displays events from all calendars a user has access to in one place. It shows only the necessary information on the home page and links to full details. And with a little CSS included in this post, it can look polished and themed. Imagine all you could do with that saved space on your home page…

Also seen above: Adding local weather to your SharePoint intranet home page
and a “this week’s menu” button for your intranet

Continue reading “A better way to display “today’s events” from multiple calendars in SharePoint on your intranet home page”

Adding local weather to your SharePoint intranet home page

Update 5/9/2019: AccuWeather has discontinued their widget. Watch for updates.

weatherI jokingly said at a recent presentation that I thought adding weather to our intranet’s home page was a good idea for employees like me who work in the basement and don’t see much of “the outside.” But it can also help with planning and decisions depending on your industry and daily routines.

Accuweather has a free script for a widget you can use that resizes perfectly on different screen sizes. I’m impressed with its simplicity and how dynamic it is.

All you need is a script editor where you’re placing the weather on your page and the following script from This script will work as-is from a straight copy and paste, but you should generate your own code from their website to paste after the closing style tag so that when clicked, users will be taken to more info specific to their location instead of mine. You can start from scratch on their site, just be sure to add the “style” tag and content below before the script they generate for you. This will get rid of a rather pesky button they include.

Upgrade your image slider on SharePoint

Your image slider is okay. But you’d like it better if it had a makeover (50 points to whoever can guess the commercial reference).

This post will show you how you can take your out-of-the-box content search web part slideshow from this:


to this:


This solution supports multi-line descriptions that don’t get cut off. It gets rid of that dreadful partially transparent overlay and gives you more of your photo uninhibited by messy design. It’s more modern, lighter and sure to impress. At the end, be sure to adjust the CSS to match your own color scheme and size needs.

Continue reading “Upgrade your image slider on SharePoint”

How to create a dynamic “this week’s menu” button for your intranet

People jokingly (or not) sometimes tell me the only reason for which they use the intranet is the cafeteria menu. So on a recent draft of a redesigned homepage, I introduced a prominent “Menu” button that would always be linked to the most recent menu uploaded by dining services.


Previously people would click a link which took them to a document library where the current menu lived, and would open it there. 2 clicks.

I had two goals for this project.

  1. Get it down to 1 click.
  2. Never have to manually update the link for the button. Set it, forget it.

Note: this could easily be applied to newsletters, updates, meeting minutes, etc. Anything that is published on a regular basis that could benefit from an always-current hyperlinked button.

Continue reading “How to create a dynamic “this week’s menu” button for your intranet”