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
  • Custom html in nodebb to prevent cache

    Unsolved Configure nodebb
    18
    2 Votes
    18 Posts
    5k Views
    phenomlab
    @Panda You’ll need to do that with js. With some quick CSS changes, it looks like this [image: d619844f-fbfe-4cf1-a283-6b7364f6bf18-image.png] The colour choice is still really hard on the eye, but at least you can now read the text
  • Further Widgets question

    Solved Configure nodebb
    4
    1
    1 Votes
    4 Posts
    2k Views
    phenomlab
    @Panda category is for a category in its own, so for example, “fruit” whereas categories is the page that contains all categories as a list.
  • adding some console.log to Nodebb

    Solved Customisation nodebb
    4
    1 Votes
    4 Posts
    2k Views
    phenomlab
    @eeeee if you’re using the console, you could try node app.js > app.log 2>&1 This would redirect stdout to a file named app.log and redirect stderr to stdout. I’m not sure about standard logging under NodeBB, but there is an error log located at logs/error.log. Failing that, you could always stop the NodeBB service then use ./nodebb dev from the console which would then provide debug output.
  • Setting up a beta NodeBB v3 environment

    Moved Let's Build It nodebb upgrades beta1
    14
    3
    11 Votes
    14 Posts
    6k Views
    phenomlab
    @dave1904 excellent news. Thanks for the feedback
  • Podcast Share NodeBB

    Solved Configure podcast nodebb
    15
    4 Votes
    15 Posts
    5k Views
    phenomlab
    @cagatay You could experiment with nodebb-plugin-ns-embed but I expect the x-origin tag on the remote site to prevent playback.
  • NodeBB metadata

    Solved Configure nodebb
    4
    2 Votes
    4 Posts
    2k Views
    JAC
    @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 🤪🤪.
  • 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.
  • Display tweets in widget [NodeBB]

    Solved Customisation
    29
    4 Votes
    29 Posts
    13k Views
    JAC
    @phenomlab brilliant, many thanks Mark