NodeBB customisation
-
As you know I’m looking to set up a NodeBB installation and customise it with the football club colours & new font etc.
Is this something you would be able to assist with?
Many thanks
-
As you know I’m looking to set up a NodeBB installation and customise it with the football club colours & new font etc.
Is this something you would be able to assist with?
Many thanks
@jac Yes, of course. Just let me know when you’re ready, and give me some idea of swatch
-
@jac Yes, of course. Just let me know when you’re ready, and give me some idea of swatch
@phenomlab said in NodeBB customisation:
@jac Yes, of course. Just let me know when you’re ready, and give me some idea of swatch
Many thanks as always Mark
.
-
@phenomlab said in NodeBB customisation:
@jac Yes, of course. Just let me know when you’re ready, and give me some idea of swatch
Many thanks as always Mark
.
@jac said in NodeBB customisation:
@phenomlab said in NodeBB customisation:
@jac Yes, of course. Just let me know when you’re ready, and give me some idea of swatch
Many thanks as always Mark
.
.
Ok here goes …The first thing I want to do is try to change the menu colour to #194F90 is something like this possible?
-
@jac said in NodeBB customisation:
@phenomlab said in NodeBB customisation:
@jac Yes, of course. Just let me know when you’re ready, and give me some idea of swatch
Many thanks as always Mark
.
.
Ok here goes …The first thing I want to do is try to change the menu colour to #194F90 is something like this possible?
@jac Yes, you’d target that with custom CSS as below
.navbar-default { background-color: #194F90; } -
@jac Yes, you’d target that with custom CSS as below
.navbar-default { background-color: #194F90; }
@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
.
-
@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
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
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
-
@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
@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
-
-
-
@jac said in NodeBB customisation:
change Nav hover colour to #FFC557
I hope it’s ok just firing things into the thread once I find something I may want to change?
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (ether email, or push notification). You'll also be able to save bookmarks, use reactions, and upvote to show your appreciation to other community members.
With your input, this post could be even better 💗
RegisterLog in