NodeBB customisation

[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;
    }
}

[JAC]

@downpw said in NodeBB customisation:

@jac

whoops sorry, forget {}

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

Many thanks mate .

How does that look now?

[DownPW]

Yeah play with code for obtain that you want

[JAC]

@downpw Thanks

[JAC]

@jac said in NodeBB customisation:

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

Can fonts be imported? Looking for a bold font for titles.

[phenomlab]

@jac yes, they can. Here’s an example of how that would work

How to Import Google Fonts in CSS File

Google Fonts is a free service of web fonts. In this snippet, you can find how to import Google Fonts in CSS file using the @import rule or the ...(more)

www.w3docs.com

[JAC]

@phenomlab said in NodeBB customisation:

@jac yes, they can. Here’s an example of how that would work

How to Import Google Fonts in CSS File

Google Fonts is a free service of web fonts. In this snippet, you can find how to import Google Fonts in CSS file using the @import rule or the ...(more)

www.w3docs.com

Thanks mate, will check this out over the weekend .

[JAC]

@jac said in NodeBB customisation:

@phenomlab said in NodeBB customisation:

@jac yes, they can. Here’s an example of how that would work

How to Import Google Fonts in CSS File

Google Fonts is a free service of web fonts. In this snippet, you can find how to import Google Fonts in CSS file using the @import rule or the ...(more)

www.w3docs.com

Thanks mate, will check this out over the weekend .

how would this work if I just wanted to change the title font?

[phenomlab]

@jac You’d need to target the element you want, and change the font being called - an example

h1.title {
font-family: "mygooglefont";
}