I'm guessing this is caused by the name the app uses for that section changing in an update (that happens a lot to discord themes), it might be something else though. I tried to fix it but only managed to make it worse so I'm just putting this here so maybe someone who can fix it will notice.

Default theme:

Metrology:

In an attempt to hide the shortcut indicators that appear on hover I rashly used a line of css without testing on chat.beeper.com and now I hid most buttons, including the "Apply" button for CSS theming.

.mx_AccessibleButton:last-child {display: none;}

Is there anyway to reset the CSS without uninstalling?

Hide the timestamp on messages doesn't work

A few of my custom theme hacks for improving Inbox Favourites (max-height, scrollable, reduce avatar size, etc):

• https://gist.github.com/0xdevalias/3d2f5a861335cc1277b21a29d1285cfe#devalias-beeper-css-hacks

Announcement tweet: https://twitter.com/_devalias/status/1651766148046921728

Reddit thread: https://www.reddit.com/r/beeper/comments/13cezdc/beeper_ui_ux_hacksimprovements_via_custom_themes/

Snapshot of gist contents at time of posting this issue follows...

Improving UI/UX for users with lots of favourites

(Reported to Beeper Support as DES-10976 (and probably at least one other time before that))

Reduces the size of the user avatars in the favourites section of the unified inbox, sets a max-height to the favourites area, and makes the overflow vertically scrollable.

/* Inbox - Favourites */

.rooms > .favourites {
  /* Custom Variables */
  --devalias-fav-section-max-height: 30vh;
  --devalias-fav-width: 40px;
  --devalias-fav-height: 40px;
  --devalias-fav-avatar-width: 30px;
  --devalias-fav-avatar-height: 30px;
  --devalias-fav-avatar-font-size: 17px;
}

/* .bp_LeftPanel .rooms .favourites__icons {
  TODO: This is where display: grid is set.. can we somehow make it more compact so it automagically fits the tiles on the row as space allows?
}*/

.rooms > .favourites > .favourites__icons > .favourites__tiles {
  max-height: var(--devalias-fav-section-max-height, none) !important;
  overflow: auto;
}

.rooms > .favourites > .favourites__icons > .favourites__tiles > .favourites__row > span {  
  --fav-width: var(--devalias-fav-width, 40px) !important;
}

.bp_LeftPanel .rooms .favourites_avatar {
  height: var(--devalias-fav-height, 60px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small {
  height: var(--devalias-fav-height, 48px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .mx_BaseAvatar_image {
  width: var(--devalias-fav-avatar-width, 44px) !important;
  height: var(--devalias-fav-avatar-height, 44px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .mx_BaseAvatar_initial {
  font-size: var(--devalias-fav-avatar-font-size, 19.8px) !important;
  width: var(--devalias-fav-avatar-width, 44px) !important;
  line-height: var(--devalias-fav-avatar-width, 44px) !important;
}

.bp_LeftPanel .rooms .favourites .bp_RoomTile.small .outline .outline-details {
  width: var(--devalias-fav-width, var(--fav-width, 45px)) !important;
}

Improving UI/UX with the Custom CSS TextArea

(Reported to Beeper Support as DES-10977)

/* Custom CSS TextArea */

.mx_AppearanceUserSettingsTab .mx_Field.mx_Field_textarea {
  width: 100% !important;
  height: 500px !important;
}

Before: Textarea is tiny and squashed and barely usable	After: The textarea expands to take up a decent/usable amount of the available space

Hi,
I am not able to connect my Google Messaging app. I have tried to connect it but it keeps disconnecting. I think it's because I am getting a second request from Google to match an image but I don't get the other image since I don't know where to look. The first security image comes up in the Google message app itself but I am not sure where the other would show up.
I appreciate the help.
Machelle

Is there a way - even a hacky way - to develop a Beeper theme without editing in a textarea of the preferences pane and clicking Apply? Maybe the theme is stored somewhere, or imports from a different place, or can be edited with a text editor?

This is what i mean. Marked with pink arrow

Creating themes is sometimes difficult and takes time in the application.

What I suggest is to create a dummy or sample html page with sample/fake chats, users and content.

Theme developers then can use this in their desired editor and create themes offline.

Once that is done, it can be finally tested in the app.

Down the track, possible an online UI theme maker can be added using similar concept.

I have to apply it manually every time I start the app.

beeper-desktop version: 3.70.17
Arch Linux
Installed from AUR (beeper-latest-bin)

Anywhere to see the source CSS? Seems pretty useless to "support themes" without knowing what the classnames for everything is. The themes in here have tons of broken classes.

Specifically I'm trying to disable message previews in the inbox lists. Which according to the themes/images here should have been this (but it's clearly no longer):

.bp_RoomTile .preview {display:none}

Closing: found what I was looking for in the CSS hacks issue