Airtable forum UI helper
1
2970
1
Hey guys, I made some customizations for the new Airtable forum and figured I'd share them in case anyone else found them useful!
You can turn off whatever features you don't want, and I've left comments in the code to help with figuring out what you can customize (e.g. customizing the unread topics to show up with red font or something)
| Feature | Original | New |
| Customization of Read vs Unread topic colors |  |  |
| Make the Reply Box fixed |  |  |
| Customization of Reply Box height |  |  |
| Increase usable area of the Private Message page |  |  |
How to use
- Install Tampermonkey
- Open the extension, click “Create a new script”, and paste the code found at the end of the post into it and save
- You’re done!
Notes
I’ve been using this mostly on Firefox on a Mac; let me know if you hit any issues and I’ll do my best to fix it
The Code
// ==UserScript==
// @name Airtable Forum UI Helper
// @description Various UI additions to make life easier
// @author Adam - The Time Saving Company
// @match https://community.airtable.com/*
// @grant GM_addStyle
// ==/UserScript==
//Turn changes on / off
let unread_color_customization_turned_on = true
let reply_box_height_customization_turned_on = true
let private_notes_page_customization_turned_on = true
let reply_form_fixed_customization_turned_on = true
//Customize the color of read vs unread topics
//Accepts color names or hex rgb values
//View this link for a list of possibilities: https://www.w3.org/wiki/CSS/Properties/color/keywords
if(unread_color_customization_turned_on){
let unreadColor = "lightgray"
let readColor = "black"
GM_addStyle('.custom-message-tile > div h3 a { color:' + unreadColor + ' !important; }');
GM_addStyle('.custom-message-tile.custom-thread-unread h3 a { color:' + readColor + ' !important; }');
}
//Sets the minimum height of the reply box. Set this to 0 if the forum default works for you
if(reply_box_height_customization_turned_on){
let replyBoxMinHeight = "150"
GM_addStyle('.mce-edit-area.mce-container.mce-panel.mce-stack-layout-item iframe { min-height:' + replyBoxMinHeight + 'px; }');
}
//Sets the UI of the private messages page
//Makes the private message area take up the full height and width of the page to make things easier to see
if(private_notes_page_customization_turned_on){
//You can use percentages or set numbers like "800px"
let width = "100%"
GM_addStyle('.PrivateNotesPage .lia-quilt-row-main { height:100% !important; }');
GM_addStyle('.PrivateNotesPage .lia-quilt-row-main { width:' + width + ' !important; }');
GM_addStyle('.PrivateNotesPage .lia-quilt-row-main { max-width:' + width + ' !important; }');
}
//Makes reply form fixed
if(reply_form_fixed_customization_turned_on){
GM_addStyle('.lia-inline-message-reply-form-expanded { position: fixed; z-index:65536; width:100%; background: white; bottom: 0; margin-bottom: 0 !important; left: 0;}');
GM_addStyle('.lia-inline-message-reply-wrapper { max-width:900px; margin:auto }');
GM_addStyle('.PrivateNotesPage { margin-bottom:500px; }');
}
