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
  • NodeBB recent cards customisation

    Solved Customisation nodebb recent cards
    3
    1
    2 Votes
    3 Posts
    1k Views
    JAC
    @phenomlab thank you very much for the assistance Mark, massively appreciated as always. The great thing about this is it’s all documented for other NodeBB users that come looking for solutions . Looks far better .
  • 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
  • Header Menu After Upgrading V3.1.1

    Solved Customisation header nodebb
    2
    1
    2 Votes
    2 Posts
    1k Views
    phenomlab
    @cagatay this relates to a change the css classes used for the brand header meaning it will now float to the left instead of right. If you’d like to retain the original behavior, you can add this css class [data-widget-area="brand-header"] { justify-content: end; display: flex; } Further information here https://community.nodebb.org/topic/17090/manual-build-a-custom-header-in-harmony/19?_=1684069325296
  • 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
  • Post Style View

    Solved Customisation post style sudonix nodebb
    67
    2
    18 Votes
    67 Posts
    36k Views
    DownPW
    @cagatay Just add margin-left on the element like @phenomlab said to you : topic [component="post/parent"] { margin-left: 10px; } [image: aa08c62b-4223-4cba-8c0f-c73d50474c0d-image.png] Maybe @phenomlab have a better way
  • [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    258
    49 Votes
    258 Posts
    173k 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-plugin-customize error

    Solved Customisation
    25
    2 Votes
    25 Posts
    17k Views
    RiekMedia
    @phenomlab it work, thanks
  • NodeBB customisation

    Locked Customisation
    332
    27 Votes
    332 Posts
    280k Views
    phenomlab
    @jac Given your departure away from your previous project, I’m going to close this thread…