https://github.com/clins1994/beeper-custom-css
Custom CSS styles for Beeper.app that transforms the interface with compact layouts and improved visual organization. Features include a simple setup/undo system using bash scripts. Instructions are on README.md
https://github.com/clins1994/beeper-custom-css
bash-script bash-scripting beeper css custom-css
Last synced: 2 months ago
JSON representation
Custom CSS styles for Beeper.app that transforms the interface with compact layouts and improved visual organization. Features include a simple setup/undo system using bash scripts. Instructions are on README.md
- Host: GitHub
- URL: https://github.com/clins1994/beeper-custom-css
- Owner: clins1994
- License: mit
- Created: 2025-04-12T02:48:38.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-12T10:47:54.000Z (2 months ago)
- Last Synced: 2025-04-12T19:16:50.439Z (2 months ago)
- Topics: bash-script, bash-scripting, beeper, css, custom-css
- Language: HTML
- Homepage:
- Size: 107 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Beeper Custom CSS
This repository contains custom CSS styles for Beeper.app. It uses a symlink setup to automatically apply any changes you make to the CSS file.
## Issue tracker
📝 TODO
🛠️ WIP (work in progress)
🐛 Bug
✅ Done
- ✅ Make AccountFilters compact (emojis)
- ✅ Add dividers
- 🛠️ Make PinnedThreads compact
- ✅ Styling groundwork
- 🛠️ Deal with unreadIndicator (check screenshot)
- ✅ Avatars of non-pinned threads re-sized
- ✅ Show an emoji when no threads are present 🤫
- ✅ Show only the beeper logo on the welcome screen 🤫
- 📝 Make threads compact
- 📝 Do something about the scrollbar
- 💡 Let me know your ideas
### Preview
## Setup
1. Clone this repository:
```bash
git clone https://github.com/clins1994/beeper-custom-css.git
cd beeper-custom-css
```
2. Run the setup script:
```bash
chmod +x setup.sh
./setup.sh
```
The setup script will:
- Check if custom.css exists in the repository
- Backup your original custom.css file (if it exists) as custom.css.bak
- Create a symlink from Beeper's directory to your repository file
## Using Custom CSS
1. Edit the `custom.css` file in this repository
2. In Beeper, type "Reload custom CSS" in the command bar to see your changes
Tip: on mac you can open dev tools from beeper with the shortcut CMD + OPTION + I since it is an electron app
## Undoing Changes
If you want to revert to your original CSS:
1. Run the undo script:
```bash
chmod +x undo.sh
./undo.sh
```
The undo script will:
- Remove the symlink
- Restore your original CSS file from the backup
- Delete the backup file
## Notes
- The CSS file is located at: `~/Library/Application Support/BeeperTexts/custom.css`
- Changes made to the file in this repository will automatically be reflected in Beeper (just need to click Reload custom CSS)
- If you need to restore your original CSS, it's backed up as `custom.css.bak` in the Beeper directory
## Contributing
Feel free to submit pull requests with your custom CSS styles!