Skip to content

NodeBB customisation

Locked Customisation
332 4 274.3k 1
  • @jac I think it’s too much because of the header being the same colour. A blue of they shade will only work if there is something in between it. It’s made much worse as the thread gets longer.

    When the page is scrolled, the title is set to sticky meaning that it’s always visible at the top of the screen. This means the colour is never out of view and is then dominant.

    The yellow is a better choice as it’s not being used anywhere else in the thread and as a result won’t look overdone.

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac I think it’s too much because of the header being the same colour. A blue of they shade will only work if there is something in between it. It’s made much worse as the thread gets longer.

    When the page is scrolled, the title is set to sticky meaning that it’s always visible at the top of the screen. This means the colour is never out of view and is then dominant.

    The yellow is a better choice as it’s not being used anywhere else in the thread and as a result won’t look overdone.

    Thanks for the advice mate, no I agree the yellow would be a better choice definitely. I’ll apply now.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac I think it’s too much because of the header being the same colour. A blue of they shade will only work if there is something in between it. It’s made much worse as the thread gets longer.

    When the page is scrolled, the title is set to sticky meaning that it’s always visible at the top of the screen. This means the colour is never out of view and is then dominant.

    The yellow is a better choice as it’s not being used anywhere else in the thread and as a result won’t look overdone.

    Thanks for the advice mate, no I agree the yellow would be a better choice definitely. I’ll apply now.

    wrote on last edited by

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac I think it’s too much because of the header being the same colour. A blue of they shade will only work if there is something in between it. It’s made much worse as the thread gets longer.

    When the page is scrolled, the title is set to sticky meaning that it’s always visible at the top of the screen. This means the colour is never out of view and is then dominant.

    The yellow is a better choice as it’s not being used anywhere else in the thread and as a result won’t look overdone.

    Thanks for the advice mate, no I agree the yellow would be a better choice definitely. I’ll apply now.

    Applied mate, looks great, thank you very much. Is there a way to change the titles to bold at all?

    Many thanks as always mate. Don’t forget the Phenomlab footer 😁😉.

  • JAC JAC

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac I think it’s too much because of the header being the same colour. A blue of they shade will only work if there is something in between it. It’s made much worse as the thread gets longer.

    When the page is scrolled, the title is set to sticky meaning that it’s always visible at the top of the screen. This means the colour is never out of view and is then dominant.

    The yellow is a better choice as it’s not being used anywhere else in the thread and as a result won’t look overdone.

    Thanks for the advice mate, no I agree the yellow would be a better choice definitely. I’ll apply now.

    Applied mate, looks great, thank you very much. Is there a way to change the titles to bold at all?

    Many thanks as always mate. Don’t forget the Phenomlab footer 😁😉.

    wrote on last edited by

    @jac said in NodeBB customisation:

    Is there a way to change the titles to bold at all?

    Yes - just remove this block

    .topic-title {
        font-weight: 300 !important;
    }
    
  • @jac said in NodeBB customisation:

    Is there a way to change the titles to bold at all?

    Yes - just remove this block

    .topic-title {
        font-weight: 300 !important;
    }
    
    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    Is there a way to change the titles to bold at all?

    Yes - just remove this block

    .topic-title {
        font-weight: 300 !important;
    }
    

    Many thanks mate, will try this later 😁.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    Is there a way to change the titles to bold at all?

    Yes - just remove this block

    .topic-title {
        font-weight: 300 !important;
    }
    

    Many thanks mate, will try this later 😁.

    wrote on last edited by

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    Is there a way to change the titles to bold at all?

    Yes - just remove this block

    .topic-title {
        font-weight: 300 !important;
    }
    

    Many thanks mate, will try this later 😁.

    Worked great, many thanks 😁👍🏻.

  • JAC JAC

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    Is there a way to change the titles to bold at all?

    Yes - just remove this block

    .topic-title {
        font-weight: 300 !important;
    }
    

    Many thanks mate, will try this later 😁.

    Worked great, many thanks 😁👍🏻.

    wrote on last edited by

    @jac Good

  • wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Good

    Still going with the little changes here and there, so many thanks for the continued support 😁.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Good

    Still going with the little changes here and there, so many thanks for the continued support 😁.

    wrote on last edited by

    @jac No problems. I’ll close this thread as soon as we’re done. It currently exists as a showcase for how you’ve modified your NodeBB install to get it to look how you desire. This would then serve as a guide for others looking to go down the same rabbit hole.

  • @jac No problems. I’ll close this thread as soon as we’re done. It currently exists as a showcase for how you’ve modified your NodeBB install to get it to look how you desire. This would then serve as a guide for others looking to go down the same rabbit hole.

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac No problems. I’ll close this thread as soon as we’re done. It currently exists as a showcase for how you’ve modified your NodeBB install to get it to look how you desire. This would then serve as a guide for others looking to go down the same rabbit hole.

    Great idea!

    Mamy thanks again 😁

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac No problems. I’ll close this thread as soon as we’re done. It currently exists as a showcase for how you’ve modified your NodeBB install to get it to look how you desire. This would then serve as a guide for others looking to go down the same rabbit hole.

    Great idea!

    Mamy thanks again 😁

    wrote on last edited by

    Looking to add a line / divider under eachother comment to seperate them properly, is this possible?

    Many thanks.

  • JAC JAC

    Looking to add a line / divider under eachother comment to seperate them properly, is this possible?

    Many thanks.

    wrote on last edited by

    @jac Something like this ?

    8b5277ff-fee0-45ff-bf97-349e5528511f-image.png

    .topic .posts.timeline .timeline-event:not(:last-child), .topic .posts.timeline>[component=post]:not(:last-child) {
        border-bottom: 1px solid #eeeeee;
    }
    
  • @jac Something like this ?

    8b5277ff-fee0-45ff-bf97-349e5528511f-image.png

    .topic .posts.timeline .timeline-event:not(:last-child), .topic .posts.timeline>[component=post]:not(:last-child) {
        border-bottom: 1px solid #eeeeee;
    }
    
    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Something like this ?

    8b5277ff-fee0-45ff-bf97-349e5528511f-image.png

    .topic .posts.timeline .timeline-event:not(:last-child), .topic .posts.timeline>[component=post]:not(:last-child) {
        border-bottom: 1px solid #eeeeee;
    }
    

    Thanks Mark, I’ll apply this when I can.

    As for the tags in the screenshot are they generally big or it is the screenshot that is playing tricks? 😉.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Something like this ?

    8b5277ff-fee0-45ff-bf97-349e5528511f-image.png

    .topic .posts.timeline .timeline-event:not(:last-child), .topic .posts.timeline>[component=post]:not(:last-child) {
        border-bottom: 1px solid #eeeeee;
    }
    

    Thanks Mark, I’ll apply this when I can.

    As for the tags in the screenshot are they generally big or it is the screenshot that is playing tricks? 😉.

    wrote on last edited by phenomlab

    @jac said in NodeBB customisation:

    are they generally big or it is the screenshot that is playing tricks?

    They’re big. I noticed that. It’s because of the tags page we recently changed to get the Stockport colour layout. Use this to fix it

    .tag-list .tag {
        height: 26px;
        border-radius: 4px;
        margin-left: 5px;
    }
    
  • @jac said in NodeBB customisation:

    are they generally big or it is the screenshot that is playing tricks?

    They’re big. I noticed that. It’s because of the tags page we recently changed to get the Stockport colour layout. Use this to fix it

    .tag-list .tag {
        height: 26px;
        border-radius: 4px;
        margin-left: 5px;
    }
    
    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    are they generally big or it is the screenshot that is playing tricks?

    They’re big. I noticed that. It’s because of the tags page we recently changed to get the Stockport colour layout. Use this to fix it

    .tag-list .tag {
        height: 26px;
        border-radius: 4px;
        margin-left: 5px;
    }
    

    Many thanks mate, that has fixed the issue 😁.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    are they generally big or it is the screenshot that is playing tricks?

    They’re big. I noticed that. It’s because of the tags page we recently changed to get the Stockport colour layout. Use this to fix it

    .tag-list .tag {
        height: 26px;
        border-radius: 4px;
        margin-left: 5px;
    }
    

    Many thanks mate, that has fixed the issue 😁.

    wrote on last edited by

    Is there a way to change the colour of the online status?

    Many thanks 😁.

  • JAC JAC

    Is there a way to change the colour of the online status?

    Many thanks 😁.

    wrote on last edited by

    @jac are you referring to the green dot ? What would you like to change ?

  • @jac are you referring to the green dot ? What would you like to change ?

    wrote on last edited by

    @phenomlab yes mate,

    I was thinking blue when online and yellow when offline

    Many thanks

  • JAC JAC

    @phenomlab yes mate,

    I was thinking blue when online and yellow when offline

    Many thanks

    wrote on last edited by

    @jac Ok, but I’m not sure this is going to be a good idea. On/Off typically aligns itself to “traffic light” colours, so if anything, it should be green and red (or grey for “offline”).

  • @jac Ok, but I’m not sure this is going to be a good idea. On/Off typically aligns itself to “traffic light” colours, so if anything, it should be green and red (or grey for “offline”).

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac Ok, but I’m not sure this is going to be a good idea. On/Off typically aligns itself to “traffic light” colours, so if anything, it should be green and red (or grey for “offline”).

    That’s a fair point mate, probably just change the offline to red then if possible at all?

    Many thanks mate.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac Ok, but I’m not sure this is going to be a good idea. On/Off typically aligns itself to “traffic light” colours, so if anything, it should be green and red (or grey for “offline”).

    That’s a fair point mate, probably just change the offline to red then if possible at all?

    Many thanks mate.

    wrote on last edited by RiekMedia

    @jac with the css the offline point changes from gray to red

    .status.offline {
        color:red;
        
    }
    

Related Topics
  • 2 Votes
    1 Posts
    640 Views
    No one has replied
  • 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 .
  • nodebb-user-level customisation : popover element

    Solved Customisation css user level plugin custom
    15
    6 Votes
    15 Posts
    5k Views
    DownPW
    No no, I said that in the sense that he told me it was simple ^^ I was able to see that this was not the case by targeting the elements he had advised me.
  • [NodeBB] greeting message

    Solved Customisation css nodebb javascript
    2
    1
    3 Votes
    2 Posts
    2k Views
    phenomlab
    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358
  • [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
  • NodeBB Discord Plugins

    Unsolved Customisation nodebb discord plugin
    7
    0 Votes
    7 Posts
    4k Views
    phenomlab
    @RiekMedia hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    4k Views
    phenomlab
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.
  • Customising NodeBB

    Locked Customisation nodebb
    3
    0 Votes
    3 Posts
    3k Views
    phenomlab
    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation