Help

Upcoming database upgrades. to improve our reliability at 03:30 UTC on Feb. 25 / 7:30pm PT on Feb. 24. Some users may briefly experience slow load times or error messages. Learn more here

Airtable forum UI helper

817 1
cancel
Showing results for 
Search instead for 
Did you mean: 
TheTimeSavingCo
13 - Mars
13 - Mars

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)


FeatureOriginalNew
Customization of Read vs Unread topic colorsRead vs Unread - Original.pngRead vs Unread - Customized.png
Make the Reply Box fixedFixed reply box - Original.gifFixed reply box - Custom.gif
Customization of Reply Box heightReply box height - Original.pngReply box height - Custom.png
Increase usable area of the Private Message pagePrivate Message - Original.pngPrivate Message - Customized.png

How to use

  1. Install Tampermonkey
  2. Open the extension, click “Create a new script”, and paste the code found at the end of the post into it and save
  3. 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; }');
}

 

 



1 Reply 1

Thank you for posting this. Several of us regulars on the forums have noticed that the UI of the new forums could be improved. I believe that @Jordan_Scott1 is actively working on the usability issues. I'm hoping that some of these issues will be fixed from the forum side, so that we don't have to use 3rd party things like this.

In this post, Jordan also gives the link to an Airtable form where we can submit our bug reports and other suggestions for improvements. I recommend submitting all of your adjustments to that form!