NodeBB customisation

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

[JAC]

@jac still looking how to import font into css.

[JAC]

@jac said in NodeBB customisation:

@jac still looking how to import font into css.

Trying to find out how to add this - <style>
@import url(‘https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap’);
</style> as the title font. hmm!

[phenomlab]

@jac said in NodeBB customisation:

@import url(‘https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap’);

You should place that line at the very top of your custom CSS file.

[JAC]

@phenomlab said in NodeBB customisation:

@jac said in NodeBB customisation:

@import url(‘https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap’);

You should place that line at the very top of your custom CSS file.

Really sorry to bother you mate.

I’ve just tried the instruction above. Unfortunately it comes up with an error when adding the code.

I’d like to see and know what I’ve done wrong . Possibly a { missing or something? Just purely speculation which isn’t always a good thing .

[JAC]

@jac said in NodeBB customisation:

@phenomlab said in NodeBB customisation:

@jac said in NodeBB customisation:

@import url(‘https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap’);

You should place that line at the very top of your custom CSS file.

Really sorry to bother you mate.

I’ve just tried the instruction above. Unfortunately it comes up with an error when adding the code.

I’d like to see and know what I’ve done wrong . Possibly a { missing or something? Just purely speculation which isn’t always a good thing .

Forgot to add picture

I also notice an alignment issue of the text and how to remove the other title that shows underneath? Clearly a work in progress so I do apologise and thank you for your patience.

[phenomlab]

@jac said in NodeBB customisation:

I’ve just tried the instruction above. Unfortunately it comes up with an error when adding the code.

Fixed. This is because you had

@import url(‘https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap’);

When it should be

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

I’m guessing this was a copy/paste ? This happens all the time !

[phenomlab]

@jac said in NodeBB customisation:

I also notice an alignment issue of the text and how to remove the other title that shows underneath? Clearly a work in progress so I do apologise and thank you for your patience.

Yes, see below

This is caused by your text being too long to fit in the allocated space. There’s a couple of choices here

• Make the text size smaller
• Enlarge the size of the viewport to accommodate

I personally wouldn’t recommend the second option as this isn’t really a fix and will look dire on mobile devices.

[phenomlab]

@jac said in NodeBB customisation:

how to remove the other title that shows underneath?

Primarily, with CSS, so

.topic [component="post/header"] {
    display: none;
}

However, this may cause a conflict, so using this small function below (goes in Custom JS) will do the same thing but be more specific for the target

$(window).on('action:ajaxify.end', function (data) {
	        if (window.location.href.indexOf("topic") > -1) {
                console.log("This is a topic, so hide the stock header");
                                  $('.topic [component="post/header"]').hide();
            }
            else {
                    // Nothing to do
            }
});

[JAC]

@phenomlab said in NodeBB customisation:

@jac said in NodeBB customisation:

how to remove the other title that shows underneath?

Primarily, with CSS, so

.topic [component="post/header"] {
    display: none;
}

However, this may cause a conflict, so using this small function below (goes in Custom JS) will do the same thing but be more specific for the target

$(window).on('action:ajaxify.end', function (data) {
	        if (window.location.href.indexOf("topic") > -1) {
                console.log("This is a topic, so hide the stock header");
                                  $('.topic [component="post/header"]').hide();
            }
            else {
                    // Nothing to do
            }
});

Many thanks for all the answers mate. What to do . I suppose I’m happy for you to do the most logical solution and I’ll go with that .

[phenomlab]

@jac The above is already active on your site, so nothing to do. You just need to make a decision re this

This is caused by your text being too long to fit in the allocated space. There’s a couple of choices here

Make the text size smaller

Enlarge the size of the viewport to accommodate

I personally wouldn’t recommend the second option as this isn’t really a fix and will look dire on mobile devices.

[JAC]

@phenomlab said in NodeBB customisation:

@jac The above is already active on your site, so nothing to do. You just need to make a decision re this

This is caused by your text being too long to fit in the allocated space. There’s a couple of choices here

Make the text size smaller

Enlarge the size of the viewport to accommodate

I personally wouldn’t recommend the second option as this isn’t really a fix and will look dire on mobile devices.

That’s fine mate, make the title text smaller then would you say? either that or go back to how it was if it’s easier and just change the font etc?

[phenomlab]

@jac said in NodeBB customisation:

I suppose I’m happy for you to do the most logical solution and I’ll go with that .

A more elegant approach would be this

.Hero {
    min-height: 70px;
}

This way, we set the height minimum to 70px to get the same height when the text fits without issue. When the text is longer, the same <div> will expand to fit. So, you go from this

To this

I also added these two media queries to handle the text size on mobile devices (it’s huge otherwise and looks, well, nasty)

@media (max-width: 767px) {
h2.PageHero-title {
    font-size: 1.8rem !important;
}
}
 
@media (min-width: 1200px) {
    h2.PageHero-title {
    font-size: 3rem;
}
}

I think this looks better. It’s active on your site now.

[JAC]

@phenomlab said in NodeBB customisation:

@jac said in NodeBB customisation:

I suppose I’m happy for you to do the most logical solution and I’ll go with that .

A more elegant approach would be this

.Hero {
    min-height: 70px;
}

This way, we set the height minimum to 70px to get the same height when the text fits without issue. When the text is longer, the same <div> will expand to fit. So, you go from this

To this

I also added these two media queries to handle the text size on mobile devices (it’s huge otherwise and looks, well, nasty)

@media (max-width: 767px) {
h2.PageHero-title {
    font-size: 1.8rem !important;
}
}
 
@media (min-width: 1200px) {
    h2.PageHero-title {
    font-size: 3rem;
}
}

I think this looks better. It’s active on your site now.

Many thanks mate for all the work! I really appreciate it. How do I add a new title font? And then a new category font if possible?

Many thanks as always!

[phenomlab]

@jac You’d need to target the CSS class itself, so for the title font, you can use (substitute the font name for what you want to use)

h2.PageHero-title {
    font-family: "Alfa Slab One";
}

And for category, are you sure you want to do this ? It may look overdone (in my view)

Unless you are looking for a specific font that isn’t as “out there” as the header ?

[JAC]

@phenomlab said in NodeBB customisation:

@jac You’d need to target the CSS class itself, so for the title font, you can use (substitute the font name for what you want to use)

h2.PageHero-title {
    font-family: "Alfa Slab One";
}

And for category, are you sure you want to do this ? It may look overdone (in my view)

Unless you are looking for a specific font that isn’t as “out there” as the header ?

Thanks for the info mate.

Yes I agree that font does look over the top mate. I’ll have a look out for something else.