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): th.ms-vh2-nofilter div[DisplayName=’Column1′],th.ms-vh2 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>
th.ms-vh2-nofilter div[DisplayName='Justification'],th.ms-vh2 div[DisplayName='Justification']{
    min-width:500px!important;
    width:500px!important;
}
</style>

Datasheet/Quick Edit Views

<style>
th[Title='Justification']{
    min-width:500px!important;
    width:500px!important;
}
</style>

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.

<style>
th[Title='Justification'],th.ms-vh2-nofilter div[DisplayName='Justification'],th.ms-vh2 div[DisplayName='Justification']{
    min-width:500px!important;
    width:500px!important;
}
</style>

Multiple columns

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

<style>
th[Title='Justification'],th.ms-vh2-nofilter div[DisplayName='Justification'],th.ms-vh2 div[DisplayName='Justification']{
    min-width:500px!important;
    width:500px!important;
}
th[Title='Other Column'],th.ms-vh2-nofilter div[DisplayName='Other Column'],th.ms-vh2 div[DisplayName='Other Column']{
    min-width:200px!important;
    width:200px!important;
}
</style>

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!
<style>
.ms-formbody tr:nth-child(even) {
background-color: #ffffff;
}
th.ms-gridT1 {
width:310px;
}
</style>

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

&#x2665;

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.

260025A0260E25AE
260125A1260F25AF
260225A2261021C9
260325A3261121CA
260425A4261225B2
260525A5261325B3
260625A6261425B4
260725A7261525B5
25A8261625B621CF
260925A9261725B7
260A25AA261825B8
260B25AB261925B9
260C25AC261A25BA
260D25AD261B25BB
267823F6268621D5
267923F726872190
267A23F826882191
267B23F926892192
267C23FA268A2193
267D2390219421DA
267E2391219521DB
267F2392219621DC
2680219721DD269C
26812394219821DE
2682239626902199
268323972691219A
268423982692219B
268523992693219C
26CC26CF26D226D5
26CD26D026D326D6
26DA26DE2.60E+022.60E+05
21EE231521F421F5
262A25CA264025D8
262B25CB264125D9
25CC2642265025EE
25CD2643265125EF
262E25CE26442652
262F25CF26452653
263825D026462654
263925D126472655
25D22648265623C4
263B25D326492.50E+08
263C25D4264A2.50E+09
263D25D5264B2.50E+10
263E25D6264C25EA
263F25D7264D25EB
21AB26B021B926F2
26A321AC26B121BA
26A421AD26B221BB
26A521AE26B326F5
26A621AF26B426F6
21B026B526F726C3
21B126B626F826C4
21B226B726F926C5
26B826FA26C62672
21B426B926FB26C7
26AC21B526BA26FC
26AD21B626BB21C4
26AE21B726BC21C5
26AF21B826BD21C6
2.60E+032.60E+0926EB26EF
2.60E+042.60E+1026ED26F0
2.10E+0921F321FC21FD
21F2235F23F423F5
21C7261C25BC2670
21C8261D25BD2671
261E25BE262C231B
261F25BF262D2673
21CB262025C026C8
21CC262125C126FD
21CD262225C226FE
21CE262325C326FF
262425C4263A26EC
21D0262525C526DB
21D1262625C621FE
21D2262725C726D1
21D3262825C82319
21D4262925C9231A
2694219D26A221F9
21D62695219E21FA
21D72696219F2674
21D8269721A026C9
21D9269821A126CA
269921A226A72.60E+08
269A21A326A82.60E+06
269B21A426A92.60E+07
21A526AA21B321FF
269D21A626AB26D4
21DF269E21A721F6
2.10E+01269F21A821F7
2.10E+0226A021A921F8
2.10E+0326A121AA2.10E+07
26D826DC26DF2.10E+08
26D926DD2.60E+0121FB
26EA26EE26F12675
21EF21F021F12676
264E25EC265C2677
264F25ED265D26CE
265E2.10E+062.10E+0426CB
265F23CD2.10E+0526D7
23C0266823CE2660
23C1266923CF2661
23C221ED2.10E+102662
23C3266B21EA2663
266421EB21EC2665
265723C5266C2666
265823C623162667
265923C72317266A
265A23C8266E26BF
265B23C9231826C0
26BE26F426C2266D
26F326C1266F

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

Plain

Color block

Overlap

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:

Before:

headerwithoutstyle

to
After:

headerstyle

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
https://www.accuweather.com/en/free-weather-widgets 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 Accuweather.com. 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:

2018-03-24_17-10-39

to this:

2018-03-24_17-26-46

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.

menu

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”