Skip to content

Composer options on nodebb

Solved Configure
8 2 2.6k 1
  • wrote on last edited by Panda
    #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?

    wrote on last edited by
    #2

    @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.

    wrote on last edited by Panda
    #3

    @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?

    wrote on last edited by
    #4
  • wrote on last edited by
    #5

    @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

    wrote on last edited by
    #6

    @Panda Here you go

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

  • Panda Panda has marked this topic as solved on
  • wrote on last edited by Panda
    #7

    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!

    wrote on last edited by
    #8

    @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
    5k Views
    phenomlab
    @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.
  • Nodebb design

    Solved General nodebb
    2
    1 Votes
    2 Posts
    1k Views
    phenomlab
    @Panda said in Nodebb design: One negative is not being so good for SEO as more Server side rendered forums, if web crawlers dont run the JS to read the forum. From recollection, Google and Bing have the capability to read and process JS, although it’s not in the same manner as a physical person will consume content on a page. It will be seen as plain text, but will be indexed. However, it’s important to note that Yandex and Baidu will not render JS, although seeing as Google has a 90% share of the content available on the web in terms of indexing, this isn’t something you’ll likely lose sleep over. @Panda said in Nodebb design: The “write api” is preferred for server-to-server interactions. This is mostly based around overall security - you won’t typically want a client machine changing database elements or altering data. This is why you have “client-side” which could be DOM manipulation etc, and “server-side” which performs more complex operations as it can communicate directly with the database whereas the client cannot (and if it can, then you have a serious security flaw). Reading from the API is perfectly acceptable on the client-side, but not being able to write. A paradigm here would be something like SNMP. This protocol exists as a UDP (UDP is very efficient, as it is “fire and forget” and does not wait for a response like TCP does) based service which reads performance data from a remote source, thus enabling an application to parse that data for use in a monitoring application. In all cases, SNMP access should be “RO” (Read Only) and not RW (Read Write). It is completely feasible to assume complete control over a firewall for example by having RW access to SNMP and then exposing it to the entire internet with a weak passphrase. You wouldn’t do it (at least, I hope you wouldn’t) and the same ethic applies to server-side rendering and the execution of commands.
  • NodeBB: Opening the Composer for replies

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

    Solved Configure hcaptcha
    15
    2 Votes
    15 Posts
    4k Views
    phenomlab
    @mventures none that I know of. I don’t recall selecting these either for mine.
  • NodeBB: Consent page

    Solved Configure nodebb consent
    16
    4 Votes
    16 Posts
    6k Views
    phenomlab
    @DownPW I still do not see any issues.
  • who is read NodeBB

    Customisation read post nodebb
    6
    0 Votes
    6 Posts
    3k Views
    phenomlab
    @cagatay You should ask in the NodeBB forums. Perhaps reference this post https://discuss.flarum.org/d/23066-who-read
  • Configure SMTP for Nodebb

    Solved Configure
    14
    5 Votes
    14 Posts
    5k Views
    phenomlab
    @marusaky based on the work completed thus far (in relation to PM exchanges), I’m going to mark this completed. Sending email from the server itself works fine without issue, and DNS appears to be clean (valid SPF, DMARC, and DKIM records). It appears that only Gmail marks incoming messages from your domain as spam - perhaps because of the domain age, which there is nothing we can do to prevent this. Mail delivery to all other domains appears to work fine in al of my tests.
  • nodebb dropdown menu

    Solved Configure nodebb
    5
    1
    0 Votes
    5 Posts
    3k Views
    JAC
    @phenomlab said in nodebb dropdown menu: @kurulumu-net You set it like the below example taken from this site [image: aae36790-3257-4bb2-ad5a-0d744309876a-image.png] Which presents this [image: 77f47260-2941-4afe-9614-8e17dcfc8c19-image.png] Very interesting… I actually thought this wasn’t possible, as I remember it being asked in the NodeBB forum. Is this something new that’s been implemented? I’ll 100% be doing that when I’m on the laptop over the weekend.