Skip to content

NodeBB customisation

Locked Customisation
332 4 274.3k 1
  • @jac It’ll look like this

    942f1f6d-3e0f-4e91-a6d1-b351fdec45b7-image.png

    CSS (already applied to your forum)

    .panel-heading.custom {
        background: #ffc557;
        color: #194F90;
    }
    .panel-body.custom2 {
        background: #194F90;
        color: #ffffff;
    }
    .panel-body.custom2 small {
        color: #ffffff;
        font-size: 40%;
    }
    .row.forum-stats {
        margin-left: 5px;
        margin-right: 5px;
    }
    
    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac It’ll look like this

    942f1f6d-3e0f-4e91-a6d1-b351fdec45b7-image.png

    CSS (already applied to your forum)

    .panel-heading.custom {
        background: #ffc557;
        color: #194F90;
    }
    .panel-body.custom2 {
        background: #194F90;
        color: #ffffff;
    }
    .panel-body.custom2 small {
        color: #ffffff;
        font-size: 40%;
    }
    .row.forum-stats {
        margin-left: 5px;
        margin-right: 5px;
    }
    

    Wow that looks great!! 😁😁

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac It’ll look like this

    942f1f6d-3e0f-4e91-a6d1-b351fdec45b7-image.png

    CSS (already applied to your forum)

    .panel-heading.custom {
        background: #ffc557;
        color: #194F90;
    }
    .panel-body.custom2 {
        background: #194F90;
        color: #ffffff;
    }
    .panel-body.custom2 small {
        color: #ffffff;
        font-size: 40%;
    }
    .row.forum-stats {
        margin-left: 5px;
        margin-right: 5px;
    }
    

    Wow that looks great!! 😁😁

    wrote on last edited by

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac It’ll look like this

    942f1f6d-3e0f-4e91-a6d1-b351fdec45b7-image.png

    CSS (already applied to your forum)

    .panel-heading.custom {
        background: #ffc557;
        color: #194F90;
    }
    .panel-body.custom2 {
        background: #194F90;
        color: #ffffff;
    }
    .panel-body.custom2 small {
        color: #ffffff;
        font-size: 40%;
    }
    .row.forum-stats {
        margin-left: 5px;
        margin-right: 5px;
    }
    

    Wow that looks great!! 😁😁

    Many thanks Mark incredibly happy with the result! 😁

  • JAC JAC

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac It’ll look like this

    942f1f6d-3e0f-4e91-a6d1-b351fdec45b7-image.png

    CSS (already applied to your forum)

    .panel-heading.custom {
        background: #ffc557;
        color: #194F90;
    }
    .panel-body.custom2 {
        background: #194F90;
        color: #ffffff;
    }
    .panel-body.custom2 small {
        color: #ffffff;
        font-size: 40%;
    }
    .row.forum-stats {
        margin-left: 5px;
        margin-right: 5px;
    }
    

    Wow that looks great!! 😁😁

    Many thanks Mark incredibly happy with the result! 😁

    wrote on last edited by

    @jac Good. Thanks for letting me know.

  • @jac Good. Thanks for letting me know.

    wrote on last edited by

    @phenomlab brilliant mate 👏🏻👏🏻👏🏻. Thanks again.

  • JAC JAC

    @phenomlab brilliant mate 👏🏻👏🏻👏🏻. Thanks again.

    wrote on last edited by JAC

    I wonder if the slider can be customised with CSS?

    Looking to add colour thoughout here and there without overdoing it of course.

  • JAC JAC

    I wonder if the slider can be customised with CSS?

    Looking to add colour thoughout here and there without overdoing it of course.

    wrote on last edited by

    @jac Can can customise anything with CSS…

  • @jac Can can customise anything with CSS…

    wrote on last edited by

    @phenomlab very happy to hear this 😁🙌🏻

  • JAC JAC

    @phenomlab very happy to hear this 😁🙌🏻

    wrote on last edited by

    @jac said in NodeBB customisation:

    @phenomlab very happy to hear this 😁🙌🏻

    Yes, but the key here is to not over egg…

  • @jac said in NodeBB customisation:

    @phenomlab very happy to hear this 😁🙌🏻

    Yes, but the key here is to not over egg…

    wrote on last edited by

    @phenomlab Absolutely, I’m just looking to do subtle changes which I think you have achieved so far, can’t thank you enough for the help given via Sudonix 👏🏻.

  • JAC JAC

    @phenomlab Absolutely, I’m just looking to do subtle changes which I think you have achieved so far, can’t thank you enough for the help given via Sudonix 👏🏻.

    wrote on last edited by

    @jac IMG_20211109_175456.jpg

    Is there any way to chance the colour of these at all?

  • JAC JAC

    @jac IMG_20211109_175456.jpg

    Is there any way to chance the colour of these at all?

    wrote on last edited by

    @jac I was thinking the boxes to have a blue background with white icons, and for the reply arrow to be a yellow background colour with a white or blue arrow icon.

  • JAC JAC

    @jac IMG_20211109_175456.jpg

    Is there any way to chance the colour of these at all?

    wrote on last edited by

    @jac yes, but the css classes used by these are also used elsewhere which may result in undesirable behavior elsewhere.

  • @jac yes, but the css classes used by these are also used elsewhere which may result in undesirable behavior elsewhere.

    wrote on last edited by

    @phenomlab hmm! I see, it’s a tough one then!?

  • JAC JAC

    @phenomlab hmm! I see, it’s a tough one then!?

    wrote on last edited by

    @jac just looking at other little bits to improve then…

    What about doing the reverse of the ‘forum stats’ widget?

    IMG_20211109_224511.jpg

    Many thanks as always.

  • JAC JAC

    @jac just looking at other little bits to improve then…

    What about doing the reverse of the ‘forum stats’ widget?

    IMG_20211109_224511.jpg

    Many thanks as always.

    wrote on last edited by phenomlab

    @jac Like this ?

    10ded0f6-35fa-4487-8711-b09947f4c8e6-image.png

    Revised and simplified CSS

    .custom {
        background: #ffc557 !important;
        color: #00205c!important
    }
    .custom a {
        color: #00205c !important;
    }
    .custom2 {
        background: #194F90 !important;
        color: #ffffff;
    }
    .custom2 small {
        color: #ffffff;
        font-size: 40%;
    }
    
  • @jac Like this ?

    10ded0f6-35fa-4487-8711-b09947f4c8e6-image.png

    Revised and simplified CSS

    .custom {
        background: #ffc557 !important;
        color: #00205c!important
    }
    .custom a {
        color: #00205c !important;
    }
    .custom2 {
        background: #194F90 !important;
        color: #ffffff;
    }
    .custom2 small {
        color: #ffffff;
        font-size: 40%;
    }
    
    wrote on last edited by

    @phenomlab brilliant mate, thanks very much for that 😁.

  • JAC JAC

    @phenomlab brilliant mate, thanks very much for that 😁.

    wrote on last edited by

    I wonder if it’s possible to see a preview of what the post titles (header) looks like without the yellow and with blue font?

  • JAC JAC

    I wonder if it’s possible to see a preview of what the post titles (header) looks like without the yellow and with blue font?

    wrote on last edited by

    @jac said in NodeBB customisation:

    I wonder if it’s possible to see a preview of what the post titles (header) looks like without the yellow and with blue font?

    Either that or the blue background and white writing?

  • JAC JAC

    @jac said in NodeBB customisation:

    I wonder if it’s possible to see a preview of what the post titles (header) looks like without the yellow and with blue font?

    Either that or the blue background and white writing?

    wrote on last edited by

    @jac I know we thought it would clash with the header but it’d certainly be interesting to see how it looks.

  • JAC JAC

    @jac I know we thought it would clash with the header but it’d certainly be interesting to see how it looks.

    wrote on last edited by

    @jac Here you go

    Blue font

    c82d1f42-2fa9-4b60-90a1-cf5537f04797-image.png

    Blue background, writing font

    ec81f3c7-7c01-4b6b-bba3-f068cede5180-image.png


Related Topics
  • Forum customisation

    Customisation nodebb forum customised
    11
    2
    6 Votes
    11 Posts
    3k Views
    JAC
    Thank you Mark, the changes look fantastic!!
  • 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 .
  • 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
  • [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.
  • [NodeBB] username cards

    Solved Customisation nodebb
    8
    5 Votes
    8 Posts
    3k Views
    Sampo2910
    @phenomlab Aha…nice to know. As always thank you for the reply and information.
  • 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.
  • Forum customisation

    Customisation forum customise
    17
    3 Votes
    17 Posts
    6k Views
    JAC
    @jac said in Forum customisation: @phenomlab said in Forum customisation: @jac 100%. Just setting up some free time. I’m on annual leave from work offer the coming 2 weeks so hopefully will have a bit more time then. Not a problem Mark, I don’t wish for you to use all your spare time doing that, just do it when you can, no issues I know you’re busy doing other things but when you get a chance mate I’m happy for this to go ahead along with the RSS script.