Skip to content

NodeBB customisation

Locked Customisation
332 4 208.8k 1
  • @phenomlab said in NodeBB customisation:

    @jac Yes, you’d target that with custom CSS as below

    .navbar-default {
        background-color: #194F90;
    }
    

    Fantastic, I’ll try this later 😁.

    Many thanks 👍🏻.

    @jac said in NodeBB customisation:

    .navbar-default {
    background-color: #194F90;
    }

    I’m glad to say this change has worked 🙂
    Screenshot 2021-09-10 at 19-48-54 Stockport County Fans Forum .png

    Now I need to change the icons and font to white, any idea how this is done?

    many thanks as always for the incredible FREE help!

  • @jac said in NodeBB customisation:

    .navbar-default {
    background-color: #194F90;
    }

    I’m glad to say this change has worked 🙂
    Screenshot 2021-09-10 at 19-48-54 Stockport County Fans Forum .png

    Now I need to change the icons and font to white, any idea how this is done?

    many thanks as always for the incredible FREE help!

    @jac not in front of a pc currently, but will get this to you later. In the meantime, You can always right click the element you’re interested in changing then left click inspect.

    Make sure the elements tab is selected at the bottom of the screen and you’ll be able to see the underlying css on the right (depending where you’re developer console is docked in your browser). The css object you want to change to will be colour: #ffffff;

  • @jac not in front of a pc currently, but will get this to you later. In the meantime, You can always right click the element you’re interested in changing then left click inspect.

    Make sure the elements tab is selected at the bottom of the screen and you’ll be able to see the underlying css on the right (depending where you’re developer console is docked in your browser). The css object you want to change to will be colour: #ffffff;

    @phenomlab said in NodeBB customisation:

    @jac not in front of a pc currently, but will get this to you later. In the meantime, You can always right click the element you’re interested in changing then left click inspect.

    Make sure the elements tab is selected at the bottom of the screen and you’ll be able to see the underlying css on the right (depending where you’re developer console is docked in your browser). The css object you want to change to will be colour: #ffffff;

    Thanks Mark, I’ll have a crack at this later on once back from work, although if it can be done on mobile I’m happy to try that also.

  • @phenomlab said in NodeBB customisation:

    @jac not in front of a pc currently, but will get this to you later. In the meantime, You can always right click the element you’re interested in changing then left click inspect.

    Make sure the elements tab is selected at the bottom of the screen and you’ll be able to see the underlying css on the right (depending where you’re developer console is docked in your browser). The css object you want to change to will be colour: #ffffff;

    Thanks Mark, I’ll have a crack at this later on once back from work, although if it can be done on mobile I’m happy to try that also.

    @jac Just took a look at your site. Here’s what you’ll need

    .navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a {
        color: #ffffff;
    }
    

    That in turn will show

    f788d914-c999-4ac2-bc1f-788722825ee6-image.png

  • @jac Just took a look at your site. Here’s what you’ll need

    .navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a {
        color: #ffffff;
    }
    

    That in turn will show

    f788d914-c999-4ac2-bc1f-788722825ee6-image.png

    @phenomlab Thanks very much, just applied the code. 😁.

  • @phenomlab Thanks very much, just applied the code. 😁.

    @phenomlab I notice that in mobile view the above change only changes the forum heading to white, but leaves the icons in grey (is there any fix for this?).

    Meanwhile on desktop it changes everything to white (as I wanted), but hovering over the icons it turns them to grey, is there any way to change this so they change to #FFC557?

    Many thanks as always 🙂 .

  • @phenomlab I notice that in mobile view the above change only changes the forum heading to white, but leaves the icons in grey (is there any fix for this?).

    Meanwhile on desktop it changes everything to white (as I wanted), but hovering over the icons it turns them to grey, is there any way to change this so they change to #FFC557?

    Many thanks as always 🙂 .

    @phenomlab I do have a few changes I have in mind to be made, but am aware of posting them all at once ;).

  • @phenomlab I notice that in mobile view the above change only changes the forum heading to white, but leaves the icons in grey (is there any fix for this?).

    Meanwhile on desktop it changes everything to white (as I wanted), but hovering over the icons it turns them to grey, is there any way to change this so they change to #FFC557?

    Many thanks as always 🙂 .

    @jac said in NodeBB customisation:

    I notice that in mobile view the above change only changes the forum heading to white, but leaves the icons in grey (is there any fix for this?).

    Yes, it’s probably being overridden with another class that is a closer match. Try this

    @media screen (min-width: 767px) { 
     .navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a { 
    color: #ffffff; }
     }
    
  • @phenomlab I do have a few changes I have in mind to be made, but am aware of posting them all at once ;).

    @jac said in NodeBB customisation:

    I do have a few changes I have in mind to be made, but am aware of posting them all at once ;).

    You can post them all at once, no issues. You might want to create screenshots and identify the areas that you’d like changed. I have your site URL so it won’t be too tough to accomplish

  • @jac said in NodeBB customisation:

    I do have a few changes I have in mind to be made, but am aware of posting them all at once ;).

    You can post them all at once, no issues. You might want to create screenshots and identify the areas that you’d like changed. I have your site URL so it won’t be too tough to accomplish

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    I do have a few changes I have in mind to be made, but am aware of posting them all at once ;).

    You can post them all at once, no issues. You might want to create screenshots and identify the areas that you’d like changed. I have your site URL so it won’t be too tough to accomplish

    Thanks 🙂

  • @jac said in NodeBB customisation:

    I notice that in mobile view the above change only changes the forum heading to white, but leaves the icons in grey (is there any fix for this?).

    Yes, it’s probably being overridden with another class that is a closer match. Try this

    @media screen (min-width: 767px) { 
     .navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a { 
    color: #ffffff; }
     }
    

    @phenomlab said in NodeBB customisation:

    @media screen (min-width: 767px) {
    .navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a {
    color: #ffffff; }
    }

    Thanks Mark, will try this as soon as possible 🙂

  • Is there any way to remove the footer code?

    Screenshot 2021-09-12 at 13-32-11 phenomlab.png

  • Is there any way to remove the footer code?

    Screenshot 2021-09-12 at 13-32-11 phenomlab.png

    change Nav hover colour to #FFC557

    Screenshot 2021-09-12 at 13-34-08 phenomlab.png

  • change Nav hover colour to #FFC557

    Screenshot 2021-09-12 at 13-34-08 phenomlab.png

    @jac said in NodeBB customisation:

    change Nav hover colour to #FFC557

    Screenshot 2021-09-12 at 13-34-08 phenomlab.png

    I hope it’s ok just firing things into the thread once I find something I may want to change?

  • Is there any way to remove the footer code?

    Screenshot 2021-09-12 at 13-32-11 phenomlab.png

    @jac Yep. Go into the ACP->Widgets, and you’ll see it under the footer in “Global”

    1e6ad998-4e5e-4b6a-80c3-d214acaeead2-image.png

    See the “x” on the global footer HTML widget ? Delete that, and confirm, then it’ll disappear.

  • change Nav hover colour to #FFC557

    Screenshot 2021-09-12 at 13-34-08 phenomlab.png

    @jac said in NodeBB customisation:

    change Nav hover colour to #FFC557

    .navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a:hover {
        color: #FFC557;
    }
    
  • @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    I do have a few changes I have in mind to be made, but am aware of posting them all at once ;).

    You can post them all at once, no issues. You might want to create screenshots and identify the areas that you’d like changed. I have your site URL so it won’t be too tough to accomplish

    Thanks 🙂

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    I do have a few changes I have in mind to be made, but am aware of posting them all at once ;).

    You can post them all at once, no issues. You might want to create screenshots and identify the areas that you’d like changed. I have your site URL so it won’t be too tough to accomplish

    Thanks 🙂

    I can confirm this has indeed work 🙂 thank you very much1 🙂

  • @jac said in NodeBB customisation:

    change Nav hover colour to #FFC557

    .navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a:hover {
        color: #FFC557;
    }
    

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    change Nav hover colour to #FFC557

    .navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a:hover {
        color: #FFC557;
    }
    

    Is there any way to change the tag colours in the post?

    Screenshot 2021-09-12 at 12-03-52 Simon Rusk Post-Match Interview - County 0-3 Yeovil.png

    with white writing and a blue background (#255A9F)

    something I’m looking to do with the quotes block, admittedly like you have done yourself (it looks very smart indeed 😉 )

  • @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    I do have a few changes I have in mind to be made, but am aware of posting them all at once ;).

    You can post them all at once, no issues. You might want to create screenshots and identify the areas that you’d like changed. I have your site URL so it won’t be too tough to accomplish

    Thanks 🙂

    I can confirm this has indeed work 🙂 thank you very much1 🙂

    @jac said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    I do have a few changes I have in mind to be made, but am aware of posting them all at once ;).

    You can post them all at once, no issues. You might want to create screenshots and identify the areas that you’d like changed. I have your site URL so it won’t be too tough to accomplish

    Thanks 🙂

    I can confirm this has indeed work 🙂 thank you very much1 🙂

    Has the mobile view nav font changed to white? Would you mind checking, using two browsers one is definitely grey and one looks a little lighter but it’s hard to tell.

  • @jac said in NodeBB customisation:

    @jac said in NodeBB customisation:

    @phenomlab said in NodeBB customisation:

    @jac said in NodeBB customisation:

    I do have a few changes I have in mind to be made, but am aware of posting them all at once ;).

    You can post them all at once, no issues. You might want to create screenshots and identify the areas that you’d like changed. I have your site URL so it won’t be too tough to accomplish

    Thanks 🙂

    I can confirm this has indeed work 🙂 thank you very much1 🙂

    Has the mobile view nav font changed to white? Would you mind checking, using two browsers one is definitely grey and one looks a little lighter but it’s hard to tell.

    @jac No, it hasn’t. You’ll need this

    .navbar-default .navbar-toggle {
        color: #ffffff;
    }
    

Related Topics
  • NodeBB recent cards customisation

    Solved Customisation nodebb recent cards
    3
    1
    2 Votes
    3 Posts
    1k Views
    @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 .
  • 6 Votes
    15 Posts
    4k Views
    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.
  • Forum Icons NodeBB

    Solved Customisation icons forum nodebb
    13
    0 Votes
    13 Posts
    3k Views
    @cagatay That matches what I see [image: 1667218162107-4f0f858d-9812-42b1-9f61-ffb13d31dccd-image.png]
  • [NODEBB] Scroll Button

    Solved Customisation css javascript html scroll button
    7
    1
    0 Votes
    7 Posts
    2k Views
    @downpw ooops. Forgot that. Thanks for adding.
  • [NODEBB] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    7k Views
    @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 Discord Plugins

    Unsolved Customisation nodebb discord plugin
    7
    0 Votes
    7 Posts
    3k Views
    @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
    3k Views
    @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
    5k Views
    @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.