Skip to content

Title on homepage of nodebb forum

Solved Customisation
2 2 1.5k 1
  • I have a nodebb forum but theres no place to put subheading info, briefly describing what forum is about.
    You have this on your page saying “Technology Consultancy and Advisory”
    I understand you did this with custom code?
    Please can you share how I can add this similarly
    Thanks

  • @eveh Welcome board 🙂

    The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps

    • Navigate to /admin/appearance/customise#custom-header
    • Add the below code to your header, and save once completed
    <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol>
    
    • Navigate to /admin/appearance/customise#custom-js and add the below code, then save
    $(document).ready(function() {
        $(window).on('action:ajaxify.end', function(data) {
            // Initialise mainbanner ID, but hide it from view 
            $('#mainbanner').hide();
            var pathname = window.location.pathname;
            if (pathname === "/") {
                $("#addtext").text("Your Title");
                $('#mainbanner').show();
            } else {}
            // If we want to add a title to a sub page, uncomment the below and adjust accordingly
            //if (pathname === "/yourpath") {
            //$("#addtext").text("Your Title");
            //$('#mainbanner').show();
            //}
        });
    });
    
    • Navigate to /admin/appearance/customise#custom-css and add the below CSS block
    .breadcrumb {
        right: 0;
        margin-right: auto;
        text-align: center;
        background: #0086c4;
        color: #ffffff;
        width: 100vw;
        position: relative;
        margin-left: -50vw;
        left: 50%;
        top: 50px;
        position: fixed;
        z-index: 1020;
    }
    

    Note, that you will need to adjust your CSS code to suit your own site / requirements.

  • phenomlabundefined phenomlab has marked this topic as solved on
  • phenomlabundefined phenomlab forked this topic on

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • navigation menu panel on mobile

    Solved Customisation nodebb css
    8
    1
    7 Votes
    8 Posts
    2k Views
    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check. EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right… .bottombar-nav { padding: 0px !important; } I’ve removed this so it reflects stock Harmony.
  • Smart Widgets

    Solved Configure nodebb
    9
    3 Votes
    9 Posts
    2k Views
    @Panda said in Smart Widgets: So why is that, or conversely why would the function to expose username ever be required, as it seems app.user is already an available global object? It is, yes, but not if you are using it outside of a widget. The function I wrote is also historical and comes from the 2.x train
  • Want to use Sudonix themes ?

    Chitchat themes nodebb
    80
    1
    34 Votes
    80 Posts
    20k Views
    omg thank you Mark.
  • NodeBB inline videoplayer

    Solved Customisation nodebb
    12
    3 Votes
    12 Posts
    3k Views
    @phenomlab YAY! It works Thanks so much
  • Social icon (Nodebb)

    Solved Customisation nodebb social
    7
    0 Votes
    7 Posts
    2k 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 [image: 1638880098289-73e805e1-997b-41bf-9259-51c5052ca8fc-image.png] fixed
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    2k 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.
  • Customising NodeBB

    Locked Customisation nodebb
    3
    0 Votes
    3 Posts
    2k Views
    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation
  • NodeBB customisation

    Locked Customisation
    332
    27 Votes
    332 Posts
    170k Views
    @jac Given your departure away from your previous project, I’m going to close this thread…