Skip to content

NodeBB customisation

Locked 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 😉.

  • @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 🙂

    IMG_20220118_192649.jpg

    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.

    IMG_20220118_192921.jpg

  • @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 !

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

    859bc79a-423d-43a5-ae98-4658e4aaa9aa-image.png

    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 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
                }
    });
    
  • @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 😁.

  • @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.

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

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

    e7b709f9-eb02-4d82-9d07-36c5c616d0c3-image.png

    To this

    61244bb9-4998-4d41-8bff-f7933f21200e-image.png

    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.

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

    e7b709f9-eb02-4d82-9d07-36c5c616d0c3-image.png

    To this

    61244bb9-4998-4d41-8bff-f7933f21200e-image.png

    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!

  • @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)

    b4c8d8f3-0edf-40dc-9170-dd1229a3fba3-image.png

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

  • @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)

    b4c8d8f3-0edf-40dc-9170-dd1229a3fba3-image.png

    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.

  • phenomlabundefined phenomlab locked this topic on
  • @jac Given your departure away from your previous project, I’m going to close this thread… 🙂


Related Topics
  • NodeBB recent cards customisation

    Solved Customisation
    3
    2 Votes
    3 Posts
    100 Views

    @phenomlab thank you very much for the assistance Mark, massively appreciated as always.

    The great thing about this is it’s all documented for other NodeBB users that come looking for solutions 😃.

    Looks far better 🤝👍🏻.

  • Forum Icons NodeBB

    Solved Customisation
    13
    0 Votes
    13 Posts
    1k Views

    @cagatay That matches what I see

    4f0f858d-9812-42b1-9f61-ffb13d31dccd-image.png

  • [NODEBB] Scroll Button

    Solved Customisation
    7
    0 Votes
    7 Posts
    860 Views

    @downpw ooops. Forgot that. Thanks for adding.

  • NodeBB Footer

    Solved Customisation
    10
    1 Votes
    10 Posts
    1k Views

    @phenomlab said in NodeBB Footer:

    @jac and you. Hope all is well and you recover quickly

    Thanks pal 😁🤝🏻

  • Social icon (Nodebb)

    Solved Customisation
    7
    0 Votes
    7 Posts
    1k Views

    @phenomlab said in Social icon (Nodebb):

    @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine

    73e805e1-997b-41bf-9259-51c5052ca8fc-image.png

    fixed 🙂

  • NodeBB Discord Plugins

    Unsolved Customisation
    7
    0 Votes
    7 Posts
    971 Views

    @RiekMedia hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?

  • NodeBB Design help

    Solved Customisation
    8
    2 Votes
    8 Posts
    959 Views

    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ?

    For the record, this is what I added

    #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; }

    The /categories page seems a bit messed up, so looking at that currently

    EDIT - issued some override CSS in the CATEGORIES widget

    <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style>

    That should resolve the /categories issue.

  • Forum customisation

    Customisation
    17
    3 Votes
    17 Posts
    1k Views

    @jac said in Forum customisation:

    @phenomlab said in Forum customisation:

    @jac 100%. Just setting up some free time. I’m on annual leave from work offer the coming 2 weeks so hopefully will have a bit more time then.

    Not a problem Mark, I don’t wish for you to use all your spare time doing that, just do it when you can, no issues 🙂

    I know you’re busy doing other things but when you get a chance mate I’m happy for this to go ahead along with the RSS script.

    👍🏻