Skip to content

NodeBB customisation

Locked Customisation
332 4 274.3k 1
  • @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;
        
    }
    
  • @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.


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
  • 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]
  • Changing Background on NodeBB

    Solved Customisation background image nodebb
    4
    0 Votes
    4 Posts
    2k Views
    phenomlab
    @cagatay You’d target the body tag and use the below line of CSS background: url(/assets/customcss/backgrounds/default/default.png) no-repeat center center fixed; Obviously, you need to change the path to suit where your image is being stored. More info around the background property can be found here https://www.w3schools.com/cssref/css3_pr_background.php
  • [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
  • 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 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.