Skip to content

NodeBB customisation

Locked Customisation
332 4 274.3k 1
  • @jac I’m not so sure about this

    5745540e-3637-4e32-abe5-91e2f8774d11-image.png

    It’s too much blue (my opinion). I’d do this

    .topic-title {
        font-weight: 300 !important;
    }
    
    .topic [component="post/header"] {
        margin-top: 0;
        background: #ffc557;
        color: #00205c;
        padding-left: 20px;
        padding-bottom: 5px;
    }
    

    It’s in keeping with the club colours, and will look like this

    e1c76f50-8740-4b12-8c5a-011ff446a46f-image.png

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac I’m not so sure about this

    5745540e-3637-4e32-abe5-91e2f8774d11-image.png

    It’s too much blue (my opinion). I’d do this

    .topic-title {
        font-weight: 300 !important;
    }
    
    .topic [component="post/header"] {
        margin-top: 0;
        background: #ffc557;
        color: #00205c;
        padding-left: 20px;
        padding-bottom: 5px;
    }
    

    It’s in keeping with the club colours, and will look like this

    e1c76f50-8740-4b12-8c5a-011ff446a46f-image.png

    Wow that looks great!!!

    ,😁😁😁

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac I’m not so sure about this

    5745540e-3637-4e32-abe5-91e2f8774d11-image.png

    It’s too much blue (my opinion). I’d do this

    .topic-title {
        font-weight: 300 !important;
    }
    
    .topic [component="post/header"] {
        margin-top: 0;
        background: #ffc557;
        color: #00205c;
        padding-left: 20px;
        padding-bottom: 5px;
    }
    

    It’s in keeping with the club colours, and will look like this

    e1c76f50-8740-4b12-8c5a-011ff446a46f-image.png

    Wow that looks great!!!

    ,😁😁😁

    wrote on last edited by

    As for the blue one, would that look any better with the blue info block removed at all? Or is it still too much?

    Many thanks mate 😁

  • JAC JAC

    As for the blue one, would that look any better with the blue info block removed at all? Or is it still too much?

    Many thanks mate 😁

    wrote on last edited by

    @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.

  • @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


Related Topics
  • Forum customisation

    Customisation nodebb forum customised
    11
    2
    6 Votes
    11 Posts
    3k Views
    JAC
    Thank you Mark, the changes look fantastic!!
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    6k Views
    phenomlab
    @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.
  • 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
  • Forum Icons NodeBB

    Solved Customisation icons forum nodebb
    13
    0 Votes
    13 Posts
    5k Views
    phenomlab
    @cagatay That matches what I see [image: 4f0f858d-9812-42b1-9f61-ffb13d31dccd-image.png]
  • NodeBB inline videoplayer

    Solved Customisation nodebb
    12
    3 Votes
    12 Posts
    5k Views
    Panda
    @phenomlab YAY! It works Thanks so much
  • NodeBB Footer

    Solved Customisation footer nodebb
    10
    1 Votes
    10 Posts
    4k Views
    JAC
    @phenomlab said in NodeBB Footer: @jac and you. Hope all is well and you recover quickly Thanks pal
  • Social icon (Nodebb)

    Solved Customisation nodebb social
    7
    0 Votes
    7 Posts
    3k Views
    JAC
    @phenomlab said in Social icon (Nodebb): @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine [image: 73e805e1-997b-41bf-9259-51c5052ca8fc-image.png] fixed
  • How to set a signature in NodeBB?

    Solved Customisation
    4
    2 Votes
    4 Posts
    2k Views
    JAC
    @phenomlab said in How to set a signature in NodeBB?: @jac No issues at all with copying. This is set using the signature for the user you are posting as. In the case of Hostrisk, it’s set like the below [image: 7bf04183-f6e8-4d72-b0eb-c9a05c9cd24b-image.png] You can set the signature by using https://domain.com/user/theuser/edit Mamy thanks Mark, I’ll set this up later .