NodeBB customisation

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

[JAC]

@phenomlab Thank you, I’ll take a look

[JAC]

@phenomlab without taking every idea from yourself…

The banner effect that you have in place was it easy to do?

This is something I wanted to do originally with photos, but the general look and feel of the wide banner effect with the font on does look really impressive.

I’m wondering if it would look any better than what I currently have?

[phenomlab]

@jac Do you mean this part ?

[JAC]

@phenomlab said in NodeBB customisation:

@jac Do you mean this part ?

Yes mate

[phenomlab]

@jac Easily done, but it’s not entirely “simple”

This is the CSS that handles that

.Hero {
    background: #8A8C8E;
    position: sticky;
    left: 0;
    right: 0;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    z-index: 500;
    padding-top: 10px;
    margin-top: -20px;
    margin-bottom: 30px;
    height: 70px;
    color: #ffffff;
}
ul.PageHero-items li {
    list-style: none;
    text-align: center;
}
.PageHero-title {
    vertical-align: middle;
    font-size: 3rem!important;
    color: #ffffff;
    font-family: Poppins;
    display: inline-block;
    margin-left: 15px;
    max-width: 800px;
}
h2.PageHero-title::after {
    display: flex;
    margin: -10px 0 0!important;
    font-size: 2rem;
    font-weight: 300;
    -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(#fff,#aaa);
    line-height: 2.0;
    font-family: poppins;
}

You’ll then need a global widget with this code

<header class="Hero PageHero">
<div class="container">
<ul class="PageHero-items">
<li class="item-title">
<h2 class="PageHero-title">{title}</h2>
</li>
</ul>
</div>
</header>

[JAC]

@phenomlab said in NodeBB customisation:

Easily done, but it’s not entirely “simple”

[JAC]

@jac said in NodeBB customisation:

@phenomlab said in NodeBB customisation:

Easily done, but it’s not entirely “simple”

Will have a look thanks mate.

[phenomlab]

@jac I can assist of course…

[JAC]

@phenomlab said in NodeBB customisation:

@jac I can assist of course…

Thank you matey, appreciated

[JAC]

@phenomlab I have ran into the not entirely “simple” part .

[JAC]

@jac look to have fixed

[JAC]

@jac said in NodeBB customisation:

@jac look to have fixed

…ish

[phenomlab]

@jac That’s caused by the recent cards plugin, which is being loaded first. You’ll need to remove or re-position that widget

[JAC]

@phenomlab Thanks mate, I’ve been trying to rearrange it so the recent cards widget falls under the banner.

[phenomlab]

@jac Not hard to do (potentially) but it would mean changing the loading order of the plugins. Let me have a look.