Skip to content

Composer options on nodebb

Solved Configure
8 2 1.6k 1
  • I have made posts on the nodebb forum about this, but have additional question here.
    The composer screen (to make posts) is a weak spot for NodeBB, horrible array of icons which confuse new users. Picture upload is particularly confusing.
    Is the icon list bar configurable? in settings I only see this option

    Screenshot_20230615_102942_Chrome~2.jpg

    What option does this even do? What is it meaning by route?

  • I have made posts on the nodebb forum about this, but have additional question here.
    The composer screen (to make posts) is a weak spot for NodeBB, horrible array of icons which confuse new users. Picture upload is particularly confusing.
    Is the icon list bar configurable? in settings I only see this option

    Screenshot_20230615_102942_Chrome~2.jpg

    What option does this even do? What is it meaning by route?

    @Panda said in Composer options on nodebb:

    The composer screen (to make posts) is a weak spot for NodeBB, horrible array of icons which confuse new users. Picture upload is particularly confusing.
    Is the icon list bar configurable?

    I think it is, but you need a function or a plugin to change it. What most people do is target the buttons they do not not need or want in CSS and hide them. I agree with the picture upload - there are two actually - one for pictures themselves which is obvious, and one for files.

    in settings I only see this option

    All this setting does is allow the composer to start in a new window independently and not part of the current form.

  • @Panda said in Composer options on nodebb:

    The composer screen (to make posts) is a weak spot for NodeBB, horrible array of icons which confuse new users. Picture upload is particularly confusing.
    Is the icon list bar configurable?

    I think it is, but you need a function or a plugin to change it. What most people do is target the buttons they do not not need or want in CSS and hide them. I agree with the picture upload - there are two actually - one for pictures themselves which is obvious, and one for files.

    in settings I only see this option

    All this setting does is allow the composer to start in a new window independently and not part of the current form.

    @phenomlab there are 3 icons actually that can be confused for upload image, the first is upload pic by url. This confuses people as it uses the conventional pic icon that people associate with uploading an image.
    So how using CSS (uggghh) can I stop that one showing in the composer iconbar?

  • @phenomlab there are 3 icons actually that can be confused for upload image, the first is upload pic by url. This confuses people as it uses the conventional pic icon that people associate with uploading an image.
    So how using CSS (uggghh) can I stop that one showing in the composer iconbar?

  • @phenomlab
    Ok thanks, so I assume I add something like this to custom css

    /* removing buttons from composer */
    .composer .formatting-bar .formatting-group li[data-format="????"] {
      display: none;
    }
    

    How can i find out what ??? = for url pic, if thats one I want to disable ?
    Where are these icon names defined

  • @phenomlab
    Ok thanks, so I assume I add something like this to custom css

    /* removing buttons from composer */
    .composer .formatting-bar .formatting-group li[data-format="????"] {
      display: none;
    }
    

    How can i find out what ??? = for url pic, if thats one I want to disable ?
    Where are these icon names defined

    @Panda Here you go

    6e2191b0-c777-459a-82e8-cf14840c7f9c-image.png

  • Pandaundefined Panda has marked this topic as solved on
  • Back with another question, as although you gave me the list, I cant workout which ids are:
    orangle circled (for thumbnail)
    Purple circled (dont know what)
    IMG_20230615_143459_129.jpg

    Im trying to get as many removed so that pic upload appears without needing to scroll!

  • Back with another question, as although you gave me the list, I cant workout which ids are:
    orangle circled (for thumbnail)
    Purple circled (dont know what)
    IMG_20230615_143459_129.jpg

    Im trying to get as many removed so that pic upload appears without needing to scroll!

    @Panda You should be able to expose the CSS for these using F12 to get into console

    3591518c-e3a3-4ada-a43c-6b32a5e0359c-image.png

    a2b8ed46-4157-4ff2-85f0-576543380107-image.png

    That should then expose the element once selected

    89d9c545-a47a-40d1-98f4-80cf3b958e8f-image.png

    Here’s the below CSS you need based on the screenshot provided.

    .composer .formatting-bar .formatting-group li[data-format="picture-o"], .composer .formatting-bar .formatting-group li[data-format="spoiler"] {
        display: none;
    }
    

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • What’s going on with NodeBB?

    Performance nodebb script die
    20
    8 Votes
    20 Posts
    2k Views
    @cagatay The most reliable way to upgrade Node.js on Ubuntu depends on how you originally installed it. Method 1: Using NVM (Recommended) If you already use Node Version Manager (NVM), upgrading is simple. NVM allows you to keep both versions and switch between them if needed. Install Node 22: nvm install 22 Switch to Node 22: nvm use 22 Set it as your default: nvm alias default 22 Verify the change: node -v Method 2: Using NodeSource (PPA) If you installed Node.js via apt using the NodeSource repository, you need to update the repository script to point to the new version. Remove the old NodeSource list (optional but cleaner): sudo rm /etc/apt/sources.list.d/nodesource.list Download and run the NodeSource setup script for Node 22: curl -fsSL [https://deb.nodesource.com/setup_22.x](https://deb.nodesource.com/setup_22.x) | sudo -E bash - Install/Upgrade Node.js: sudo apt-get install -y nodejs Verify the installation: node -v Method 3: Using the ‘n’ Package If you have npm installed, you can use the n interactive manager. Clear the npm cache: sudo npm cache clean -f Install the ‘n’ helper: sudo npm install -g n Install Node 22: sudo n 22 Update your shell: hash -r Troubleshooting Permission Denied: If you see permission errors using Method 2 or 3, ensure you are using sudo. Path Issues: If node -v still shows version 20 after upgrading via NVM, restart your terminal or run source ~/.bashrc. Conflicts: Avoid mixing these methods. If you switch from apt to nvm, it is best to sudo apt remove nodejs first to avoid path conflicts.
  • CSS codes to prevent votes to disappear

    Solved Customisation nodebb
    3
    1 Votes
    3 Posts
    1k Views
    @phenomlab yes, it is thanks a lot…
  • Composer Zen icon?

    Solved Configure nodebb
    8
    1
    2 Votes
    8 Posts
    1k Views
    @DownPW exactly. Not really a new concept, and in all honesty, not something I’ve ever used. If you consider the need to add links and references, or citations, you’d need to be able to see other parts of the screen!
  • NodeBB: Opening the Composer for replies

    Solved Configure cms composer
    2
    0 Votes
    2 Posts
    776 Views
    @mventures Quick reply is basically exactly that. However, it’s possible to trigger the full composer as below [image: 1681314389744-82ca1209-31be-4a51-a641-9887b5a238b8-image.png] Failing that, you’ll need to use the reply button in the sticky toolbar [image: 1681314442570-1d230bcb-ff8e-4756-94f7-6e2fb7a94bc4-image.png]
  • NodeBB: The global Search option

    Solved Configure search nodebb
    5
    0 Votes
    5 Posts
    963 Views
    @mventures Yes, exactly. The other icon will restart NodeBB whilst the first icon I referenced will rebuild (recompile) it. The huge strength of NodeBB over Flarum (for example) is that the code is precompiled, and called once at boot. PHP’s code has to repeatedly reload code from source making it much slower.
  • NodeBB: Privileges for the Announcement channel

    Solved Configure nodebb
    6
    1
    1 Votes
    6 Posts
    1k Views
    Up to you really
  • NodeBB metadata

    Solved Configure nodebb
    4
    2 Votes
    4 Posts
    1k Views
    @phenomlab said in NodeBB metadata: @jac Are you sure ? https://www.google.co.uk/search?q=site%3Astockportcounty.fans&sxsrf=AOaemvLwnaZL-PliU_2dBOg_Eo1pMVhBjg%3A1638982328139&source=hp&ei=uOKwYeatBcOsad3yp7AE&iflsig=ALs-wAMAAAAAYbDwyLBSDcG5XYoFCKwQFhgz94wTxOcV&ved=0ahUKEwjm6dX71NT0AhVDVhoKHV35CUYQ4dUDCAk&uact=5&oq=site%3Astockportcounty.fans&gs_lcp=Cgdnd3Mtd2l6EAM6BAgjECc6CwgAEIAEELEDEIMBOg4ILhCABBCxAxDHARCjAjoRCC4QgAQQsQMQgwEQxwEQowI6BQguEIAEOggIABCABBCxAzoFCAAQgAQ6CAguELEDEIMBOgsILhCABBDHARCvAToICC4QgAQQsQM6BQgAELEDOgsILhCABBDHARDRAzoLCAAQgAQQsQMQyQM6BQgAEJIDUABYySZg0CdoAHAAeACAAW2IAa0NkgEEMjMuMpgBAKABAQ&sclient=gws-wiz Fair enough 🤪🤪.
  • Iframely (Nodebb)

    Solved Configure
    40
    4 Votes
    40 Posts
    9k Views
    @DownPW This is now resolved. The issue was an incorrect URL specified in the Nodebb plugin. I’ve corrected this, and now it works as intended.