Skip to content

NodeBB customisation

Locked Customisation
332 4 274.2k 1
  • @jac Yes, you’d target that with custom CSS as below

    .navbar-default {
        background-color: #194F90;
    }
    
    wrote on last edited by
    #6

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

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

    wrote on last edited by
    #7

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

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

    wrote on last edited by phenomlab
    #8

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

    wrote on last edited by
    #9

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

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

    wrote on last edited by
    #10

    @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

    wrote on last edited by
    #11

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

  • JAC JAC

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

    wrote on last edited by
    #12

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

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

    wrote on last edited by
    #13

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

  • JAC JAC

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

    wrote on last edited by phenomlab
    #14

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

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

    wrote on last edited by
    #15

    @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

    wrote on last edited by
    #16

    @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; }
     }
    
    wrote on last edited by
    #17

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

  • wrote on last edited by
    #18

    Is there any way to remove the footer code?

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

  • JAC JAC

    Is there any way to remove the footer code?

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

    wrote on last edited by
    #19

    change Nav hover colour to #FFC557

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

  • JAC JAC

    change Nav hover colour to #FFC557

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

    wrote on last edited by
    #20

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

  • JAC JAC

    Is there any way to remove the footer code?

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

    wrote on last edited by
    #21

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

  • JAC JAC

    change Nav hover colour to #FFC557

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

    wrote on last edited by
    #22

    @jac said in NodeBB customisation:

    change Nav hover colour to #FFC557

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

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

    wrote on last edited by
    #23

    @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;
    }
    
    wrote on last edited by JAC
    #24

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

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

    wrote on last edited by
    #25

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


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 .
  • nodebb-user-level customisation : popover element

    Solved Customisation css user level plugin custom
    15
    6 Votes
    15 Posts
    5k Views
    DownPW
    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.
  • [NodeBB] greeting message

    Solved Customisation css nodebb javascript
    2
    1
    3 Votes
    2 Posts
    2k Views
    phenomlab
    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358
  • [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.
  • 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 .
  • 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