Skip to content

[NodeBB] First post customization

Solved Customisation
5 2 2.6k 1
  • wrote on last edited by
    #1

    Hi @phenomlab , how are you?

    I would like to separate the first post from the rest (NodeBB v1.18.6) … I see that you have a border and background customization enabled at the dark mode. How can I target the first post only?

    I just could not find the correct CSS change for the first post.

    I am trying to do something like this:

    
    .posts .timeline li[data-index="0"] {
        border-bottom: 1px solid #eee;
    }
    

    But, unfortunately it does not work 🙂 Any help is appreciated…

  • Hi @phenomlab , how are you?

    I would like to separate the first post from the rest (NodeBB v1.18.6) … I see that you have a border and background customization enabled at the dark mode. How can I target the first post only?

    I just could not find the correct CSS change for the first post.

    I am trying to do something like this:

    
    .posts .timeline li[data-index="0"] {
        border-bottom: 1px solid #eee;
    }
    

    But, unfortunately it does not work 🙂 Any help is appreciated…

    wrote on last edited by
    #2

    @crazycells hi. Hope you’re well. Does it work if you set !important after the class ?

  • @crazycells hi. Hope you’re well. Does it work if you set !important after the class ?

    wrote on last edited by
    #3

    @phenomlab said in [NodeBB] First post customization:

    @crazycells hi. Hope you’re well. Does it work if you set !important after the class ?

    Thanks for the suggestion. With the code above it did not work but I later found the correct codes:

    
    li[data-index="0"] .post-footer {
        border-bottom: 1px solid #eee;
    }
    
  • @phenomlab said in [NodeBB] First post customization:

    @crazycells hi. Hope you’re well. Does it work if you set !important after the class ?

    Thanks for the suggestion. With the code above it did not work but I later found the correct codes:

    
    li[data-index="0"] .post-footer {
        border-bottom: 1px solid #eee;
    }
    
    wrote on last edited by
    #4

    @crazycells good to hear ! I’ll mark this resolved.

  • phenomlab phenomlab has marked this topic as solved on
  • @crazycells good to hear ! I’ll mark this resolved.

    wrote on last edited by
    #5

    @phenomlab thanks 🙏


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
  • Page control arrows for PWA

    Solved Customisation nodebb
    27
    25 Votes
    27 Posts
    15k Views
    phenomlab
    @crazycells it is, yes - I think I’ll leave it as there is no specific PWA CSS classes I know of. Well, you could use something like the below, but this means multiple CSS files for different operating systems. /** * Determine the mobile operating system. * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. * * @returns {String} */ function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { return "Windows Phone"; } if (/android/i.test(userAgent)) { return "Android"; } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { return "iOS"; } return "unknown"; // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android } Once you’re in that rabbit hole, it’s impossible to get out of it.
  • Custom badges

    Solved Customisation nodebb
    103
    2
    49 Votes
    103 Posts
    60k Views
    DownPW
    Perfect
  • 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
  • Top Ranked Forums

    Chitchat nodebb top ranked
    9
    1
    3 Votes
    9 Posts
    3k Views
    phenomlab
    The real issue here is that most people consider forums to be “dead” in the sense that nobody uses them anymore, and social media groups have taken their place. Their once dominant stance in the 90’s and early 00’s will never be experienced again, but having said that, there are a number of forums that did in fact survive the social media onslaught, and still enjoy a large user base. Forums tend to be niche. One that immediately sticks out is Reddit - despite looking like it was designed in the 80s, it still has an enormous user base. Another is Stack Overflow, which needs no introduction. The key to any forum is the content it offers, and the more people whom contribute in terms of posting , the more popular and widely respected it becomes as a reliable source of information. Forums are still intensely popular with gamers, alongside those that offer tips on hacking etc.
  • NodeBB inline videoplayer

    Solved Customisation nodebb
    12
    3 Votes
    12 Posts
    5k Views
    Panda
    @phenomlab YAY! It works Thanks so much
  • [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    258
    49 Votes
    258 Posts
    168k Views
    cagatay
    mark hi, Refused to apply style from ‘https://efelsefe.com/assets/customfonts/FontAwesome-6-Pro/pro/css/v4-font-face.css’ because its MIME type (‘text/plain’) is not a supported stylesheet MIME type, and strict MIME checking is enabled. I keep getting this error.
  • [NodeBB] Import custom Font

    Solved Customisation custom fonts nodebb css
    12
    3 Votes
    12 Posts
    5k Views
    phenomlab
    @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] Stats

    Unsolved Customisation plugin stats script
    20
    1
    2 Votes
    20 Posts
    6k Views
    JAC
    @phenomlab said in [NODEBB] Stats: @jac or I land up fixing it I wouldn’t put it past you