NodeBB customisation

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

[JAC]

@phenomlab said in NodeBB customisation:

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

Many thanks mate.

I think the issue falls as one widget is global and the other is situated under categories.

[phenomlab]

@jac Unfortunately, no. It’s the loading order of the plugin. I’ve changed it, but it doesn’t seem to have any impact, so the only “fix” is to remove the recent cards widget or place it elsewhere.

[JAC]

@phenomlab said in NodeBB customisation:

@jac Unfortunately, no. It’s the loading order of the plugin. I’ve changed it, but it doesn’t seem to have any impact, so the only “fix” is to remove the recent cards widget or place it elsewhere.

Thanks for trying mate.

That’s fine with me for it to be placed elsewhere.

[phenomlab]

@jac Ok. If you check your site, you’ll see it’s been moved to drafts for the time being so won’t be displayed.

[JAC]

@phenomlab Thank you, is there any way to change to a bolder font? or does this include google fonts again? I do have one in mind but need to add it.

[JAC]

@jac said in NodeBB customisation:

@phenomlab Thank you, is there any way to change to a bolder font? or does this include google fonts again? I do have one in mind but need to add it.

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great typography

Google Fonts

Bebas Neue - Google Fonts

Bebas Neue is a display family suitable for headlines, captions, and packaging, designed by Ryoichi Tsunekawa. It's based on the original Bebas typefa...(more)

Google Fonts

Pacifico - Google Fonts

Aloha! Pacifico is an original and fun brush script handwriting font by Vernon Adams which was inspired by the 1950s American surf culture in 2011. It...(more)

Google Fonts

Balsamiq Sans - Google Fonts

Balsamiq Sans is the handwritten font created for the Balsamiq Wireframes and has been in use since version 2.1. The font contains 942 glyphs in 2 wei...(more)

Google Fonts

Alfa Slab One - Google Fonts

Alfa Slab One is a contemporary take on the Six-lines Pica Egyptian created by Robert Thorne for the Thorowgood Foundry in 1921. Although initially ba...(more)

Google Fonts

well… there’s a few. I wonder if these can be mixed and matched? One for titles, one for categories etc?

[phenomlab]

@jac said in NodeBB customisation:

is there any way to change to a bolder font?

Yes, you need to target the text itself - see below (900 = heavy, 600 = bold, 400 = standard, 300 = light)

.PageHero-title {
    font-weight: 900;
}

[phenomlab]

@jac They can, but you will impact the loading speed of your site with too many fonts. Best to pick 2-3 max.

[JAC]

@phenomlab said in NodeBB customisation:

@jac They can, but you will impact the loading speed of your site with too many fonts. Best to pick 2-3 max.

Thanks mate, I’ll try one now.