Skip to content

Whitespace fixes in Nodebb

Solved Customisation
18 3 6.5k 1
  • wrote on last edited by
    #3

    What screen size are you using, and what device? I’m not seeing that issue on my OnePlus 9 Pro

  • What screen size are you using, and what device? I’m not seeing that issue on my OnePlus 9 Pro

    wrote on last edited by Panda
    #4

    @phenomlab Samsung Flip4
    3088 high
    x 1440 wide

    Perhaps it is my device then, it has narrower screen in comparison to height

  • Panda Panda has marked this topic as solved on
  • @phenomlab Samsung Flip4
    3088 high
    x 1440 wide

    Perhaps it is my device then, it has narrower screen in comparison to height

    wrote on last edited by
    #5

    @Panda With a resolution like that, it shouldn’t be an issue. However, there are a number of things you can do with custom CSS. I wouldn’t recommend creating a new theme unless you really have to

  • wrote on last edited by
    #6

    @Panda just circling back on this based on your list concerning badges overlapping.

    This is what I see on my mobile

    Screenshot_2023-06-29-21-11-41-68_e4424258c8b8649f6e67d283a50a2cbc.jpg

  • wrote on last edited by Panda
    #7

    This is exactly why I never really liked CSS. It can so easily go wrong on different resolution screens!
    When I wrote games, I would use Javascript on Canvas, with my own font so that everything was scaled as % of screen width and height.
    I had my own library for this. It was the only way to guarantee everything works on all devices.

    Look at this: its a mess, and Flip4 is not an uncommon device
    Screenshot_20230629_235950_Chrome~2.jpg

    What does having this extra Tag saying Author really add?
    I dont want to be critical, but it might be better to have the user group badges as shorter names, then that would reduce overlaps?

  • This is exactly why I never really liked CSS. It can so easily go wrong on different resolution screens!
    When I wrote games, I would use Javascript on Canvas, with my own font so that everything was scaled as % of screen width and height.
    I had my own library for this. It was the only way to guarantee everything works on all devices.

    Look at this: its a mess, and Flip4 is not an uncommon device
    Screenshot_20230629_235950_Chrome~2.jpg

    What does having this extra Tag saying Author really add?
    I dont want to be critical, but it might be better to have the user group badges as shorter names, then that would reduce overlaps?

    wrote on last edited by phenomlab
    #8

    @Panda it looks to me like you’re using enlarged fonts at least. Can you confirm? You can’t cater for literally every device of course.

  • @Panda it looks to me like you’re using enlarged fonts at least. Can you confirm? You can’t cater for literally every device of course.

    wrote on last edited by
    #9

    @phenomlab yes thats a point that font size is an Android system setting, so another variable.
    Screenshot_20230630_070745_Settings~2.jpg

    So its not on largest but more than half way up

  • @phenomlab yes thats a point that font size is an Android system setting, so another variable.
    Screenshot_20230630_070745_Settings~2.jpg

    So its not on largest but more than half way up

    wrote on last edited by
    #10

    @Panda yes, that will play havoc with rendering. I’m curious to know if setting it to the normal size resolves it.

  • wrote on last edited by
    #11

    Yes with text 4/8 size its fine.
    Screenshot_20230630_173532_Chrome~2.jpg
    Athough my suggestion to have shorter group names might be worth taking.
    Collaborator is quite a long badge name,
    Whats your list of all the group categories? Is Sage top, how did you chose these names?

  • Yes with text 4/8 size its fine.
    Screenshot_20230630_173532_Chrome~2.jpg
    Athough my suggestion to have shorter group names might be worth taking.
    Collaborator is quite a long badge name,
    Whats your list of all the group categories? Is Sage top, how did you chose these names?

    wrote on last edited by
    #12

    @Panda said in Whitespace fixes in Nodebb:

    Collaborator is quite a long badge name,

    Yes, I need to re-think these names actually.

    @Panda said in Whitespace fixes in Nodebb:

    Whats your list of all the group categories? Is Sage top, how did you chose these names?

    See below

    08a3a12c-3a1c-4855-bfbe-54269c8ce8bf-image.png

    In actual fact, even “Supreme” won’t be the top rank - at 50,000 upvotes, you’d need to be almost god-like 🙂

  • @Panda said in Whitespace fixes in Nodebb:

    Collaborator is quite a long badge name,

    Yes, I need to re-think these names actually.

    @Panda said in Whitespace fixes in Nodebb:

    Whats your list of all the group categories? Is Sage top, how did you chose these names?

    See below

    08a3a12c-3a1c-4855-bfbe-54269c8ce8bf-image.png

    In actual fact, even “Supreme” won’t be the top rank - at 50,000 upvotes, you’d need to be almost god-like 🙂

    wrote on last edited by Panda
    #13

    @phenomlab
    Interesting. Because it is not obvious which name is what rank, I suggest an alphabetical list.
    For example, something like
    ACE (highest)
    COMMANDER
    EXPERT
    GURU
    ROOKIE
    STARTER (lowest)

  • @phenomlab
    Interesting. Because it is not obvious which name is what rank, I suggest an alphabetical list.
    For example, something like
    ACE (highest)
    COMMANDER
    EXPERT
    GURU
    ROOKIE
    STARTER (lowest)

    wrote on last edited by
    #14

    @Panda I see your point, but I won’t be changing to an alphabetic system - but would consider stars. I know @crazycells uses ranking like this.

  • @Panda I see your point, but I won’t be changing to an alphabetic system - but would consider stars. I know @crazycells uses ranking like this.

    wrote on last edited by
    #15

    @phenomlab yeap, I like the stars… very intuitive…

    we have them from 1 to 5, but I am considering extending it to 7. additionally we have small icons such as a youtube sign for users with youtube channels, etc.

    Screen Shot 2023-06-30 at 12.47.43.png

    in the past , forums used to have military rankings… captain, major, general etc. that is what the initial recommendation by our users was… sometimes these ranks would have lines and stars next to it… so the idea in the forum evolved to have only stars as ranks… users are happy with this…

  • @phenomlab yeap, I like the stars… very intuitive…

    we have them from 1 to 5, but I am considering extending it to 7. additionally we have small icons such as a youtube sign for users with youtube channels, etc.

    Screen Shot 2023-06-30 at 12.47.43.png

    in the past , forums used to have military rankings… captain, major, general etc. that is what the initial recommendation by our users was… sometimes these ranks would have lines and stars next to it… so the idea in the forum evolved to have only stars as ranks… users are happy with this…

    wrote on last edited by
    #16

    @crazycells You’re both raising really good points here. The wording in all honesty was to get it started, but it’s become much more than that - particularly as original members have much higher rankings. I’ll take a look at this over the weekend.

  • This is exactly why I never really liked CSS. It can so easily go wrong on different resolution screens!
    When I wrote games, I would use Javascript on Canvas, with my own font so that everything was scaled as % of screen width and height.
    I had my own library for this. It was the only way to guarantee everything works on all devices.

    Look at this: its a mess, and Flip4 is not an uncommon device
    Screenshot_20230629_235950_Chrome~2.jpg

    What does having this extra Tag saying Author really add?
    I dont want to be critical, but it might be better to have the user group badges as shorter names, then that would reduce overlaps?

    wrote on last edited by phenomlab
    #17

    @Panda said in Whitespace fixes in Nodebb:

    What does having this extra Tag saying Author really add?

    Missed this question. This specific tag adds “author” to who originally created the topic. It’s a useful way of identifying the original poster throughout a long thread.

  • @phenomlab
    Interesting. Because it is not obvious which name is what rank, I suggest an alphabetical list.
    For example, something like
    ACE (highest)
    COMMANDER
    EXPERT
    GURU
    ROOKIE
    STARTER (lowest)

    wrote on last edited by phenomlab
    #18

    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them.

    More importantly, if you reload the site, you’ll notice that the ranks are now icons.

    I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.


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 to Xenforo

    Solved Configure xenforo nodebb
    3
    0 Votes
    3 Posts
    1k Views
    phenomlab
    @cagatay as @downpw stated, there isn’t a native tool that will do this for you. You’d need to either develop your own or ask the nodebb team to assist which will be a paid exercise.
  • 2 Votes
    1 Posts
    648 Views
    No one has replied
  • Nodebb vs Wordpress vs Other

    General wordpress nodebb woocomerce business
    4
    5 Votes
    4 Posts
    2k Views
    DownPW
    PrestaShop + modules IA https://www.prestashop.com Magento https://developer.adobe.com/open/magento
  • What plugins are being used here on Sudonix?

    Solved General nodebb plugins development
    6
    5 Votes
    6 Posts
    3k Views
    phenomlab
    @Roki-Antic Welcome! This site isn’t running Persona, but Harmony - a very heavily customised version at that. Do you have a URL where your site is currently located that is publicly accessible? Feel free to PM this info if you do not want to disclose here. Happy to help with any customisation needs.
  • Nodebb 3.2.0

    Bugs nodebb nodebb 3.2.0
    20
    1
    2 Votes
    20 Posts
    7k Views
    phenomlab
    @crazycells yes, I’m aware of that. Need to fix EDIT- fixed. Caused by the same CSS that is used to absolutely position the “verified” group badge in the posts view. Amended this CSS so that is specifically targets the post stream as below li[component="post"] a[href*="/groups/verified"] { position: absolute !important; left: 8px; z-index: 2; margin-top: 1px; border-radius: 999px !important; line-height: 14px; display: block; height: 22px; margin-left: 0px !important; }
  • Composer options on nodebb

    Solved Configure nodebb
    8
    1
    3 Votes
    8 Posts
    3k Views
    phenomlab
    @Panda You should be able to expose the CSS for these using F12 to get into console [image: 3591518c-e3a3-4ada-a43c-6b32a5e0359c-image.png] [image: a2b8ed46-4157-4ff2-85f0-576543380107-image.png] That should then expose the element once selected [image: 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; }
  • How to fix size of photos & videos NodeBB

    Solved Customisation nodebb nodebb size
    7
    3 Votes
    7 Posts
    3k Views
    phenomlab
    @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] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    9k Views
    phenomlab
    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.