Remove the avatars from your slack sidebar

Slack avatar-less sidebar.md

Slack has listened to feedback and given us a way to toggle off the sidebar avatars.

(This only seems to be available in the Beta channel at the moment)

Display or hide profile photos

1. From your desktop, click your profile picture in the top right.
2. Select Preferences from the menu.
3. Click Sidebar in the left-side column.
4. Check or uncheck the boxes next to Show profile photos next to DMs.

View previous instructions

1. Message yourself /slackdevtools
2. In the DevTools console:

function addStyle (styleString) {
  const style = document.createElement('style');
  style.textContent = styleString;
  document.head.append(style);
}

addStyle(`
  .p-channel_sidebar__presence_icon.p-channel_sidebar__presence_icon--on-avatar {
    transform: scale(1.5) translateX(-6px) translateY(-5px);
  }

  .p-channel_sidebar__mpim_counter {
    transform: scale(1.2) translateX(-4px) translateY(-4px);
  }

  span.p-channel_sidebar__mpim_avatars_mpim1.c-avatar {
    opacity: 0;
  }

  .p-channel_sidebar__channel span.c-avatar {
    opacity: 0;
  }

  .p-channel_sidebar__user_avatar--hide-presence .p-channel_sidebar__presence_icon--on-avatar {
    display: block;
    transform: scale(1.5) translateX(-3.5px) translateY(-9px);
  }
`);

Thank you.

You are an absolute lifesaver, thank you!

I think if you combine the code here with the approach in this gist you can make it persist between restarts by patching the preload-bundle.js file in your Slack.app file to inject this piece of CSS on every domLoad call on Slack.

@mzjp2, now we are cooking with gas! Thanks for the pointer.

thank you so much for this!

Adding .p-channel_sidebar__channel, .p-channel_sidebar__link { margin-left: 12px; } will align all the list items so that category icons are on a more clear key line:

That worked like ... awesome. Thank you!

Awesome. Thanks!

Thanks, man! Appreciate it a lot!

Thanks

Combined this idea and this gist and fix points size:
look here

Thanks!

You are the hero we don't deserve.

Thank you! This has been a huge help.

Awesome, this is great - whatever donut came up with the icons list - must have graduated in UI rocket science. one last question how can we make it persistent.

Works like magic :)
Thanks a lot!

Add text guide for permanent fix.

Thank you!!!! You made my day!

Thanks you! Much appreciated!

Has anyone successfully combined this and ryanhatfield's script into one element yet? If not, would anyone be willing to give me a pointer or two on how to smash these two together?

This code is a game changer and I'm really grateful for the UX improvement it gave back to me., so thanks a ton Joshua! On my company's workspace tho, it reverts pretty frequently - sometimes several times a day. I'd really like to apply a more stable hack/patch/whatever and these two pieces are the best approach I've found so far. I feel out of my depth trying to meld them. I assume it'll require modifying this section but my brain is just blue screening when I get beyond that conclusion.

Has anyone successfully combined this and ryanhatfield's script into one element yet? If not, would anyone be willing to give me a pointer or two on how to smash these two together?

@imasuperpanda - scroll up a few comments

D'oh! Thanks, @mzjp2!

Slack have listened to the feedback and made this change configurable!

How do I update my settings?
Click your workspace name (top left) > Preferences > Sidebar > “Show profile photos next to DMs”

Note: you may need to do a hard refresh (Cmd/Ctrl+Shift+R) to see it

@sjhale 🎉

(This only seems to be available in the Beta channel at the moment)

This option seems to be available in stable releases too 🎉 (not sure if Slack does any gradual rollout of new changes but I am using a stable release and I can see the option there)