Custom CSS recipes

This page will contain some easily adaptable, often requested snippets to be used with the Custom CSS setting.

Got suggestions? Comment in this issue please https://github.com/eramdam/BetterTweetDeck/issues/546

Hide tweet borders

.stream-item, .tweet-detail-reply .stream-item, .compose-header {
    border-bottom: 0 !important;
  }

  .in-tweet-divider::before {
    background: rgba(0, 0, 0, 0.13);
  }

Font size for a specific column

.js-column.column:nth-child(n) {
  font-size: 25px;
}

Replace n by any number and 25px by a CSS size. See:

• https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
• https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

Custom size for a specific column

.js-column.column:nth-child(n) {
  width: 25px !important;
}

Replace n by any number and 25px by a CSS size. See:

• https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
• https://developer.mozilla.org/en-US/docs/Web/CSS/width

Custom compose drawer size

:root {
    --custom-drawer-width: 600px; /* change this value */
}

.js-drawer.drawer {
    width: var(--custom-drawer-width) !important;
    left: calc(var(--custom-drawer-width) * -1) !important;
}

.js-app-content.app-content.is-open {
    transform: translateX(var(--custom-drawer-width)) !important;
}

Hide the emoji button

#emojiButton {
    display: none !important;
}

.js-drawer .js-compose-text {
    width: 100% !important;
}

Hide tweet counters

.like-count {
    display: none;
}

.retweet-count {
    display: none;
}

.reply-count {
    display: none;
}

Hide avatars

.tweet {
  padding-left: 6px !important;
}

.tweet-context .obj-left {
    width: 60px !important;
}

.activity-header .item-img {
    width: auto !important;
}

.tweet .obj-left .avatar,
.tweet .obj-left::before,
.activity-header.has-source-avatar .avatar {
    display: none !important;
}