Skip to content

NodeBB customisation

Locked Customisation
332 4 274.3k 1
  • 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;
        
    }
    
  • @jac with the css the offline point changes from gray to red

    .status.offline {
        color:red;
        
    }
    
    wrote on last edited by

    @riekmedia said in NodeBB customisation:

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

    .status.offline {
        color:red;
        
    }
    

    Many thanks for the code that has worked. 👍🏻.

    I’ll not be much help technical wise I’m afraid on here but it’s great to see others posting and helping out too 😁.

  • JAC JAC

    @riekmedia said in NodeBB customisation:

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

    .status.offline {
        color:red;
        
    }
    

    Many thanks for the code that has worked. 👍🏻.

    I’ll not be much help technical wise I’m afraid on here but it’s great to see others posting and helping out too 😁.

    wrote on last edited by JAC

    Is there any way to style this widget at all?

    IMG_20211108_210405.jpg

    Image uploaded successfully 👍🏻😉.

  • JAC JAC

    Is there any way to style this widget at all?

    IMG_20211108_210405.jpg

    Image uploaded successfully 👍🏻😉.

    wrote on last edited by

    @jac yes, there is. What do you have in mind ?

  • JAC JAC

    Is there any way to style this widget at all?

    IMG_20211108_210405.jpg

    Image uploaded successfully 👍🏻😉.

    wrote on last edited by

    Unsure if it’s possible but for the title background to be in yellow that’s used throughout the forum and then the main background to be blue with white font?

    I’m unsure if this is poss for individual widgets however if this can be achieved that would look great!

    Many thanks.

  • JAC JAC

    Unsure if it’s possible but for the title background to be in yellow that’s used throughout the forum and then the main background to be blue with white font?

    I’m unsure if this is poss for individual widgets however if this can be achieved that would look great!

    Many thanks.

    wrote on last edited by

    Basically I’m looking to improve and edit things where I can, so little changes here and there that I think will make a difference 😁.

  • JAC JAC

    Unsure if it’s possible but for the title background to be in yellow that’s used throughout the forum and then the main background to be blue with white font?

    I’m unsure if this is poss for individual widgets however if this can be achieved that would look great!

    Many thanks.

    wrote on last edited by

    @jac said in NodeBB customisation:

    I’m unsure if this is poss for individual widgets

    Not “out of the box” but absolutely possible with the use of ID attributes once added to the widgets themselves.

  • @jac said in NodeBB customisation:

    I’m unsure if this is poss for individual widgets

    Not “out of the box” but absolutely possible with the use of ID attributes once added to the widgets themselves.

    wrote on last edited by

    @phenomlab that definitely sounds great if it is possible 😁.

  • @jac said in NodeBB customisation:

    I’m unsure if this is poss for individual widgets

    Not “out of the box” but absolutely possible with the use of ID attributes once added to the widgets themselves.

    wrote on last edited by

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    I’m unsure if this is poss for individual widgets

    Not “out of the box” but absolutely possible with the use of ID attributes once added to the widgets themselves.

    Interested to see how this would look.

  • JAC JAC

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    I’m unsure if this is poss for individual widgets

    Not “out of the box” but absolutely possible with the use of ID attributes once added to the widgets themselves.

    Interested to see how this would look.

    wrote on last edited by

    @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;
    }
    
  • @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…


Related Topics
  • 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] 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] 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.
  • 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
  • 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 ?
  • 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