Skip to content

Title on homepage of nodebb forum

Solved Customisation
  • 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? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

  • Heading text on NodeBB forum

    Solved Customisation
    27
    1 Votes
    27 Posts
    2k Views

    @mventures I’ve not done anything here.

  • NodeBB v3

    Announcements
    2
    3 Votes
    2 Posts
    171 Views

    @cagatay JS will work fine - no changes there, and there are no plans to drop support for jQuery. More of an issue is the CSS - for which there are quite a few breaking changes. Keep an eye on sudonix.dev (my development site) where you can see progress in relation to how I am tackling the compatibility issues.

  • 5 Votes
    29 Posts
    2k Views

    @phenomlab said in nodebb chat roll dice game:

    @DownPW I still think you could do something much quicker with jQuery.

    Why not but like I said, I have no skills to do that.

    If you are motivated, why not but I don’t want to bother you especially since it will only be for a certain period of time.

  • 9 Votes
    20 Posts
    907 Views

    @crazycells Yeah, looking at the plugin itself, that’s a hard coded limit

    3d6dbc10-185b-4102-9470-0c2731a10750-image.png

    I’ll probably remove that… eventually…

  • 2 Votes
    7 Posts
    757 Views

    @phenomlab said in NodeBB changing color of the text:

    @marusaky This ought to to it

    a.permalink, a.permalink:active, a.permalink:focus, a.permalink:hover { color: #ffffff; }

    works great, thanks a lot

  • 13 Votes
    21 Posts
    2k Views

    @pobojmoks that’s easily done by modifying the code provided here so that it targets background rather than border

    In essence, the below should work

    $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('.recent-card-container').each(function(i) { var dataId = $(this).attr("data-cid"); var color = $('[role="presentation"]', this).css("background-color"); console.log("data-cid " + dataId + " is " + color); $('[data-cid="' + dataId + '"] .recent-card').attr("style", "background-color: " + color); }); }); });
  • 0 Votes
    7 Posts
    724 Views

    @downpw ooops. Forgot that. Thanks for adding.

  • 1 Votes
    6 Posts
    973 Views

    @jac said in [NodeBB] custom Gravatar image not showing:

    @phenomlab said in [NodeBB] custom Gravatar image not showing:

    @jac are you using Custom ?

    Sure am mate 👍🏻

    Confirmed Fixed