Skip to content

Composer options on nodebb

Solved Configure
8 2 1.9k 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
  • NodeBB: Opening the Composer for replies

    Solved Configure cms composer
    2
    0 Votes
    2 Posts
    848 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: hCaptcha

    Solved Configure hcaptcha
    15
    2 Votes
    15 Posts
    3k Views
    @mventures none that I know of. I don’t recall selecting these either for mine.
  • NodeBB: Privileges for the Announcement channel

    Solved Configure nodebb
    6
    1
    1 Votes
    6 Posts
    2k Views
    Up to you really
  • nodebb loading emojis

    Solved Configure nodebb emojis
    16
    1
    1 Votes
    16 Posts
    4k Views
    @DownPW sure. Let me have a look at this in more detail. I know nginx plus has extensive support for this, but it’s not impossible to get somewhere near acceptable with the standard version. You might be better off handling this at the Cloudflare level given that it sits in between the requesting client and your server.
  • How to fix size of photos & videos NodeBB

    Solved Customisation nodebb nodebb size
    7
    3 Votes
    7 Posts
    2k Views
    @crazycells pleasure. Using percentages makes much more sense in this case. It’s the same argument with px vs pt vs em with fonts, margins, padding, etc., in the sense that em is generally preferred over px and pt https://stackoverflow.com/questions/609517/why-em-instead-of-px
  • [NodeBB] Import custom Font

    Solved Customisation custom fonts nodebb css
    12
    3 Votes
    12 Posts
    4k Views
    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example body { font-family: "Poppins"; font-size: 16px; } Essentially, you use the font-size CSS directive.
  • nodebb dropdown menu

    Solved Configure nodebb
    5
    1
    0 Votes
    5 Posts
    2k Views
    @phenomlab said in nodebb dropdown menu: @kurulumu-net You set it like the below example taken from this site [image: 1637939951821-aae36790-3257-4bb2-ad5a-0d744309876a-image.png] Which presents this [image: 1637939983445-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.
  • [NodeBB] Creating new user to auto post content

    Solved Customisation
    3
    0 Votes
    3 Posts
    2k Views
    @phenomlab many thanks Mark .