Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation

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 💗

  • 3 Votes
    7 Posts
    557 Views

    @crazycells pleasure. Using percentages makes much more sense in this case. It’s the same argument with px vs pt vs em with fonts, margins, padding, etc., in the sense that em is generally preferred over px and pt

    https://stackoverflow.com/questions/609517/why-em-instead-of-px

  • 1 Votes
    2 Posts
    611 Views

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

  • 2 Votes
    7 Posts
    762 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

  • 3 Votes
    6 Posts
    991 Views

    @phenomlab

    haha!!
    You are crazy. In a good way, of course 🙂

    It’s a way of saying you’re awesome !

  • 3 Votes
    12 Posts
    981 Views

    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example

    body { font-family: "Poppins"; font-size: 16px; }

    Essentially, you use the font-size CSS directive.

  • [NODEBB] Welcome Message

    Solved Customisation
    18
    13 Votes
    18 Posts
    2k Views

    For anyone reviewing this post, there’s an updated version here that also includes an sunrise / sun / moon icon depending on the time of day

    https://sudonix.com/topic/233/nodebb-welcome-message-with-logo-footer-change/3?_=1645445273209

  • NodeBB Footer

    Solved Customisation
    10
    1 Votes
    10 Posts
    978 Views

    @phenomlab said in NodeBB Footer:

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

    Thanks pal 😁🤝🏻

  • 0 Votes
    3 Posts
    684 Views

    @phenomlab many thanks Mark 😁.