A few custom theme hacks for improving Inbox Favourites (max-height, scrollable, reduce avatar size, etc) and other things that frustrate me with Beeper's UI/UX #6
Comments
Add an 'external link' icon next to the 'Chat Networks' 'tab' in the main 'Settings' dialogUpdated to also add an 'external link' icon next to the 'Chat Networks' 'tab' in the main 'Settings' dialog: /* 'Chat Networks' 'tab' in the 'Settings' dialog*/
.mx_SettingsDialog_content > .mx_TabbedView > .mx_TabbedView_tabLabels > .mx_TabbedView_tabLabel:has(> span.mx_UserSettingsDialog_chatSettingsIcon) > .mx_TabbedView_tabLabel_text::after {
content: "🔗";
margin-left: 16px;
}Before: After: This is a hacky workaround for Beeper bug report
|
Reduce the 'in your face' bright/colourful/'glare' from the network icons on the new 'View Space Bar in side panel' lab(Edit: There is a variation on this tweak/workaround documented below (Ref), that allows replacing these new icons with the old lineart icons) Added a new tweak to reduce the 'in your face' bright/colourful/'glare' from the network icons on the new 'View Space Bar in side panel' lab: /* Beeper Space Sidebar */
#beeperSpaceBar > .mx_AccessibleButton {
opacity: 0.8;
filter: grayscale(75%);
}
|
0xdevalias
changed the title
Add the 🔗 emoji after the 'Chat Networks' item in the main settings menu + remove extra noise from settings menuA variation on #6 (comment) that was requested by a user in the 'Beeper Community' chat, which adds the 🔗 emoji after the 'Chat Networks' item in the main settings menu as well: /* 'Chat Networks' button on the main Settings menu */
#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Chat Networks"]::after {
content: "🔗";
}
Though for my personal needs.. why don't we just remove all of those extra/annoying/cluttering buttons entirely! /* Main Settings Menu */
#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Chat Networks"] {
display: none;
}
#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Mark All As Read"] {
display: none;
}
#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Check for Update"] {
display: none;
}
#mx_ContextualMenu_Container .mx_AccessibleButton[aria-label="Download Mobile App"] {
display: none;
}
|
|
From 'Beeper Community' channel, exploring the possibility of hacking the new 'beeper space bar' to make use of the old chat network icons as a variation to #6 (comment):
|
Remove the 'Archive' button from the new 'beeper spaces sidebar'Further 'beeper space sidebar' customisations/hacks, based on a request in 'Beeper Community' channel:
|
Hide the floating 'Archived' and 'Sweep' buttons in the new 'beeper space sidebar'(Reported to Beeper Support as With the new 'beeper space sidebar', when it's collapsed, we can hide the floating 'Archived' and 'Sweep' buttons (and some empty divs that block selecting chats around that area) as follows: /* Beeper Space Sidebar - Collapsed - Hide Empty Div Blockers */
.mx_MatrixChat > div:first-child > div:empty {
display: none;
}
/* Beeper Space Sidebar - Collapsed - Hide Floating Archived Button */
.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-archive16.2003809.svg"]) {
display: none;
}
/* Beeper Space Sidebar - Collapsed - Hide Floating Sweep Button */
.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/sweep16.36d9c67.svg"]) {
display: none;
}Edit: Contribution from
|
Change the network icons in the new 'beeper space sidebar' to use the old lineart iconsBeeper Support ReportReported to Beeper Support as CSS Hacks
Following on from my initial research above (Ref), here is how we can change the network icons in the new 'beeper space sidebar' to use the old lineart icons instead. The following is a basic example, using the 'archive' as an example; but similar rules could be written to target all of the networks: /* Beeper Space Sidebar - Archive - Hide Original Icon */
#beeperSpaceBar svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"] {
display: none
}
/* Beeper Space Sidebar - Archive - Use Lineart Icon */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]) > div > div > div {
width: 100%;
height: 100%;
background-image: url("nova://nova-web/webapp/img/social/lineart/archive.4363fd0.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}This is a (probably non-exhaustive) list of the new icons that can be targeted (as above example) to be replaced: ## Constructed from paths in `nova://nova-web/webapp/bundles/bf956948361b1661854d/init.js`
svg[data-src="img/beeper/add-network16.1eb5cb1.svg"]
svg[data-src="img/beeper/square-androidsms16.4c0b49c.svg"]
svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]
svg[data-src="img/beeper/square-beeper16.749ed9b.svg"]
svg[data-src="img/beeper/square-bookmarks16.6853926.svg"]
svg[data-src="img/beeper/square-discord16.e91cca3.svg"]
svg[data-src="img/beeper/square-facebook16.9d9e23d.svg"]
svg[data-src="img/beeper/square-googlechat16.61657b2.svg"]
svg[data-src="img/beeper/square-imessage16.11b6604.svg"]
svg[data-src="img/beeper/square-inbox16.ea471fd.svg"]
svg[data-src="img/beeper/square-instagram16.1e8ed4e.svg"]
svg[data-src="img/beeper/square-linkedin16.f764edc.svg"]
svg[data-src="img/beeper/square-lowpriority16.6779879.svg"]
svg[data-src="img/beeper/square-signal16.85ba0c4.svg"]
svg[data-src="img/beeper/square-slack16.a4e40dd.svg"]
svg[data-src="img/beeper/square-telegram16.d011ded.svg"]
svg[data-src="img/beeper/square-twitter16.ddd9bad.svg"]
svg[data-src="img/beeper/square-whatsapp16.411f722.svg"]This is a (probably non-exhaustive) list of the lineart icons that can be used (as above example) as replacements: So you could replace all icons on the space sidebar with something like this: /* Beeper Space Sidebar - Hide Original Icons */
#beeperSpaceBar svg {
display: none
}
/* Beeper Space Sidebar - Use Lineart Icons */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg) > div > div > div {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* Beeper Space Sidebar - Use Lineart Icons - Inbox */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-inbox16.ea471fd.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart/smart-inbox.04b2d4e.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Low Priority */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-lowpriority16.6779879.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart/archive.4363fd0.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Archive */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart/archive.4363fd0.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Bookmarks */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-bookmarks16.6853926.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart/bookmarks.3f3eb77.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Facebook */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-facebook16.9d9e23d.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/messenger.1544eb2.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Instagram */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-instagram16.1e8ed4e.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/instagram.e9184e9.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - iMessage */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-imessage16.11b6604.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/imessage.aedae37.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Twitter */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-twitter16.ddd9bad.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/twitter.972096c.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Telegram */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-telegram16.d011ded.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/telegram.77fa320.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Signal */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-signal16.85ba0c4.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/signal.315d199.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - LinkedIn */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-linkedin16.f764edc.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/linkedin.2297fef.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Discord */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-discord16.e91cca3.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/discord.6daf490.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Beeper */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-beeper16.749ed9b.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/beeper.c685f80.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - WhatsApp */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-whatsapp16.411f722.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/whatsapp.2210499.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Add Network */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/add-network16.1eb5cb1.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart/add-space.b91886d.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Android SMS (contributed by @tobiah:beeper.com) */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-androidsms16.4c0b49c.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/sms.ca23784.svg");
}
/* Beeper Space Sidebar - Use Lineart Icons - Google Chat (contributed by @tobiah:beeper.com) */
#beeperSpaceBar > .mx_AccessibleButton:has(.bp_icon svg[data-src="img/beeper/square-googlechat16.61657b2.svg"]) > div > div > div {
background-image: url("nova://nova-web/webapp/img/social/lineart-color/dark/gchat.bc14811.svg");
}
IMO it's probably nicer to keep the 'original' new icons for the following though:
So we could modify our main 'hide original icons' CSS theme hack as follows, and then remove the extra rules from the above code that were setting the lineart svg's for these buttons: /* Beeper Space Sidebar - Hide Original Icons */
#beeperSpaceBar svg:not(svg[data-src="img/beeper/square-inbox16.ea471fd.svg"]):not(svg[data-src="img/beeper/square-lowpriority16.6779879.svg"]):not(svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]):not(svg[data-src="img/beeper/square-bookmarks16.6853926.svg"]):not(svg[data-src="img/beeper/add-network16.1eb5cb1.svg"]) {
display: none
}Which will then end up looking something more like this ('second variation'), which IMO looks much nicer all around:
|
With the 'new' 'Beeper Space Sidebar', hide the floating 'open archive' button, and always show the floating 'Archive All Read Messages' buttonBeeper Support ReportReported to Beeper Support as CSS HacksUpdates:
/* Beeper Space Sidebar - Collapsed - Hide Floating 'Open Archive' Button */
.mx_MatrixChat > div > div > .mx_AccessibleButton:has(> .bp_icon > div > svg[data-src="img/beeper/archive16.2003809.svg"]) {
display: none;
}
/* Beeper Space Sidebar - Show Floating 'Archive All Read Messages' Button */
.mx_MatrixChat > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
width: max-content !important;
}
.mx_MatrixChat > div > div > div:has(.mx_AccessibleButton > .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
display: block !important;
}
.mx_MatrixChat > div > div > div > .mx_AccessibleButton:has(> .bp_icon > div > svg[data-src="img/beeper/new-sweep16.978771b.svg"]) {
opacity: unset;
}CaveatsThe release notes that introduced this change stated that the 'Archive All Read Messages' button would only be visible when there were actually message that it could archive. I didn't test if that was true, but if it was, the CSS hacks here in their current form may break that aspect, and just make it always visible. ScreenshotsBeforeInbox with Sidebar Collapsed, Not Hovering
Inbox with Sidebar Collapsed, Hovering 'Open Archive'
Inbox with Sidebar Collapsed, Hovering 'Archive All Read Messages'
Inbox with Sidebar Opened, Not Hovering
Inbox with Sidebar Opened, Hovering
AfterInbox with Sidebar Collapsed, Not Hovering
Inbox with Sidebar Collapsed, Hovering 'Open Archive' N/A, it's hidden now Inbox with Sidebar Collapsed, Hovering 'Archive All Read Messages'
Inbox with Sidebar Opened, Not Hovering
Inbox with Sidebar Opened, Hovering
|
Bonus Hacks - Accessing the React internals for the Beeper 'Rooms' component using Beeper / Electron's DevToolsconst el = $('#matrixchat > .mx_MatrixChat_wrapper > .mx_MatrixChat > .bp_LeftPanel > .bp_LeftPanel_contentWrapper > .bp_LeftPanel_content > .rooms')
const elProps = Object.getOwnPropertyNames(el);
const elReactFiberKey = elProps.filter(k => k.includes('__reactFiber'))
const elReactPropsKey = elProps.filter(k => k.includes('__reactProps'))
const elReactInternals = {
reactFiber: el[elReactFiberKey],
reactProps: el[elReactPropsKey],
}
//console.log(elReactInternals)
const UnreadList = elReactInternals.reactProps.children[3].props.children[0]
const ReadList = elReactInternals.reactProps.children[3].props.children[1]
console.log('Inbox Chats', UnreadList.props.unreads)
// (303) [Room, Room, ...]
console.log('Archived Chats', ReadList.props.rooms)
// (1633) [Room, Room, ...] |
Reduce the size of the 'new' 'Beeper Space Sidebar' + it's 'chat network' buttonsBackground ContextBased on a user request in 'Beeper Community' chat, here are some quick (unrefined, could definitely be improved upon, particularly the CSS selectors used for targeting the elements) hacks for reducing/changing the size of the new 'Beeper Sidebar', and the network icons within it.
Beeper Support ReportN/A CaveatsThese are very quick/hacky rules (I would probably figure better CSS selectors for them since currently they are based on the CSS-in-JS selectors that are almost certainly going to change with future Beeper release versions.. but it might work well enough), and without spending much time tweaking the actual sizes to be 'just right' (as not really sure what would work best for you), here are some CSS hacks to mess around with the sidebar network icon sizes (you may need to use CSS Hacks/* Sidebar */
._3dTltcKuNeSKUTCEM-UGN0._2BAyduJRAqtYY0FLUV2lT0 {
width: 30px;
}
/* Sidebar - Buttons - 'Toggle Sidebar' - SVG Icon */
.YNfZXerLXxU4qXwy0a5gv svg {
width: 15px;
height: 15px;
}
/* Sidebar - Buttons*/
.ED6hnM59dIDcpfzGwRgcw {
width: 15px;
height: 15px;
}
/* Sidebar - Buttons - SVG Icons */
.ZQDbHi0qd3Vf1JPuEisR7 svg {
width: 15px;
height: 15px;
}
/* Sidebar - Buttons - Notfication Count Bubble */
.Yb_gdONE4knKPc_e7bgN3 {
font-size: 8px;
height: 10px;
min-width: 10px;
top: -6px;
right: -10px;
}ScreenshotsIt's a little hard to see the side by side in these images.. but notice how the 'Before' sidebar extends for '6 favourites + 6.5 chats' of height, whereas the 'After' only extends of '6 favourites + 3 chats' of height.
|
Hide Left Panel/Sidebar While Chat Is OpenBackground ContextBased on a user request in 'Beeper Community' chat:
Beeper Support ReportN/A CaveatsN/A CSS Hacks/**********************************************/
/* Hide Left Panel/Sidebar While Chat Is Open */
/**********************************************/
.mx_MatrixChat:has(> .bp_MainPanel > .mx_RoomView) > .bp_LeftPanel {
display: none;
}
.mx_MatrixChat:has(> .bp_MainPanel > .mx_RoomView) > div:has(.spaceBar) {
display: none;
}ScreenshotsBeforeBeeper's inbox/side panel are visible whether a chat is open or closed:
AfterBeeper's inbox/side panel are visible only when a chat is closed: Chat Open: Chat Closed: |
Change the
|
Ensure full image preview is visible, rather than a zoomed part of itBackground ContextIt annoyed me when images shared in chats with a certain aspect ratio ended up getting zoomed in to fill the space (and looking super weird in the process), rather than just being scaled down and showing the full content. Beeper Support ReportN/A CaveatsN/A CSS Hacks/* Ensure full image preview is visible, rather than a zoomed part of it */
.mx_EventTile_image .mx_MImageBody img.mx_MImageBody_thumbnail {
object-fit: contain !important;
}ScreenshotsBefore
After
|
Change the colours of existing
|
Beeper Spacebar Icon ModificationsWith help from @0xdevalias, I put together the following code to make two modifications to the existing Beeper Spacebar bridge icons: removing white backgrounds and adjusting sizing to make all icons roughly the same size thereafter. /* Spacebar Menu - Modify Icons */
/* Remove Inbox Icon Background & Increase Size */
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-inbox16.ea471fd.svg"] > path:nth-child(1) {
display: none
}
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-inbox16.ea471fd.svg"] > path:nth-child(2) {
fill: white;
fill-opacity: 1.0;
}
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-inbox16.ea471fd.svg"] {
width: 35px;
height: 35px;
}
/* Remove Beeper Icon Background & Increase Size */
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-beeper16.749ed9b.svg"] > g > path:nth-child(1) {
display: none
}
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-beeper16.749ed9b.svg"] {
width: 34px;
height: 34px;
}
/* Remove Facebook Messenger Icon Background & Increase Size */
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-facebook16.9d9e23d.svg"] > path:nth-child(1) {
display: none
}
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-facebook16.9d9e23d.svg"] {
width: 31px;
height: 31px;
}
/* Remove Android SMS Icon Background & Increase Size */
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-androidsms16.4c0b49c.svg"] > path:nth-child(1) {
display: none
}
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-androidsms16.4c0b49c.svg"] {
width: 37px;
height: 37px;
}
/* Decrease Size Of iMessage Icon */
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-imessage16.11b6604.svg"] {
width: 25px;
height: 25px;
}
/* Remove Bookmarks Icon Background & Increase Size */
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-bookmarks16.6853926.svg"] > path:nth-child(1) {
display: none
}
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-bookmarks16.6853926.svg"] > path:nth-child(2) {
fill: white;
fill-opacity: 1.0;
}
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/square-bookmarks16.6853926.svg"] {
width: 36px;
height: 36px;
}
/* Increase Size Of Add Network Icon */
.spaceBar .mx_AccessibleButton .bp_icon svg[data-src="img/beeper/add-network16.1eb5cb1.svg"] {
width: 30px;
height: 30px;
}The above custom CSS includes networks for which I have bridges connected, but the same format can be used for other bridge icons using the following list of SVG callouts: svg[data-src="img/beeper/square-inbox16.ea471fd.svg"]
svg[data-src="img/beeper/square-lowpriority16.6779879.svg"]
svg[data-src="img/beeper/square-archive16.b1ef8a0.svg"]
svg[data-src="img/beeper/square-bookmarks16.6853926.svg"]
svg[data-src="img/beeper/square-facebook16.9d9e23d.svg"]
svg[data-src="img/beeper/square-instagram16.1e8ed4e.svg"]
svg[data-src="img/beeper/square-imessage16.11b6604.svg"]
svg[data-src="img/beeper/square-twitter16.ddd9bad.svg"]
svg[data-src="img/beeper/square-telegram16.d011ded.svg"]
svg[data-src="img/beeper/square-signal16.85ba0c4.svg"]
svg[data-src="img/beeper/square-linkedin16.f764edc.svg"]
svg[data-src="img/beeper/square-discord16.e91cca3.svg"]
svg[data-src="img/beeper/square-beeper16.749ed9b.svg"]
svg[data-src="img/beeper/square-whatsapp16.411f722.svg"]
svg[data-src="img/beeper/add-network16.1eb5cb1.svg"]ScreenshotsBefore
After
After With Beeper Midnight
|
Hide the Pin/Unpin and/or 'Archive' buttons that appear on hover of each chat room in inboxThe following comes from a request from the Beeper Community chat. Archive button: .bp_LeftPanel .rooms div[data-type='bp_RoomTile'] div[aria-label='Archive'] {
display: none;
}Pin/Unpin button: .bp_LeftPanel .rooms div[data-type='bp_RoomTile'] div[aria-label*='Pin'],
.bp_LeftPanel .rooms div[data-type='bp_RoomTile'] div[aria-label*='Unpin'] {
display: none;
}It relates to hiding these buttons here:
|
Hide the help question mark above the left hand sidebarThe following comes from a request from the Beeper Community chat (Ref)
.mx_MatrixChat > .bp_LeftPanel > .bp_Header > .controls > div:has(svg[data-src="img/beeper/question-mark16.7154382.svg"]) {
display: none;
} |
Hiding the white border to the right of the left hand sidebar
|
Kinda hacky beeper "compact room list" css themeThe following comes from @j0lol from the Beeper Community chat Before: After:
|
Hide the timestamp on messagesThe following comes from a request from the Beeper Community chat. CaveatsThis is a quick hack, and it's possible there are unintended side effects and/or that a more explicit/better rule could be used to achieve this. CSS Hacks.mx_MessageBody .mx_MessageTimestamp {
display: none;
}ScreenshotsBefore
After
|
Hide certain chats, chats by network, or entire networks from the unified inbox (while still showing in their specific network view)Background ContextThe following comes from a request from
Beeper Support ReportN/A Caveats
CSS HacksHide chat by title when not on specific network viewThis little CSS selector hack let's us figure out if we're in the inbox or not: $$('.bp_LeftPanel:has(svg[data-src="img/beeper/back16.024b7d1.svg"])')This let's us target the chat in the inbox with title 'Beeper Community': $$('div[data-type="bp_RoomTile"]:has(div[title="Beeper Community"])')This will target the 'Beeper Community' when in the main inbox, but not in a 'sub-network' (eg. one that has a back button): $$('.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(div[title="Beeper Community"])')So this rule will hide it when in the inbox, while still showing it on the specific network tab: .bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(div[title="Beeper Community"]) {
display: none;
}And that same pattern could be used to hide any other arbitrary chat from the main inbox Hide chat by network when not on specific network viewWe could also target all chats of a specific network using something like the following: $$('div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper)')$$('div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_facebook)')etc These seem to be all the possible icon classes you could use to target in this way (in Which could then be used to, for example, hide all of a specific network from your main inbox, while still allowing it to show on it's specific network filtered page: $$('.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper)')Which as a CSS rule would be: .bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper) {
display: none;
}Hide chat by title+network when not on specific network viewYou could also combine those techniques so that you only hide a chat with a certain title, from a certain network, which might be helpful in some situations if you have chats with duplicate names, etc: $$('.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper):has(div[title="Beeper Community"])')Which as a CSS rule would be: .bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper):has(div[title="Beeper Community"]) {
display: none;
}De-emphasise chat by title+network when not on specific network viewA variation on this technique, instead of fully hiding the chat, we can just de-emphasise the chat using /*****************************************************/
/* De-emphasise distracting chats - Beeper Community */
/*****************************************************/
.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper, svg[data-src="img/beeper/color-beeper16.1c8391b.svg"]):has(div[title="Beeper Community"]) {
opacity: 0.5;
}
/*******************************************************/
/* De-emphasise distracting chats - Beeper SDK Hackers */
/*******************************************************/
.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper, svg[data-src="img/beeper/color-beeper16.1c8391b.svg"]):has(div[title="Beeper SDK Hackers"]) {
opacity: 0.5;
}Before After Matching partial title (rather than exact)It's also possible to use CSS attribute selectors (which is what we are using here) to non-exactly match the
Based on this, we could match for example, any chat that contains the word /*********************************************/
/* De-emphasise distracting chats - *Beeper* */
/*********************************************/
.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper, svg[data-src="img/beeper/color-beeper16.1c8391b.svg"]):has(div[title*="Beeper"i]) {
opacity: 0.5;
}We could even combine some of these together, for example, matching any chat that contains the (case insensitive) word /***************************************************************/
/* De-emphasise distracting chats - *Beeper* Community/Hackers */
/***************************************************************/
.bp_LeftPanel:not(:has(svg[data-src="img/beeper/back16.024b7d1.svg"])) div[data-type="bp_RoomTile"]:has(.nv_BridgedIcon_beeper, svg[data-src="img/beeper/color-beeper16.1c8391b.svg"]):has(div[title*="Beeper"i]):has(div[title*="Community"i], div[title*="Hackers"i]) {
opacity: 0.5;
} |
Ensure 'Report a Problem' dialog doesn't take over the entire screenBackground ContextEver since the 'Report a Problem' flow was redesigned to be a modal taking over the full screen with a blindingly bright purple background, I've kind of hated it and wished it would go back to how it was. Today it annoyed me enough to hack together some CSS rules to fix it again. Beeper Support ReportI know I definitely reported this when the new redesign first came out, but I have no clue what the support report number for it was now. CaveatsN/A CSS Hacks/******************************************************************/
/* Ensure 'report bug' dialog doesn't take over the entire screen */
/******************************************************************/
#mx_Dialog_Container div[aria-describedby="report_bug"] {
/* Don't take up the entire screen */
width: fit-content;
height: fit-content;
padding: 20px;
border-radius: 20px;
/* Center the dialog */
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}ScreenshotsBeforeMain Dialog Menu: Report a Problem: Share Feedback: AfterMain Dialog Menu: Report a Problem: Share Feedback: Your Report Was Sent: |
Updated here for web users: https://userstyles.world/style/11528/beeper-compact-sidebar and the gist is still updated for desktop users :) |
This doesn't seem to work properly anymore. The height of the avatars are changing, but this results in a lot of whitespace beetween the rows now. When I add this line to the code it starts working (but with some overlapping which could be fixed by tweaking all the other values): |
|
Amazing! That's a lot of good hacks. Any idea how to change the Beeper app Icon? The Beeper AppImage icon is ugly. |
@ShakeebIVIS Sounds like it's something that likely isn't customizable from CSS/etc: |
|
WhatsApp-like coloring of names in group conversations rather than coloring the message box: 
|
A few of my custom theme hacks for improving Inbox Favourites (max-height, scrollable, reduce avatar size, etc):
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.
Before: Inbox is flooded by favourites
After: ✨👌
Improving UI/UX with the Custom CSS TextArea
(Reported to Beeper Support as
DES-10977)The text was updated successfully, but these errors were encountered: