NodeBB customisation

[phenomlab]

@jac Find this value which is already set in your custom CSS

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

And change background-color to your preference.

[JAC]

@phenomlab Thanks, will try that now.

[JAC]

@phenomlab said in NodeBB customisation:

#194F90

The nav bar is fine mate, it’s the cards I wish to change mate. Having a nightmate too with the reading progress meter change too. I’ve followed all instructions but can’t get it to show.

Going back to the cards although I’ve chosen the same colour as the nav bar the colours simply don’t match.

Apologies in advance mate I don’t want this to become an issue where you get annoyed

[phenomlab]

@jac Ok. First things first, locate block

.recent-cards .recent-card-container .recent-card

And set line

opacity: 0.8;

To

opacity: 1;

Let me know if that solves the background issue with the cards ?

[JAC]

@phenomlab said in NodeBB customisation:

@jac Ok. First things first, locate block

.recent-cards .recent-card-container .recent-card

And set line

opacity: 0.8;

To

opacity: 1;

Let me know if that solves the background issue with the cards ?

Fantastic, that’s worked many thanks!

[phenomlab]

@JAC your custom header is inactive from what I can see

I’ve enabled it. Still not working as expected though, so checking now

[JAC]

@phenomlab said in NodeBB customisation:

@JAC your custom header is inactive from what I can see

I’ve enabled it. Still not working as expected though, so checking now

Thank you Mark.

[JAC]

@jac said in NodeBB customisation:

@phenomlab said in NodeBB customisation:

@JAC your custom header is inactive from what I can see

I’ve enabled it. Still not working as expected though, so checking now

Thank you Mark.

Just updating laptop…

[phenomlab]

@jac Fixed. You had both the background and the bar set to the same colour

[JAC]

@phenomlab said in NodeBB customisation:

@jac Fixed. You had both the background and the bar set to the same colour

Fantastic mate, thank you very much!

[JAC]

@jac @phenomlab
Sorry Mark, another question for you…

Is there a way to change the header font whilst leaving body text the same?

[phenomlab]

@jac Yes, you can use this CSS

.topic [component="post/header"] {
    font-family: "Arial";

Note that font-family is an example. It can be any font you desire as long as it is available on the site.

[phenomlab]

@jac said in NodeBB customisation:

I don’t want this to become an issue where you get annoyed

Just seen this - I don’t get annoyed. The entire purpose of Sudonix is to help you.

[JAC]

@phenomlab said in NodeBB customisation:

@jac said in NodeBB customisation:

I don’t want this to become an issue where you get annoyed

Just seen this - I don’t get annoyed. The entire purpose of Sudonix is to help you.

Thank you Mark, much appreciated.

[JAC]

@phenomlab said in NodeBB customisation:

@jac Yes, you can use this CSS

.topic [component="post/header"] {
    font-family: "Arial";

Note that font-family is an example. It can be any font you desire as long as it is available on the site.

Thanks mate, how would I know generally which fonts are available sorry?

[JAC]

@phenomlab sorry for the many posts.

I’ve just looked on mobile view and realised the notification icon is placed over the menu icon?

[DownPW]

@jac

test that:

@media (max-width: 1199px)
.header .navbar-toggle .notification-icon {
    left: auto;
    right: -8px;
    top: 10px;
}

[JAC]

@downpw said in NodeBB customisation:

@jac

test that:

@media (max-width: 1199px)
.header .navbar-toggle .notification-icon {
    left: auto;
    right: -8px;
    top: 10px;
}

Thanks, will try that pal .

[JAC]

@jac said in NodeBB customisation:

@downpw said in NodeBB customisation:

@jac

test that:

@media (max-width: 1199px)
.header .navbar-toggle .notification-icon {
    left: auto;
    right: -8px;
    top: 10px;
}

Thanks, will try that pal .

Returns error mate.

[DownPW]

@jac

whoops sorry, forget {}

@media (max-width: 1199px)
{
.header .navbar-toggle .notification-icon {
        left: auto;
        right: -8px;
        top: 10px;
    }
}